Игра Змейка на чистом JavaScript и HTML5 за 45 минут!
Вставка
- Опубліковано 16 лип 2019
- Представляю вам большой урок, в ходе которого мы создадим полноценную красивую игру на чистом JavaScript и HTML5. Игра будет копировать классическую игру "Змейка", при этом в конце урока мы загрузим игру на сервер чтобы все смогли поиграть в игру.
✔ Хостинг можно получить в подарок, но количество активаций ограничено! Используйте промокод GOSHA_HOST. Промокод действителен лишь для тарифа Host-0 и доступен только для первых 30 счастливчиков!
1) Текстовый редактор: atom.io/
2) Подборк иконок: www.iconfinder.com/
3) Хостинг компания: bit.ly/2XCmmJL
4) Ссылка на статью на сайте itProger: itproger.com/news/198
5) Перевод видео: • Create Snake Game Usin...
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - prog_life 🚀
Группа FaceBook - goo.gl/XW0aaP
Инстаграм itProger: / itproger_official
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #GoshaDudar 👨🏼💻
- Все уроки по хештегу #goshaLessons
Гоша, пожалуйста, по больше уроков, по созданию игр. Здоровья тебе :)
Хороший урок, есть чуток замечаний:
1) Код загроможден переменной bох, надо оставит её только для отрисовки в пикселах, а все сравнения и расчеты по координатам вести в количестве самих ячеек, а не в пикселах;
2) Есть объект food, тогда и картинку еды перенести надо в этот объект
3) Есть объект snake, тогда и направление dir перенести в этот объект
4) Есть голова змеи head, snakeX и snakeY - тогда их тоже вложить в объект snake
P.S. По коду "размазаны" переменные, которые через 2 недели не вспомнишь что они делают - их надо логически вкладывать в объекты
код не работает
что тебе всё не нравится?! по твоему надо писать место бокс везде 32?
умник, нашелся! я не хуже тебя в программировании разбираюсь!
@@timagoldm Внимательно перечитай мой пункт 1. Переменная box (а еще лучше сделать её const) нужна только внутри функции отрисовки drawGame(). Вот и всё.
😒
3:37 - Я сразу понял, что наконец-то нашёл того, кто хотябы ЗНАЕТ о ES6!
Я тоже сколько не смотрел видосов, все переменные создают через var про который я уже даже забыл
Чувак, ты самый лучший! Спсибо тебе за все твои уроки! Желаю как можно больше успехов в творчестве!!
Спасибо за видео, я теперь знаю как запустить свои файлы на сервер) И узнала многое что о программировании)
Спасибо огромное!!! От души!!!
Жалко, что у вас так мало видео про игры на джаваскрипт. Спасибо !!
Да
Годнота!!!💪💪💪
Привет, в canvas остаются следы предыдущего местоположения змейки и кажется что ты рисуешь ею на поле. Такой же баг повторяется и с score. Цифра не обновляется а накладывается на предыдущее т.е. на 0 рисуется единичка и тд. Решила проблему добавив ctx.clearRect(0, 0, 609, 609); в самое начало функции drawGame(). Может кому понадобится.
В процессе создания столкнулся с такой-же проблемой. Оказалось, что я написал pop, вместо pop(). Поэтому элементы массива не удалялись, а оставались на месте, что и кажется, как закрашивание
Гоша ты лучший. Удачи тебе
один из очень немногих, на кого я езьже отдущи подписался, отдущи поставил лайк, отдущи оставляю коммент!
Супер🤝🏆слушай топчик еще бы game over по соли экрана это реально не подскажешь как🤔😆
Короч я решил заняться плотно веб разработкой и тут столкнулся с js пока не платно занимаюсь ! Есть советик !? С чего лучше начинать html и css знаю не так хорошо но знаю но говорят в наше время js всем глава без него ни куда ! Что скажешь!?
Спасибо за видео!
А почему Гошу критикуют на других каналах? Хорошо он рассказывает, всё понятно. Конечно для понимания база какая-то нужна, без неё никуда. А так всё норм, всё подробно, чего писать, куда вставлять, почему такое действие.
спасибо за урок, было бы интересно как еще регулировать скорость змейки
Очень круто!
Подскажите насчет ошибки. При выполнении интервала на 11:11 в консоли выдает "Uncaught TypeError: Cannot read property 'drawImage' of null
at drawGame"
вы может быть написали const ctx вместе из за этого и ошибка примерно вот так вот constctx = canvas.getContext("2d");
Спасибо, всё робит!
Спасибо за урок
спасибо!) наглядно)
Крассава бро)
Не хочу выпендриваться, я новичок в этом деле, но я бы создал функцию, которая каждый рандомно генерирует еду, типа function createfood() {тут прописать рандомное появление еды}
А переменную food просто объявить, затем вызвать эту функцию и каждый раз вызывать функция, когда змея проглатывает пищу)
Спасибо за урок)
зачем плодить новые сущности если все решается в пару строк кода? и да, не выпендривайся)
Не до смотрел но все равно ТОП! Спасибо за видео :D
что делать, ошибка game.js:48 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
at drawGame (
Игра на JavaScript удалась! Спасибо!
Подскажите,как привязать звуки к клавишам,типо когда змея умирает,когда ест и двигается
Лайк, всё круто и понятно, я пошёл делать игру)) Единственное чего мне не понятно и хотелось бы понять: за что отвечают meta у тебя в html? их там три
Это стандартная разметка, её создаёт сама прога при создании файла. Она не нужна
поражаюсь твоему трудолюбию
Да капец как сложно брать материал с запада
Он просто украл видео у зарубежного ютубера ua-cam.com/video/9TcU2C1AACw/v-deo.html
ты лучший)
из за блочной видемости dir должен выдавать undefined, обьясните как это работает
Больше JavaScript плизз
Спасибо!
Бро, где ты был раньше?)
Приветствую, насколько сильно нужно будет допилить игру, чтобы была возможность у пользователя сохранить фи и почту, чтобы сохранить/вывести таблицу с результатами?
очень сильно
Круто
Спасибо за инфу
Привет Георгий я писал игру я смотрел все твои уроки по Js и я решил посмотреть это видео в коде у меня показывает что все правильно но когда я зашел в консоль у меня выдало ошибку почему?
Что делать если не воспринимает ctx.drawImege(ground, 0, 0)
Всё прекрасно! Получилось! Но есть один вопрос - зачем исползовать переменную let, если можно использовать переменную var? тоже и с const?(Я не причисляю твои дествия к ошибке, а лишь спрашиваю)
Переменная var устарела, а переменная let более современная
@@jilka3232 Спасибо, теперь попробую чаще использовать переменную let 😄
@@user-ol7fc8ls7e в области видимости дело. если сначала вызвать переменную заданную при помощи var а потом определить ее,то оно даст это сделать и ты получишь undefined. С let такая шняга работать не будет. тебе покажет ошибку. Как то так. Поэтому желательно использовать let. А если уверен что изменять переменную не будешь то делай const. Я обычно const для стрелочных функций использую.
Что-то не могу понять с рандомом. Если он генерирует от 0 до 1, то как получаются координаты больше 1 и меньше 17 при умножении?
Понял. Дело в том что random генерирует дробные числа в пределах от 0 до 1.
Неплохо
Привет вот в картинке для поле змейки я всё правильно прописал обновлял страницу и картинка не появляется что делать?
Очень долго делал, но всё таки переписал эту же игру на Python в Tk+Canvas) Проблема была в зацикливании движения змейки. root.after(150, func) помогло.
Привет, хочу спросить у тебя если не сложно) я хочу научиться фронтент разработке и немного бэкенда, для этого нужен ПК или ноутбук, хотел бы узнать что из этого лучше ? И на сколько мощными они должны быть?
@@kain5731 если хочешь учиться то тебе хватит самого обычного пк или ноутбука что удобнее тебе будет, мощностью не имеет значения, даже на самом простом пк можно открыть редактор кода и видео по которым будешь учиться
Для полного счастья стоит дописать, чтобы координаты спауна новой еды не могли совпасть с одной из координат самой змейки
Как это сделать?
@@光荣归于习近平同志 Изи
@@光荣归于习近平同志 просто заспавнить заново если координаты внутри змейки и так пока не заспавнится нормально
почему у меня не выводит картинку поля, я БУКВАЛЬНО сделал всё точно так же как видео, всё равно картинку не выводит, помогите пожалуйста
Not allowed to load local resource. Как испавить, подскажите пожалуйста
что делать если сайт не показывает поле
это с чем связано
я посмотрел в консоли нету ошибок
подскажите
у меня такая-же хрень
Вызывать функцию нужно, может файл неправильно подключён
У меня так же было, я поместил файл html в папку js ошибочно. Файл html должен быть в главной папке (в этом случае WWW).
Если не помогает напиши внутрь тега канвас какой-то текст и если он выводиться то значит у тебя слишком старая версия браузера.
@@tuavtorru3041 у меня не вываодит текст значит сбраузером у меня всё нормально?
Я хотел сделать несколько еды, но когда змея проглатывает одну ту пропадает сразу несколько и больше не появляеться. Можно это как-то исправить?
Зашёл тупо посмотреть как создать игру ради прикола
В итоге узнал для себя что то новое по Js
Гоша пожалуста ответь уменя не прорисовуеца поле что мне делать?
Игра - класс!
А как сделать несколько уровней?
у меня фрукты иконки только от 48 пикселей есть. Что делать?
в смысле переменные же в javascript объявляются через var или из-за canvas через let?или это просто не 'use strict'
Это относительно новый стандарт, var уже не используется
Это Es6. Теперь let это стандарт
погугли различия между var let и const
Почитай разницу между var и let learn.javascript.ru/let-const
а если я хочу добавить еще цветов к змеи?
Всем привет, на 30 минуте я запускаю змейку и квадрат просто исчезает, и следовательно не двигается
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const ground = new Image();
ground.src = 'img/ground.png';
const foodImg = new Image();
foodImg.src = 'img/food.png';
let box = 32;
let score = 0;
let food = {
x: Math.floor(Math.random() * 17 + 1) * box,
y: Math.floor(Math.random() * 15 + 3) * box,
};
let snake = [];
snake[0] = {
x: 9 * box,
y: 10 * box,
}
document.addEventListener("keydown", direction);
let dir;
function direction(event) {
if(event. keyCode == 37 && dir != 'right')
dir = "left";
else if(event.keyCode == 38 && dir != 'down')
dir = "up";
else if(event.keyCode == 39 && dir != 'left')
dir = "right";
else if(event.keyCode == 40 && dir != 'up')
dir = "down";
}
function drawGame() {
ctx.drawImage(ground, 0, 0);
ctx.drawImage(foodImg, food.x, food.y);
for(let i = 0; i < snake.length; i++) {
ctx.fillStyle = "green";
ctx.fillRect(snake[i].x, snake[i].y, box, box);
}
ctx.fillStyle = "white";
ctx.font = "50px Arial";
ctx.fillText(score, box * 2.5, box * 1.7);
let snakeX = [0].x;
let snakeY = [0].y;
snake.pop();
if(dir == 'left') snakeX -= box;
if(dir == 'right') snakeX += box;
if(dir == 'up') snakeY -= box;
if(dir == 'down') snakeY += box;
let newHead = {
x: snakeX,
y: snakeY,
};
snake.unshift(newHead);
}
let game = setInterval(drawGame, 100);
Спустя 2 года, думаю, неактуально, но вместо:
let snakeX = [0].x;
let snakeY = [0].y;
должно быть:
let snakeX = snake[0].x;
let snakeY = snake[0].y;
Подскажите, вообще ни чего не отображает в браузере, белая пустота, уже для пробы полностью копировал всё и папки и код...
@Schellenberg у вас файл js работает раньше чем html. Объявите тег после того как закрывается тег
@@GooseDL1337 попробую, благодарю за ответ.
@@GooseDL1337 не работает... ничего не работает.. я уже заебался с этим
@@yingwai8668 ты все food заменил на foodImg? проверь правильность написания кода и указаных путей к картинкам. У меня файлы расположены в таких же папках как у него, но чобы получить картинку я прописал такой путь: foodImg.src = "../img/food.png"; после чего все заработало
@@GooseDL1337 тег в самом видео объявляется позже канваса.
Жорик, привееееет! Почему про игры перестал выкладывать уроки?
Нашел 1 баг но не получается поправить . Когда змейка движется в лево при нажатии вниз и вправо одновременно змейка направляется на право( и тож самое при движении вправо ) как пофиксить это ?
Спустя 3 года скорее всего неактуально, но один из простых способов - создать переменную, назовем ее drawUpdated, которая будет являться флагом проверки перерисовки. Далее:
// где-нибудь в начале game.js файла
let drawUpdated = false;
function direction(event){
if(event.keyCode == 37 && dir != "right" && !drawUpdated) // разрешаем одно изменение направления в рамках перерисовки
dir = "left";
else if(event.keyCode == 38 && dir != "down" && !drawUpdated) // разрешаем одно изменение направления в рамках перерисовки
dir = "up";
else if(event.keyCode == 39 && dir != "left" && !drawUpdated) // разрешаем одно изменение направления в рамках перерисовки
dir = "right";
else if(event.keyCode == 40 && dir != "up" && !drawUpdated) // разрешаем одно изменение направления в рамках перерисовки
dir = "down";
/*Пишем, что перерисовка произошла, чтобы при повторном нажатии кнопок wasd в рамках текущей перерисовки змейка не изменила направление и не возникло ситуации, когда, например, змейка двигалась налево и до перерисовки она изменила направление вниз и потом направо из-за чего может показаться, что она сразу пошла слева направо.
*/
drawUpdated = true;
}
function drawGame(){
...
drawUpdated = false; // после перерисовки сбрасываем флаг, чтобы снова установить новое направление в direction(event).
}
P.S. Вероятнее всего можно сделать более лаконично и красиво, т.к. опыта на js особо не было, но способ рабочий.
класс!!! спасибо!!!
вопрос к знающим, как уменьшить скорость движения змейки?
В строке let game = SetInterval ( drawGame, 100 );
надо увеличить интервал с 100, например до 200 (т.е. заменить 100 на 200). Если надо еще медленнее - то ставим 300 вместо 100
@@ivanovserg8795 Спасибо БОЛЬШОЕ!!!!!!!!!!!!!!!!!!!!!
3:43 Это необязательно, у меня работает просто обращение по id (т.е. переменная "game", которой нет в коде, возвращает canvas).
@H 336 Что ты тут делаешь? Лол я твой подписчик =)
@@MaximMoPeR ты на этого дауна подписан?
@@user-qq9qz8gl7y всм
Почему картинку загрузили через setInterval? Да ещё со значением 100. Она же по логике должна как раз мелькать...
А скажите пожалуйста от этого значения может не отображать половину поля?
почему когда пишешь например document.get... не высвечивается подсказка getElementById
Зависит от редактора кода,
А что делать если змейка не отображается сделал всё точь в точь, и всё равно не появляется
помогите пожалуйста код аналогичный ошибок в консоле нет но змейка не растет кде я сделал чтото не так????
Перед кнопками left , right удали pop
Пытался разобраться как работает змейка, но даже я полный новичок вижу что код написан как попало. Куча лишних переменных, объектов непонятно для чего они нужны... Вот в чем проблема например сделать объект и с направлениями змейки и позицией? не понятно...
У меня постоянно ошибка в JS
Белый экран а в консоли пишет :
Failed to load resource: net::ERR_FILE_NOT_FOUND ss/style.css:1
game.js:43 Uncaught SyntaxError: Identifier 'i' has already been declared game.js:43
перекинь style.css:1 и game.js:43 в папку где index.html и измени путь на а game.js на должно сработать
замени const на let на строке 43
У меня рисуется ЕДА , СЧЁТ, ЗМЕЙКА. Еда перемещается. Но змейка не двигается. консоль всё время выдаёт ошибки, хотя всё сделано по Гоше. Кажется, перепробовал всё. Выдаваемые консолью ошибки, на первый взгляд, выглядят необоснованными. Что делать не знаю.
Я не могу найти такоеже поле оно мне очень понравилось можете кинуть ссилку на него ИЛИ как то передать
Помогите пожалуйста у меня поле половину отображает
А я прям на телефоне кодил и получилось
👍👍👍
где ты ссылку для картинки написал 🥺
Гоша помоги пожалуйста у меня вот это поле половину отображает половину нет все проверил и все ровно
Может вы задали ширину и высоту через СИэсЭС?
Почему у меня поле не прорисовуетса? Помогите пж.
У меня тоже(((
Полчаса искал ошибку... оказалось в строке: const ctx = canvas.getContext("2d"); Написал 2d написал с большой буквой, то есть 2D. А в консоль писало: "Uncaught TypeError: Cannot read property 'drawImage' of null
at drawGame" 😁
*А какая разница между var, let, const?*
const - неизменяемая переменная(константа)
var - старый способ создания переменной
let - новый способ создания переменной, с некоторыми незначительными преимуществами перед var
@@intbyte спасибо 🙂
@@intbyte если создать let переменную в функции то она будет только в её пределах, если не ошибаюсь.
У меня моментами еда не появляется. Что делать?
и ещё такой момент, если змейка внезапно остановилась при развороте, но сама ещё прямая, значит она развернулась не изменив координаты и сама себя съела
@Mad Doctor Это нужно изменить в другом месте, не там где коды указываются, а
if(dir == "left") snake -= box;
...
Тут проверь, все ли минусы и плюсы правильно написал, и порядок (left, right, up, down)
@Mad Doctor Скинь скриншот
У меня ошибка, он не находит css файл
если файл css находится в отдельной папке (скорее сего так и есть), убедись, что перед написанием имени файла написал в какой он папке находится:
Гоша, твои уроки по JavaScript еще актуальны?
Чувак скинь свой вк я тоже начинаю обучение джва скрипт . И да его уроки актуальны
Очень даже
@@jabka1356 хах, давай я с вами
А за сколько примерно можно научиться писать такие коды от нуля? Учу уже неделю, понял почти всё но сам писать сначало не смогу
Пиши сперва все по видео, будешь со временем своим мозгом осознавать код, функции будут запоминается и в будущем сможешь писать код без сторонней помощи, но до этого ещё долгая практика таких сценариев.
На своём опыте говорю, не помогли учебники, помогло списывание с туториалов.
И да, неделя для js - мало, месяц как минимум. Хотя в js нету прям заумных функций(
что делать если в консоли вылезло это Uncaught SyntaxError: Unexpected token ')'
Где-то лишний символ наверное открой консоль в, защите там покажет ошибку нажми на неё и покажет где это и исправь
@@ogg4470 Я уже давно решил, но все же спасибо
Гоша, я твой старый подписчик. У меня есть очень интересный вопрос. Он немного не по теме программирования, а больше по теме 3D и создания игр. Но я не знаю кому ещё задать. Если прочитал это напиши хоть . и я распишу вопрос. Надеюсь прочитаешь.
А какой вопрос?
Какой движок ? Где моделировать ?
@@user-tp5jh1vd3s как бы вопрос не по моделям. Я видел на ютубе англ видео о дешёвой лицевой анимации. Люди обмазывали лицо зелёнкой и делали так лицевую анимацию. Могу скинуть. Очень интересная тема, и на рутубе никто не делал. Автор делал в блендера. (но я люблю синьку и подобных видео не было).
@@layon5413 это не зелёнка )) это что-то типо присосок .
И это могут позволить только богатые дяди и тети (очень дорого)
@@user-tp5jh1vd3s ты очень плохо читал. Это бесплатно, в этом и прикол. Они как то настраивают и делают анимацию. Случайно на ролик наткнулся, оказалось по подобному запросу есть ещё. И там реал похоже на зеленку.) А студийная анимация стоит десятки тысяч долларов.
А АБЕЗАТЕЛЬНО ПИСАТЬ CONST И LET просто я мало знаю о es6
так прочитай про это
А ты можешь показать как создать игру Got of war на javascript ?
Кринж
Почему змейка не появляется?
Почему Карл у меня не работает эта игра
А сможешь сделать видео как создавать меню для игр (старт, настройки и т. д)
Там легко .
Сначала делаешь меню дизайн и кнопки и помещяеш всё кто в функцию , далее делаешь саму игру и помещяеш это в другую функцию .
Далее в меню при нажатии на кнопку старт ты вызываешь функцию с самой игрой а при нажатии на кнопку меню (в игре) прерываешь цыкл игры и вызываешь функцию с меню
Это в теории а на практике не знаю как будет
Делаеш отдельную страницу,и сайт делаеш там на html там старт кнопки и тд
@@DanilSolodkov и зачем для игры делать двадцать сайтов ? (Я так понял что для каждого окна отдельный сайт)
это жызнь ты куку?страницу отдельную
Грузится будет дольше
У меня есть вопрос: Когда змея есть еду, он не удлиняется. Почему?
У меня змейка движется, удлиняясь с каждым квадратиком. Не могу сделать, чтобы змейка двигалась одним квадратиком. Кажется, всё делаю по Гоше. Помогите, кто может!
Решили проблему? Если да, то подскажите пожалуйста.
Что делать если змейка не увеличивается...
Если вы хотите что-бы когда голова врезалась в стенку голова не пролетала ещё клетку, то просто вставте этот код после кода с созданием переменной newHead!
А где ссылки?
Полностью переписал код не получается вообще бесконечная ошибка.
P.S. там где ctx.drawImage(ground, 0, 0);
так же, исправил?
Ребята скиньте пожалуйста несколько строк кода чтобы еда НЕ спавнилась под змейкой
Как сделать скорость змейки меньше?
let game = setInterval(drawGame, 100); поменяй скорость обновления на 250 мсек, например.
сделай видео урок по Meteor js
?
Это библиотека?
@@user-tp5jh1vd3s +
Скажи рандомное английское слово и с вероятностью 99% это библиотека для JavaScript
Я бы изображение в CSS сделал
useful