Змейка на JavaScript

Разработка классической змейки на JavaScript без библиотек.
------------------------------
Таймкоды:
00:00 - Вступление
00:29 - Проектирование
01:21 - HTML и CSS
02:48 - JavaScript
07:43 - Результат
07:49 - Баги
------------------------------
github(исходники) - github.com/EpicLegend/snake2d
figma(дизайн) - www.figma.com/file/ySZfOLGBjU...

[@aktotuttttt]

Прикинь, 6 месяцев откладывал, но теперь добрался и расписываю с супер развернутыми комментариями все! Спасибо огромное, очень очень круто сделал! Я снова в восторге! На ООП еще бы заценить!

[@epicnull-it2044]

ООП версия игры есть.=) Можешь на канале поискать или через подсказки в видео открыть. Рад что пригодилось видео!

[@_GreenSnake_]

Спасибо за Ваш труд

[@Space_One68]

Продолжай ветом темпе... Будешь в шеколадке!

[@pickman3530]

Я искал подобный контент ,по интересующему меня языку . От меня подписка и лайки )

[@epicnull-it2044]

Приятно.)

[@dlazder3937]

Отличная реализация! разобрался и написал сам без подсказок. самое сложное для моего понимания было создание хвоста змейки, вначале когда сам попробовал написать ничего не вышло, а оказывается это пишется в менее чем 10 строчек. с остальным проблем не возникло, так как уже делал игрульки на canvas

[@epicnull-it2044]

Есть разные способы реализовать хвост. У меня так же были с ним проблемы пару лет назад.)

[@_ntds]

Очень крутое видео в купе с приятным голосом и чётко поставленной речью автора однозначно заслуживает больше внимания к каналу, нежели 800 сабов. Сейчас заинтересовался в создании фреймоврка для упрощения создания игрушек на ЖС'е и решил начать со змейки. Это - лучше из ранее увиденных мною видео. Респект и удачи в развитии!

[@epicnull-it2044]

Спасибо. Так таких штук полно, которые облегчают разработку. pixi, phaser, cocos creator и это только те, что знаю я. Уверен их куда больше.

[@_ntds]

@@epicnull-it2044 в последнее время у меня появился азарт именно к написанию своих решений) (к изобретению велосипеда то есть, кхм)

[@epicnull-it2044]

@@_ntds ммм... Иногда сам занимаюсь таким извращением. Удачи.)

[@_ntds]

@@epicnull-it2044 взаимно)

[@KostiaBazrov]

Красава, 🔥

[@raman4346]

Красавчик :)

[@kolya69rus]

Отлично получилось. Мне понравилось)

[@epicnull-it2044]

Спасибо.)

[@WEBSTART-LIVE]

круто 👍🏻

[@user-rq6sx2xl7m]

Реализация огонь и однозначно лайк! Спасибо, что открыт доступ к самой змейке, по видео очень сложно повторять, слишком быстро! Только жаль не для новичков, очень мало обьяснений конструкций, мало что понятно

[@epicnull-it2044]

Спасибо. Тут сложного ничего нет. Нужно знать переменные, циклы, структуры данных(массив и объект) ну и самое сложное это понимания игрового цикла. Всё это основы программирования, кроме игрового цикла. =) Постараюсь сделать что-то более простое, просто мне кажется, что это и так просто.

[@dimeliora]

Очень круто! Два момента: Было бы, наверное, лучше просто игнорировать попытки смены направления движения на противоположное (если ползем вверх, то можно только повернуть вправо или влево), а не помирать от этого) Ссылка не на тот репозиторий)

[@epicnull-it2044]

Ссылку заменил. Спасибо.

[@edyard9134]

Можно изменить скорость движения змейки?

[@a-sher]

Отличный контент. Подписался, так как не нашел ничего лучше на эту тему. НО! Можно более адекватную скорость напиания кода сделать? Приходится замедлять и останавливать очень часто. И так на многих видео. И я не понимаю зачем. Хорошо, что исходники есть, а то даже бывает не успеваешь увидеть куда, что написано было.

