• Monday , 25 May 2020

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

Code Canyon



Регистрация на урок: 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

3d Ocean

Related Posts

33 Comments

  1. OO ps
    December 21, 2019 at 20:07

    Урок ради рекламы. Вы не ахуели там?

  2. Антон Джгун
    December 21, 2019 at 20:07

    ни х у и ща не работает

  3. GeFeSTツ
    December 21, 2019 at 20:07

    Видео ускорено чтоли ?

  4. kolabrod
    December 21, 2019 at 20:07

    у кого не прогружаются картинки, в самом начале: pipeBottom.onload = setInterval(() => {
    draw();
    }, 100);

    дальше просто draw();

  5. Qwerty Qwerty
    December 21, 2019 at 20:07

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

  6. Вероника Вашкевич
    December 21, 2019 at 20:07

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

  7. Сентинел Фантом
    December 21, 2019 at 20:07

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

    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. Sergey Garanin
    December 21, 2019 at 20:07

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

  9. FunRoom
    December 21, 2019 at 20:07

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

  10. Lexxar
    December 21, 2019 at 20:07

    Все делаю как в уроке,но картинки не появляются на странице(((

  11. WET SUM
    December 21, 2019 at 20:07

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

  12. forgiveness denied
    December 21, 2019 at 20:07

    благодарочка

  13. Rava Bat
    December 21, 2019 at 20:07

    Странно, что в 2018 вижу в JS – var, getElementById… Давно уже querySelector и let

  14. damn,son
    December 21, 2019 at 20:07

    Cannot read property 'getContext' of null

  15. Тимур Адилов
    December 21, 2019 at 20:07

    Сделай движение дива по документу(область экрана) с препятствием.

  16. Шина Вандал
    December 21, 2019 at 20:07

    Ну страница не адаптивна же?

  17. Sten Weider
    December 21, 2019 at 20:07

    На какой програме он пишет коди?

  18. басарга
    December 21, 2019 at 20:07

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

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

  19. Ghost
    December 21, 2019 at 20:07

    Что этотза редактор?

  20. Viktoria Holmes
    December 21, 2019 at 20:07

    Отличное видео и все получилось!

  21. Каролина Бублик
    December 21, 2019 at 20:07

    при запуске игра ушла в циклическую перезагрузку(((. Подскажите, пожалуйста, что делать? Заранее спасибо!
    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>

  22. Михаил Маевский
    December 21, 2019 at 20:07

    Спасибо, очень интересно было

  23. NASGUL
    December 21, 2019 at 20:07

    Да всё тут понятно, просто это не для новичков

  24. Отец & Argait
    December 21, 2019 at 20:07

    изи курсач на проходную за 20 мин.

  25. FADE Grozniy
    December 21, 2019 at 20:07

    Это можно будет залить на хостинг и играть от туда ?

  26. Albert Saitov
    December 21, 2019 at 20:07

    Господи какую же хуйню ты несешь дядя Т_Т

  27. Sir Dreamer
    December 21, 2019 at 20:07

    Есть вопрос стоит ли смотреть видеокурсы по JS от автора за 2015 год ?

  28. Просто Гуля
    December 21, 2019 at 20:07

    https://www.youtube.com/watch?v=L07i4g-zhDA – оригинал. Но за перевод, спасибо.

  29. Дмитрий Титов
    December 21, 2019 at 20:07

    ES6?

  30. Amkonax
    December 21, 2019 at 20:07

    а проехавшие пайпы не надо из массива удалять?

  31. j7sx
    December 21, 2019 at 20:07

    а как анимацию прыжка сделать?
    else if (e.keyCode == 38){
    for (i=0; i<10; i++){
    xPos+=1;
    yPos-=6;
    //xPos+=1;
    //yPos+=6;
    }

  32. Dan 11
    December 21, 2019 at 20:07

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

  33. Сам Сибирский
    December 21, 2019 at 20:07

    Ничего личного, но меня бесят типы которые говорят кы вы, вместо к в

Leave A Comment

You must be logged in to post a comment.