Flappy Bird!

{"draftJsState":{"blocks":[{"data":{"image":{"id":"65b2598b750e2073a179d32c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"49k5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На JS можно создавать сложные и простые игры любых жанров. Мы расскажем как создать 2D игру на JavaScript и HTML5 всего за 20 минут.","type":"unstyled","key":"86tmk"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":10,"offset":30},{"key":1,"length":5,"offset":118}],"inlineStyleRanges":[{"length":10,"offset":101,"style":"BOLD"}],"text":"Для создания веб игр на языке JavaScript используется технология Canvas, которая позволяет выполнять JavaScript код в HTML5 документе. Вы можете более детально ознакомиться с этой технологией посмотрев видео ниже:","type":"unstyled","key":"6pi3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На html странице прописывается лишь тег канвас, а также подключение JS файла, в котором будет происходить обработка всей функциональности. К примеру, HTML файл может выглядеть следующим образом:","type":"unstyled","key":"evfs8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Flappy Bird! \n

\n ","type":"unstyled","key":"h2v9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":35,"style":"BOLD"}],"text":"В JS файле необходимо найти нужный канвас по id и указать способ работы с ним.","type":"unstyled","key":"6430n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var cvs = document.getElementById(\"canvas\"); var ctx = cvs.getContext(\"2d\");","type":"unstyled","key":"41jlu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавление изображений и аудио","type":"header-two","key":"7jr8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Далее необходимо загрузить все изображения, а также аудио файлы, которые будут использоваться в игре. Для этого используйте класс Image и Audio соответсвенно. Ниже вы можете скачать все необходимые картинки, а также аудиофайлы к игре.","type":"unstyled","key":"46cem"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":11,"offset":29}],"inlineStyleRanges":[],"text":"Скачать аудио файлы можно по этой ссылке;","type":"unordered-list-item","key":"51cb6"},{"data":{"image":{"id":"65b259f341ab4206df2ec673"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"arjdh"},{"data":{"image":{"id":"65b259f31e72b273d354d0d1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6hnr1"},{"data":{"image":{"id":"65b259f319cf1852c4239fdb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6p0hf"},{"data":{"image":{"id":"65b259f307f75168513109a5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2s39d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код добавления изображений и аудио в игру:","type":"unstyled","key":"bj210"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var bird = new Image(); var bg = new Image(); // Создание объекта var fg = new Image(); // Создание объекта var pipeUp = new Image(); // Создание объекта var pipeBottom = new Image(); // Создание объекта \nbird.src = \"img/bird.png\"; // Указание нужного изображения bg.src = \"img/bg.png\"; // Аналогично fg.src = \"img/fg.png\"; // Аналогично pipeUp.src = \"img/pipeUp.png\"; // Аналогично pipeBottom.src = \"img/pipeBottom.png\"; // Аналогично \n// Звуковые файлы var fly = new Audio(); // Создание аудио объекта var score_audio = new Audio(); // Создание аудио объекта \nfly.src = \"audio/fly.mp3\"; // Указание нужной записи score_audio.src = \"audio/score.mp3\"; // Аналогично","type":"unstyled","key":"4vqpt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рисование объектов","type":"header-two","key":"ep4m0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы нарисовать объекты, а также добавить функционал к игре необходимо прописать функцию, которая будет постоянно вызываться. Такую функцию вы можете назвать как вам будет угодно. Главное, вам нужно вызвать эту функцию из вне её хотя бы один раз, а внутри неё прописать метод requestAnimationFrame, который будет вызывать функцию постоянно.","type":"unstyled","key":"6p779"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function draw() { // Какой-либо код requestAnimationFrame(draw); // Вызов функции постоянно } \ndraw(); // Вызов функции из вне","type":"unstyled","key":"a8k5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Весь код игры стоит помещать в этот метод, ведь в нем он будет постоянно обрабатываться и игра будет выглядеть живой и анимированной.","type":"unstyled","key":"9t8ig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы отследить нажатие игрока на какую-либо клавишу, необходимо использовать отслеживание событий - addEventListener. К примеру, чтобы отследить нажатие на любую клавишу на клавиатуре надо прописать следующий код:","type":"unstyled","key":"dscv7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// При нажатии на какую-либо кнопку document.addEventListener(\"keydown\", someMethod); // Вызывается метод someMethod function someMethod() { // Изменяем что-то в коде }","type":"unstyled","key":"53v0q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Видео урок","type":"header-two","key":"9m072"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":167,"style":"ITALIC"}],"text":"Это были лишь небольшие азы перед созданием самой игры. Предлагаем вам ознакомиться с небольшим видео уроком, в ходе которого вы создадите небольшую 2D игру на чистом JavaScript'е.","type":"unstyled","key":"bod00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Весь JS код игры","type":"header-two","key":"7j2b8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже вы можете посмотреть на полностью весь код JavaScript файла, который был создан в ходе видео урока выше:","type":"unstyled","key":"3tom7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var cvs = document.getElementById(\"canvas\"); var ctx = cvs.getContext(\"2d\"); \nvar bird = new Image(); var bg = new Image(); var fg = new Image(); var pipeUp = new Image(); var pipeBottom = new Image(); \nbird.src = \"img/bird.png\"; bg.src = \"img/bg.png\"; fg.src = \"img/fg.png\"; pipeUp.src = \"img/pipeUp.png\"; pipeBottom.src = \"img/pipeBottom.png\"; \n// Звуковые файлы var fly = new Audio(); var score_audio = new Audio(); \nfly.src = \"audio/fly.mp3\"; score_audio.src = \"audio/score.mp3\"; \nvar gap = 90; \n// При нажатии на какую-либо кнопку document.addEventListener(\"keydown\", moveUp); \nfunction moveUp() { yPos -= 25; fly.play(); } \n// Создание блоков var pipe = []; \npipe[0] = { x : cvs.width, y : 0 } \nvar score = 0; // Позиция птички var xPos = 10; var yPos = 150; var grav = 1.5; \nfunction draw() { ctx.drawImage(bg, 0, 0); \n 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); \n pipe[i].x--; \n if(pipe[i].x == 125) { pipe.push({ x : cvs.width, y : Math.floor(Math.random() * pipeUp.height) - pipeUp.height\n }); } \n // Отслеживание прикосновений if(xPos + bird.width >= pipe[i].x\n && xPos <= pipe[i].x + pipeUp.width\n && (yPos <= pipe[i].y + pipeUp.height\n || yPos + bird.height >= pipe[i].y + pipeUp.height + gap) || yPos + bird.height >= cvs.height - fg.height) { location.reload(); // Перезагрузка страницы } \n if(pipe[i].x == 5) { score++; score_audio.play(); } } \n ctx.drawImage(fg, 0, cvs.height - fg.height); ctx.drawImage(bird, xPos, yPos); \n yPos += grav; \n ctx.fillStyle = \"#000\"; ctx.font = \"24px Verdana\"; ctx.fillText(\"Счет: \" + score, 10, cvs.height - 20); \n requestAnimationFrame(draw); } \npipeBottom.onload = draw;","type":"unstyled","key":"25i5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ts1n3Ac4aSXZh14dfC2C"}],"entityMap":{"0":{"data":{"href":"https://itproger.com/course/javascript","url":"https://itproger.com/course/javascript"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://itproger.com/course/html","url":"https://itproger.com/course/html"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://drive.google.com/file/d/1GcgFYRucjnkNA6VRP2uwzFwtO0i58ziH/view?usp=sharing","url":"https://drive.google.com/file/d/1GcgFYRucjnkNA6VRP2uwzFwtO0i58ziH/view?usp=sharing"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}