[@epicnull-it2044]

Спасибо. Про скорость многие говорили. Стараюсь исправить это.)

[@a-sher]

@@epicnull-it2044 Отлично ))

[@hlsshhh1175]

Лайк!) А ускорение змейки по ходу игры ?🤔

[@epicnull-it2044]

Как-то и забыл про такую возможность... В данной реализации это можно сделать за счет step и maxStep. Надо будет в версию на ООП добавить ускорение. Спасибо.

[@mixgametv2373]

Друзя в CSS я пишу индефикатор id но ето пишет как не индефикатор id а просто id кто изучил css понимает мой вопрос кто может помагать?

[@dilodon]

Лучшая змейка, что я видел😳

[@epicnull-it2044]

Рад. Очень рад.-_-

[@denisk.1213]

посмотрел минуту...смысл мне понятен, думаю по приколу сделать))) основы JS знаю)

[@epicnull-it2044]

Удачи в разработке!

[@logius84]

а танчики с 8 битной приставки, так можешь? С рандомной картой?))

[@epicnull-it2044]

Интересно. Вызов принят!)

[@sergiystramko8754]

Как довить в змейку лабиринты, или здеать рамку?

[@epicnull-it2044]

есть два варианта. 1) сделать ограничение в коде змейки. Пример, если змейка пришла к таким координатам, то не пускать ее дальше. 2)реализовать коллизию в игре. После этого создать карту(через обычный двумерный массив). Рисовать этот массив, он и будет картой на которой может быть все что угодно. Этот вариант сложней, но так раньше делали 2д карты к играм(80-90-е)

[@lazaragon7536]

Как программа называется ?

[@epicnull-it2044]

Какая?) на каком времени? Использовал figma для дизайна Конвертер выбрал самый первый в поиске Для кода VS code вроде всё.

[@dannstein6104]

Бросил предложение на изменения. Добавил управления стрелочками

[@epicnull-it2044]

pull requests нет в проекте.

[@forcecodee]

а когда на ооп ?

[@epicnull-it2044]

Скоро.) Я пытаюсь разобраться с cocos2d-x на данный момент

[@epicnull-it2044]

Добавил ООП версию.-_-

[@4ITTonik]

Я второй раз наступил на те-же грабли, нельзя в css задавать размеры canvas...

[@epicnull-it2044]

Почему? + и - подхода?

[@4ITTonik]

@@epicnull-it2044 Цитирую с MDN: "Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией. Примечание: Если вид вашего изображения кажется вам искажённым, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах , а не с помощью CSS."

[@4ITTonik]

@@epicnull-it2044 В случае с игрой, когда у меня были заданы размеры в css, при рисовании клетки 16 на 16 получался прямоугольник с размытыми краями.

[@konstantinshmarin2676]

