Игра Змейка на чистом JavaScript и HTML5 за 45 минут!
HTML-код
- Опубликовано: 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 про который я уже даже забыл
Годнота!!!💪💪💪
Чувак, ты самый лучший! Спсибо тебе за все твои уроки! Желаю как можно больше успехов в творчестве!!
Спасибо огромное!!! От души!!!
Жалко, что у вас так мало видео про игры на джаваскрипт. Спасибо !!
Да
Гоша ты лучший. Удачи тебе
Спасибо за видео, я теперь знаю как запустить свои файлы на сервер) И узнала многое что о программировании)
один из очень немногих, на кого я езьже отдущи подписался, отдущи поставил лайк, отдущи оставляю коммент!
Спасибо за видео!
Подскажите насчет ошибки. При выполнении интервала на 11:11 в консоли выдает "Uncaught TypeError: Cannot read property 'drawImage' of null
at drawGame"
вы может быть написали const ctx вместе из за этого и ошибка примерно вот так вот constctx = canvas.getContext("2d");
Очень круто!
спасибо!) наглядно)
Спасибо, всё робит!
Привет, в canvas остаются следы предыдущего местоположения змейки и кажется что ты рисуешь ею на поле. Такой же баг повторяется и с score. Цифра не обновляется а накладывается на предыдущее т.е. на 0 рисуется единичка и тд. Решила проблему добавив ctx.clearRect(0, 0, 609, 609); в самое начало функции drawGame(). Может кому понадобится.
В процессе создания столкнулся с такой-же проблемой. Оказалось, что я написал pop, вместо pop(). Поэтому элементы массива не удалялись, а оставались на месте, что и кажется, как закрашивание
Спасибо за урок
Крассава бро)
спасибо за урок, было бы интересно как еще регулировать скорость змейки
Спасибо!
Супер🤝🏆слушай топчик еще бы game over по соли экрана это реально не подскажешь как🤔😆
Короч я решил заняться плотно веб разработкой и тут столкнулся с js пока не платно занимаюсь ! Есть советик !? С чего лучше начинать html и css знаю не так хорошо но знаю но говорят в наше время js всем глава без него ни куда ! Что скажешь!?
Не хочу выпендриваться, я новичок в этом деле, но я бы создал функцию, которая каждый рандомно генерирует еду, типа function createfood() {тут прописать рандомное появление еды}
А переменную food просто объявить, затем вызвать эту функцию и каждый раз вызывать функция, когда змея проглатывает пищу)
Спасибо за урок)
зачем плодить новые сущности если все решается в пару строк кода? и да, не выпендривайся)
Круто
поражаюсь твоему трудолюбию
Да капец как сложно брать материал с запада
Он просто украл видео у зарубежного ютубера ruclips.net/video/9TcU2C1AACw/видео.html
Игра на JavaScript удалась! Спасибо!
А почему Гошу критикуют на других каналах? Хорошо он рассказывает, всё понятно. Конечно для понимания база какая-то нужна, без неё никуда. А так всё норм, всё подробно, чего писать, куда вставлять, почему такое действие.
Не до смотрел но все равно ТОП! Спасибо за видео :D
Подскажите,как привязать звуки к клавишам,типо когда змея умирает,когда ест и двигается
Спасибо за инфу
ты лучший)
Неплохо
Приветствую, насколько сильно нужно будет допилить игру, чтобы была возможность у пользователя сохранить фи и почту, чтобы сохранить/вывести таблицу с результатами?
очень сильно
Больше JavaScript плизз
что делать, ошибка game.js:48 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
at drawGame (
Бро, где ты был раньше?)
из за блочной видемости dir должен выдавать undefined, обьясните как это работает
Лайк, всё круто и понятно, я пошёл делать игру)) Единственное чего мне не понятно и хотелось бы понять: за что отвечают meta у тебя в html? их там три
Это стандартная разметка, её создаёт сама прога при создании файла. Она не нужна
Привет Георгий я писал игру я смотрел все твои уроки по Js и я решил посмотреть это видео в коде у меня показывает что все правильно но когда я зашел в консоль у меня выдало ошибку почему?
Всё прекрасно! Получилось! Но есть один вопрос - зачем исползовать переменную let, если можно использовать переменную var? тоже и с const?(Я не причисляю твои дествия к ошибке, а лишь спрашиваю)
Переменная var устарела, а переменная let более современная
@@jilka3232 Спасибо, теперь попробую чаще использовать переменную let 😄
@@user-ol7fc8ls7e в области видимости дело. если сначала вызвать переменную заданную при помощи var а потом определить ее,то оно даст это сделать и ты получишь undefined. С let такая шняга работать не будет. тебе покажет ошибку. Как то так. Поэтому желательно использовать let. А если уверен что изменять переменную не будешь то делай const. Я обычно const для стрелочных функций использую.
Что-то не могу понять с рандомом. Если он генерирует от 0 до 1, то как получаются координаты больше 1 и меньше 17 при умножении?
Понял. Дело в том что random генерирует дробные числа в пределах от 0 до 1.
Жорик, привееееет! Почему про игры перестал выкладывать уроки?
Привет вот в картинке для поле змейки я всё правильно прописал обновлял страницу и картинка не появляется что делать?
👍👍👍
Игра - класс!
А как сделать несколько уровней?
в смысле переменные же в javascript объявляются через var или из-за canvas через let?или это просто не 'use strict'
Это относительно новый стандарт, var уже не используется
Это Es6. Теперь let это стандарт
погугли различия между var let и const
Почитай разницу между var и let learn.javascript.ru/let-const
Очень долго делал, но всё таки переписал эту же игру на Python в Tk+Canvas) Проблема была в зацикливании движения змейки. root.after(150, func) помогло.
Привет, хочу спросить у тебя если не сложно) я хочу научиться фронтент разработке и немного бэкенда, для этого нужен ПК или ноутбук, хотел бы узнать что из этого лучше ? И на сколько мощными они должны быть?
@@kain5731 если хочешь учиться то тебе хватит самого обычного пк или ноутбука что удобнее тебе будет, мощностью не имеет значения, даже на самом простом пк можно открыть редактор кода и видео по которым будешь учиться
Гоша пожалуста ответь уменя не прорисовуеца поле что мне делать?
Что делать если не воспринимает ctx.drawImege(ground, 0, 0)
Для полного счастья стоит дописать, чтобы координаты спауна новой еды не могли совпасть с одной из координат самой змейки
Как это сделать?
@@user-vi3ur8bw8k Изи
@@user-vi3ur8bw8k просто заспавнить заново если координаты внутри змейки и так пока не заспавнится нормально
Not allowed to load local resource. Как испавить, подскажите пожалуйста
Я хотел сделать несколько еды, но когда змея проглатывает одну ту пропадает сразу несколько и больше не появляеться. Можно это как-то исправить?
почему когда пишешь например document.get... не высвечивается подсказка getElementById
Зависит от редактора кода,
useful
Зашёл тупо посмотреть как создать игру ради прикола
В итоге узнал для себя что то новое по Js
а если я хочу добавить еще цветов к змеи?
Нашел 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 Спасибо БОЛЬШОЕ!!!!!!!!!!!!!!!!!!!!!
у меня фрукты иконки только от 48 пикселей есть. Что делать?
что делать если сайт не показывает поле
это с чем связано
я посмотрел в консоли нету ошибок
подскажите
у меня такая-же хрень
Вызывать функцию нужно, может файл неправильно подключён
У меня так же было, я поместил файл html в папку js ошибочно. Файл html должен быть в главной папке (в этом случае WWW).
Если не помогает напиши внутрь тега канвас какой-то текст и если он выводиться то значит у тебя слишком старая версия браузера.
@@tuavtorru3041 у меня не вываодит текст значит сбраузером у меня всё нормально?
почему у меня не выводит картинку поля, я БУКВАЛЬНО сделал всё точно так же как видео, всё равно картинку не выводит, помогите пожалуйста
Почему картинку загрузили через setInterval? Да ещё со значением 100. Она же по логике должна как раз мелькать...
А скажите пожалуйста от этого значения может не отображать половину поля?
где ты ссылку для картинки написал 🥺
А я прям на телефоне кодил и получилось
Подскажите, вообще ни чего не отображает в браузере, белая пустота, уже для пробы полностью копировал всё и папки и код...
@Schellenberg у вас файл js работает раньше чем html. Объявите тег после того как закрывается тег
@@GooseDL1337 попробую, благодарю за ответ.
@@GooseDL1337 не работает... ничего не работает.. я уже заебался с этим
@@yingwai8668 ты все food заменил на foodImg? проверь правильность написания кода и указаных путей к картинкам. У меня файлы расположены в таких же папках как у него, но чобы получить картинку я прописал такой путь: foodImg.src = "../img/food.png"; после чего все заработало
@@GooseDL1337 тег в самом видео объявляется позже канваса.
3:43 Это необязательно, у меня работает просто обращение по id (т.е. переменная "game", которой нет в коде, возвращает canvas).
@H 336 Что ты тут делаешь? Лол я твой подписчик =)
@@MaximMoPeR ты на этого дауна подписан?
@@user-qq9qz8gl7y всм
помогите пожалуйста код аналогичный ошибок в консоле нет но змейка не растет кде я сделал чтото не так????
Перед кнопками left , right удали pop
Гоша, твои уроки по JavaScript еще актуальны?
Чувак скинь свой вк я тоже начинаю обучение джва скрипт . И да его уроки актуальны
Очень даже
@@jabka1356 хах, давай я с вами
Всем привет, на 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;
Гоша помоги пожалуйста у меня вот это поле половину отображает половину нет все проверил и все ровно
Может вы задали ширину и высоту через СИэсЭС?
Я не могу найти такоеже поле оно мне очень понравилось можете кинуть ссилку на него ИЛИ как то передать
Помогите пожалуйста у меня поле половину отображает
Пытался разобраться как работает змейка, но даже я полный новичок вижу что код написан как попало. Куча лишних переменных, объектов непонятно для чего они нужны... Вот в чем проблема например сделать объект и с направлениями змейки и позицией? не понятно...
А что делать если змейка не отображается сделал всё точь в точь, и всё равно не появляется
и ещё такой момент, если змейка внезапно остановилась при развороте, но сама ещё прямая, значит она развернулась не изменив координаты и сама себя съела
@Mad Doctor Это нужно изменить в другом месте, не там где коды указываются, а
if(dir == "left") snake -= box;
...
Тут проверь, все ли минусы и плюсы правильно написал, и порядок (left, right, up, down)
@Mad Doctor Скинь скриншот
Белый экран а в консоли пишет :
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
У меня ошибка, он не находит css файл
если файл css находится в отдельной папке (скорее сего так и есть), убедись, что перед написанием имени файла написал в какой он папке находится:
Если вы хотите что-бы когда голова врезалась в стенку голова не пролетала ещё клетку, то просто вставте этот код после кода с созданием переменной newHead!
У меня постоянно ошибка в JS
Гоша, я твой старый подписчик. У меня есть очень интересный вопрос. Он немного не по теме программирования, а больше по теме 3D и создания игр. Но я не знаю кому ещё задать. Если прочитал это напиши хоть . и я распишу вопрос. Надеюсь прочитаешь.
А какой вопрос?
Какой движок ? Где моделировать ?
@@user-tp5jh1vd3s как бы вопрос не по моделям. Я видел на ютубе англ видео о дешёвой лицевой анимации. Люди обмазывали лицо зелёнкой и делали так лицевую анимацию. Могу скинуть. Очень интересная тема, и на рутубе никто не делал. Автор делал в блендера. (но я люблю синьку и подобных видео не было).
@@layon5413 это не зелёнка )) это что-то типо присосок .
И это могут позволить только богатые дяди и тети (очень дорого)
@@user-tp5jh1vd3s ты очень плохо читал. Это бесплатно, в этом и прикол. Они как то настраивают и делают анимацию. Случайно на ролик наткнулся, оказалось по подобному запросу есть ещё. И там реал похоже на зеленку.) А студийная анимация стоит десятки тысяч долларов.
Я бы изображение в CSS сделал
Почему у меня поле не прорисовуетса? Помогите пж.
У меня тоже(((
У меня моментами еда не появляется. Что делать?
33:00
Полчаса искал ошибку... оказалось в строке: const ctx = canvas.getContext("2d"); Написал 2d написал с большой буквой, то есть 2D. А в консоль писало: "Uncaught TypeError: Cannot read property 'drawImage' of null
at drawGame" 😁
А ты можешь показать как создать игру Got of war на javascript ?
Кринж
Оаоаоа
А за сколько примерно можно научиться писать такие коды от нуля? Учу уже неделю, понял почти всё но сам писать сначало не смогу
Пиши сперва все по видео, будешь со временем своим мозгом осознавать код, функции будут запоминается и в будущем сможешь писать код без сторонней помощи, но до этого ещё долгая практика таких сценариев.
На своём опыте говорю, не помогли учебники, помогло списывание с туториалов.
И да, неделя для js - мало, месяц как минимум. Хотя в js нету прям заумных функций(
я один сделал эту змейку в блокноте😂?
что делать если в консоли вылезло это Uncaught SyntaxError: Unexpected token ')'
Где-то лишний символ наверное открой консоль в, защите там покажет ошибку нажми на неё и покажет где это и исправь
@@ogg4470 Я уже давно решил, но все же спасибо
А АБЕЗАТЕЛЬНО ПИСАТЬ CONST И LET просто я мало знаю о es6
так прочитай про это
сделай видео урок по Meteor js
?
Это библиотека?
@@user-tp5jh1vd3s +
Скажи рандомное английское слово и с вероятностью 99% это библиотека для JavaScript
Сделай видео про "крестики и нолики".
Могу скинуть файл через Гугл диск
это жызнь давай
@@DanilSolodkov не суди за комментарии ( там их только 2) я его написал года два назад
это жызнь чего?коменту неделя
Как только выйдет западный ролик с такой тематикой - он сделает
*А какая разница между var, let, const?*
const - неизменяемая переменная(константа)
var - старый способ создания переменной
let - новый способ создания переменной, с некоторыми незначительными преимуществами перед var
@@intbyte спасибо 🙂
@@intbyte если создать let переменную в функции то она будет только в её пределах, если не ошибаюсь.
Почему змейка не появляется?
Привет, а где ссылка на игру ?
если тебе лень делать то можешь взять мой проект: yadi.sk/d/2OhBTWxCun5hbA
Как сделать скорость змейки меньше?
let game = setInterval(drawGame, 100); поменяй скорость обновления на 250 мсек, например.
29:43 Переписала 12 раз -- хвост не убирается, snake.pop() не работает:
Snake Game
body{
background: linear-gradient(rgba(0, 0, 0, 0.4), transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 1px);
background-size: 32px 32px;
}
canvas{
display: block;
width: 608px;
height: 608px;
border: 1px solid black;
margin: 32px 23px;
}
const cvs = document.getElementById("snake");
const ctx = cvs.getContext("2d");
const box = 32;
ctx.fillStyle = 'black';
ctx.fillRect(0, 94, 608, 1);
let snake = [];
snake[0] = {x : 9 * box, y : 10 * box };
let food = {
x : Math.floor(Math.random() * 17 + 1 ) * box,
y : Math.floor(Math.random() * 15 + 3 ) * box
};
let score = 0;
let dir;
document.addEventListener('keydown', direction);
function direction(event){
if(event.keyCode == 37 && dir != 'right') {dir = 'left'; }
if(event.keyCode == 38 && dir != 'down') {dir = 'up'; }
if(event.keyCode == 39 && dir != 'left') {dir = 'right'; }
if(event.keyCode == 40 && dir != 'up') {dir = 'down'; }
}
function drawGame(){
for(let i = 0; i < snake.length; i++){
ctx.fillStyle = 'green';
ctx.fillRect(snake[i].x, snake[i].y, box, box);
}
ctx.fillStyle = 'red';
ctx.fillRect(food.x, food.y, box, box);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if(dir == 'left') snakeX -= box;
if(dir == 'up') snakeY -= box;
if(dir == 'right') snakeX += box;
if(dir == 'down') snakeY += box;
let newHead = {
x : snakeX,
y : snakeY
};
snake.unshift(newHead);
snake.pop();
}
let game = setInterval(drawGame, 1000);
Можно на бесплатный github pages выгрузить
Спасибо
Но дай пж инфу как сделать управление для мобильных гаджетов
Добавь свои кнопки в html и синхронизируй с game.js
25:14