D4mations.com

Создание игры на чистом JavaScript за 20 минут!



Регистрация на урок: https://vk.cc/83Osiw

Создание игр на JavaScript и HTML стало возможным с приходом HTML5. В этом видео мы создадим небольшую 2D игру на подобии игры Flappy Bird всего за 20 минут. При этом мы будем использовать лишь чистый JavaScript код!

Статья со всеми материалами к игре: https://itproger.com/news/104

✔ Сообщество программистов: https://itproger.com/

✔ ————-
Вступай в группу Вк – https://vk.com/prog_life 🚀
Группа FaceBook – https://goo.gl/XW0aaP

Instagram: https://www.instagram.com/gosha_dudar/
Telegram: http://t.me/itProger_official
Twitter – https://twitter.com/GoshaDudar

– Уроки от #GoshaDudar 👨🏼‍💻
– Все уроки по хештегу #GoshaLessons

Original source

d4mer

, , , , , , , , , , , , ,

33 responses to “Создание игры на чистом JavaScript за 20 минут!”

  5. Клево конечно, новички могут увидеть что может JS, но уровень прям очень маленький, если бы я глянул его до изучения JS то не особо впечатлился

  6. Очень познавательно, хотелось бы узнать можно ли создать ссылку таким же образом? Чтоб например при нажатии на картинку переходило на другую страницу? Спасибо

  7. не работающая параша
    Данный блок
    // Отслеживание прикосновений

    if(xPos + bird.width >= pipe[i].x

    && xPos <= pipe[i].x + pipeUp.width

    && (yPos <= pipe[i].y + pipeUp.height

    || yPos + bird.height >= pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= cvs.height – fg.height) {

    location.reload(); // Перезагрузка страницы

    }
    не работает при запуске с любым другим масивом, также при смене стороны передвижения т.е. просто x меняем на y вообще ничего не запускает из js файла ибо в этом ошибка

  8. Мне кажется, что все (ну или почти все) кто попытался поворить за автором на самом деле имели одну и ту же проблему – не загружалась графика. А те, кто писали, что видео крутое – просто его посмотрели, но повторить не пытались.

  9. Лучше все время изменять переменную grav на -1, а в момент прыжка ставить пременной grav значение 10. Тогда игра будет больше похожа на Flappy Bird.

  11. возможно залить эту игру на сайт, что бы играть можно было всем и без моего компьютера, если да то как это сделать???

  18. файл не подключается скопировал с cайта html и js коды, названия уазано правильно файл находиться в той же папке всё как у автора
    www
    index.html
    js
    audio
    img
    game.js

    вот так располагаются файлы но всё равно ни чего не работает в чём может быть проблема?

  21. при запуске игра ушла в циклическую перезагрузку(((. Подскажите, пожалуйста, что делать? Заранее спасибо!
    P. S.: Мой код:
    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Flappy Bird!</title>

    </head>

    <body>

    <canvas id="canvas" width="288" height="512"></canvas>

    <script>

    var cvs = document.getElementById("canvas");

    var ctx = cvs.getContext("2d");

    var bird = new Image();

    var bg = new Image();

    var fg = new Image();

    var pipeUp = new Image();

    var pipeBottom = new Image();

    bird.src = "flappy_bird_bg.png";

    bg.src = "flappy_bird_fg.png";

    fg.src = "flappy_bird_bird.png";

    pipeUp.src = "flappy_bird_pipeBottom.png";

    pipeBottom.src = "flappy_bird_pipeUp.png";

    // Звуковые файлы

    var fly = new Audio();

    var score_audio = new Audio();

    fly.src = "._fly.mp3";

    score_audio.src = "._score.mp3";

    var gap = 90;

    // При нажатии на какую-либо кнопку

    document.addEventListener("keydown", moveUp);

    function moveUp() {

    yPos -= 25;

    fly.play();

    }

    // Создание блоков

    var pipe = [];

    pipe[0] = {

    x : cvs.width,

    y : 0

    }

    var score = 0;

    // Позиция птички

    var xPos = 10;

    var yPos = 150;

    var grav = 1.5;

    function draw() {

    ctx.drawImage(bg, 0, 0);

    for(var i = 0; i < pipe.length; i++) {

    ctx.drawImage(pipeUp, pipe[i].x, pipe[i].y);

    ctx.drawImage(pipeBottom, pipe[i].x, pipe[i].y + pipeUp.height + gap);

    pipe[i].x–;

    if(pipe[i].x == 125) {

    pipe.push({

    x : cvs.width,

    y : Math.floor(Math.random() * pipeUp.height) – pipeUp.height

    });

    }

    // Отслеживание прикосновений

    if(xPos + bird.width >= pipe[i].x

    && xPos <= pipe[i].x + pipeUp.width

    && (yPos <= pipe[i].y + pipeUp.height

    || yPos + bird.height >= pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= cvs.height – fg.height) {

    location.reload(); // Перезагрузка страницы

    }

    if(pipe[i].x == 5) {

    score++;

    score_audio.play();

    }

    }

    ctx.drawImage(fg, 0, cvs.height – fg.height);

    ctx.drawImage(bird, xPos, yPos);

    yPos += grav;

    ctx.fillStyle = "#000";

    ctx.font = "24px Verdana";

    ctx.fillText("Счет: " + score, 10, cvs.height – 20);

    requestAnimationFrame(draw);

    }

    pipeBottom.onload = draw;

    </script>

    </body>

    </html>

  32. Базара нет, брат. Достойно всё пояснил мне за жизнь. теперь я лучше понимаю как жить грамотно. От души!

Leave a Reply