Змейка на JavaScript
HTML-код
- Опубликовано: 24 июл 2024
- Разработка классической змейки на 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...
Прикинь, 6 месяцев откладывал, но теперь добрался и расписываю с супер развернутыми комментариями все! Спасибо огромное, очень очень круто сделал! Я снова в восторге! На ООП еще бы заценить!
ООП версия игры есть.=)
Можешь на канале поискать или через подсказки в видео открыть.
Рад что пригодилось видео!
Я искал подобный контент ,по интересующему меня языку . От меня подписка и лайки )
Приятно.)
Продолжай ветом темпе... Будешь в шеколадке!
Спасибо за Ваш труд
Очень крутое видео в купе с приятным голосом и чётко поставленной речью автора однозначно заслуживает больше внимания к каналу, нежели 800 сабов. Сейчас заинтересовался в создании фреймоврка для упрощения создания игрушек на ЖС'е и решил начать со змейки. Это - лучше из ранее увиденных мною видео. Респект и удачи в развитии!
Спасибо.
Так таких штук полно, которые облегчают разработку.
pixi, phaser, cocos creator и это только те, что знаю я. Уверен их куда больше.
@@epicnull-it2044 в последнее время у меня появился азарт именно к написанию своих решений) (к изобретению велосипеда то есть, кхм)
@@_ntds ммм... Иногда сам занимаюсь таким извращением. Удачи.)
@@epicnull-it2044 взаимно)
Отличная реализация! разобрался и написал сам без подсказок. самое сложное для моего понимания было создание хвоста змейки, вначале когда сам попробовал написать ничего не вышло, а оказывается это пишется в менее чем 10 строчек. с остальным проблем не возникло, так как уже делал игрульки на canvas
Есть разные способы реализовать хвост. У меня так же были с ним проблемы пару лет назад.)
Отлично получилось. Мне понравилось)
Спасибо.)
Красава, 🔥
Красавчик :)
круто 👍🏻
Реализация огонь и однозначно лайк! Спасибо, что открыт доступ к самой змейке, по видео очень сложно повторять, слишком быстро! Только жаль не для новичков, очень мало обьяснений конструкций, мало что понятно
Спасибо.
Тут сложного ничего нет. Нужно знать переменные, циклы, структуры данных(массив и объект) ну и самое сложное это понимания игрового цикла. Всё это основы программирования, кроме игрового цикла. =)
Постараюсь сделать что-то более простое, просто мне кажется, что это и так просто.
Очень круто! Два момента:
Было бы, наверное, лучше просто игнорировать попытки смены направления движения на противоположное (если ползем вверх, то можно только повернуть вправо или влево), а не помирать от этого)
Ссылка не на тот репозиторий)
Ссылку заменил. Спасибо.
Отличный контент.
Подписался, так как не нашел ничего лучше на эту тему.
НО!
Можно более адекватную скорость напиания кода сделать?
Приходится замедлять и останавливать очень часто.
И так на многих видео. И я не понимаю зачем.
Хорошо, что исходники есть, а то даже бывает не успеваешь увидеть куда, что написано было.
Спасибо.
Про скорость многие говорили. Стараюсь исправить это.)
@@epicnull-it2044 Отлично ))
Друзя в CSS я пишу индефикатор id но ето пишет как не индефикатор id а просто id кто изучил css понимает мой вопрос кто может помагать?
Можно изменить скорость движения змейки?
Лайк!) А ускорение змейки по ходу игры ?🤔
Как-то и забыл про такую возможность...
В данной реализации это можно сделать за счет step и maxStep.
Надо будет в версию на ООП добавить ускорение.
Спасибо.
посмотрел минуту...смысл мне понятен, думаю по приколу сделать))) основы JS знаю)
Удачи в разработке!
Лучшая змейка, что я видел😳
Рад. Очень рад.-_-
Бросил предложение на изменения. Добавил управления стрелочками
pull requests нет в проекте.
Как довить в змейку лабиринты, или здеать рамку?
есть два варианта.
1) сделать ограничение в коде змейки. Пример, если змейка пришла к таким координатам, то не пускать ее дальше.
2)реализовать коллизию в игре. После этого создать карту(через обычный двумерный массив). Рисовать этот массив, он и будет картой на которой может быть все что угодно. Этот вариант сложней, но так раньше делали 2д карты к играм(80-90-е)
а танчики с 8 битной приставки, так можешь? С рандомной картой?))
Интересно. Вызов принят!)
Доброго дня! 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;
}
});
Доброго.
Вот здесь есть код(из видео).
Он работает 100%.
Сравни. У меня сейчас нет времени разбираться, может чуть позже гляну.
github.com/EpicLegend/snake2d/blob/main/scripts/main.js
Я же сравнил до этого...
Проверил.
Скопировал твой код.
Все работает как и у меня.
1) Цвет меняется. Цвет зеленый
2) А вот здесь... ну ты прав, но так и задумано. Ты меняешь направления на противоположно и змейка наезжает на саму себя(кушает). Это условие прописано в drawSnake.
Я второй раз наступил на те-же грабли, нельзя в css задавать размеры canvas...
Почему? + и - подхода?
@@epicnull-it2044 Цитирую с MDN: "Вы так же можете выставить размеры произвольно в CSS, но во время рендеринга изображение будет масштабироваться в соответствии с его размером и ориентацией.
Примечание: Если вид вашего изображения кажется вам искажённым, попробуйте указать атрибуты ширины и высоты в явном виде в атрибутах , а не с помощью CSS."
@@epicnull-it2044 В случае с игрой, когда у меня были заданы размеры в css, при рисовании клетки 16 на 16 получался прямоугольник с размытыми краями.
а когда на ооп ?
Скоро.)
Я пытаюсь разобраться с cocos2d-x на данный момент
Добавил ООП версию.-_-
Как программа называется ?
Какая?)
на каком времени?
Использовал figma для дизайна
Конвертер выбрал самый первый в поиске
Для кода VS code
вроде всё.
Кнопки лучше сделать так, что бы змейка не врезалась сама в себя в обратном направлении
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;
}
});
Код а гитхабе. Можешь внести правки. PR приму если он работает)
медленнее надо мотать видео
Дизайн классный, но коллизия очень кривая. Одна строчка на направление, вот сколько это могло бы занимать
Сделай pullrequest со своей коллизией. Я не против)
Слишком сложно. Сначала надо чтоб змейка просто двигалась а потом уже всё остальное.
Всегда можно посмотреть исходный код на гитхабе. Ссылка есть в описание)