Доброго дня! 1. Цвет ягоды не установить (ниже приложу код). 2. Если я резко меняю направление на противоположное, игра начинается заново =(((. 3. Запускать видео, при написание кода, чуть медленнее. let scoreBlock; let score = 0; const config = { step: 0, maxStep: 6, sizeCell: 16, sizeBerry: 16 / 4 }; const snake = { x: 160, y: 160, dx: config.sizeCell, dy: 0, tails: [], maxTails: 3 }; let berry = { x: 0, y: 0 }; let canvas = document.querySelector("#game-canvas"); let context = canvas.getContext("2d"); scoreBlock = document.querySelector(".game-score .score-count"); drawScore(); function gameLoop() { requestAnimationFrame( gameLoop ); if ( ++config.step < config.maxStep) { return; } config.step = 0; context.clearRect(0, 0, canvas.width, canvas.height); drawBerry(); drawSnake(); }; requestAnimationFrame( gameLoop ); function drawSnake() { snake.x += snake.dx; snake.y += snake.dy; collisionBorder(); //todo border snake.tails.unshift( { x: snake.x, y: snake.y } ); if ( snake.tails.length > snake.maxTails ) { snake.tails.pop(); }; snake.tails.forEach( function(el, index){ if (index == 0) { context.fillStyle = "#4ad218"; } else { context.fillStyle = "#2f860e"; } context.fillRect( el.x, el.y, config.sizeCell, config.sizeCell ); if ( el.x === berry.x && el.y === berry.y ) { snake.maxTails++; incScore(); randomPositionBerry(); } for (let i = index + 1; i < snake.tails.length; i++) { if (el.x == snake.tails[i].x && el.y == snake.tails[i].y) { refreshGame(); } } }) }; function collisionBorder() { if (snake.x < 0) { snake.x = canvas.width - config.sizeCell; } else if (snake.x >= canvas.width) { snake.x = 0; } if (snake.y < 0) { snake.y = canvas.height - config.sizeCell; } else if (snake.y >= canvas.height) { snake.y = 0; } }; function refreshGame() { score = 0; drawScore(); snake.x = 160; snake.y = 160; snake.tails = []; snake.maxTails = 3; snake.dx = config.sizeCell; snake.dy = 0; randomPositionBerry(); }; function drawBerry() { context.beginPath(); context.fillstyle = "#e51d5c"; context.arc( berry.x + (config.sizeCell / 2 ), berry.y + (config.sizeCell / 2 ), config.sizeBerry, 0, 2 * Math.PI ); context.fill(); }; function randomPositionBerry() { berry.x = getRandomInt( 0, canvas.width / config.sizeCell ) * config.sizeCell; berry.y = getRandomInt( 0, canvas.height / config.sizeCell ) * config.sizeCell; }; function incScore() { score++; drawScore(); }; function drawScore() { scoreBlock.innerHTML = score; }; function getRandomInt(min, max) { return Math.floor( Math.random() * (max - min) + min ); } document.addEventListener("keydown", function (e) { if (e.code == "KeyW" ) { snake.dy = -config.sizeCell; snake.dx = 0; } else if (e.code == "KeyA") { snake.dx = -config.sizeCell; snake.dy = 0; } else if (e.code == "KeyS") { snake.dy = config.sizeCell; snake.dx = 0; } else if (e.code == "KeyD") { snake.dx = config.sizeCell; snake.dy = 0; } });

[@epicnull-it2044]

Доброго. Вот здесь есть код(из видео). Он работает 100%. Сравни. У меня сейчас нет времени разбираться, может чуть позже гляну. github.com/EpicLegend/snake2d/blob/main/scripts/main.js

[@konstantinshmarin2676]

Я же сравнил до этого...

[@epicnull-it2044]

Проверил. Скопировал твой код. Все работает как и у меня. 1) Цвет меняется. Цвет зеленый 2) А вот здесь... ну ты прав, но так и задумано. Ты меняешь направления на противоположно и змейка наезжает на саму себя(кушает). Это условие прописано в drawSnake.

[@moon_light_u]

Кнопки лучше сделать так, что бы змейка не врезалась сама в себя в обратном направлении document.addEventListener("keydown", function (e) { if ( e.code == "KeyW" && snake.dy == 0) { snake.dy = -config.sizeCell; snake.dx = 0; } else if ( e.code == "KeyA" && snake.dx == 0) { snake.dx = -config.sizeCell; snake.dy = 0; } else if ( e.code == "KeyS" && snake.dy == 0 ) { snake.dy = config.sizeCell; snake.dx = 0; } else if ( e.code == "KeyD" && snake.dx == 0) { snake.dx = config.sizeCell; snake.dy = 0; } });

[@epicnull-it2044]

Код а гитхабе. Можешь внести правки. PR приму если он работает)

[@a-sher]

медленнее надо мотать видео

[@pika4u380]

Дизайн классный, но коллизия очень кривая. Одна строчка на направление, вот сколько это могло бы занимать

[@epicnull-it2044]

Сделай pullrequest со своей коллизией. Я не против)

[@js_games_for_dummies]

Слишком сложно. Сначала надо чтоб змейка просто двигалась а потом уже всё остальное.

[@epicnull-it2044]

Всегда можно посмотреть исходный код на гитхабе. Ссылка есть в описание)