Змейка на JavaScript

Разработка классической змейки на JavaScript без библиотек.

------------------------------
Таймкоды:

00:00 - Вступление
00:29 - Проектирование
01:21 - HTML и CSS
02:48 - JavaScript
07:43 - Результат
07:49 - Баги
------------------------------

[aktotuttttt]

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

[pickman]

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

[_ntds]

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

[dlazder]

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

[Space_One]

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

[НастяРейс-вц]

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

[dimeliora]

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

[a-sher]

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

[dannstein]

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

[hlsshhh]

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

[konstantinshmarin]

Доброго дня! 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 =
let context = canvas.getContext("2d");
scoreBlock = .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;
}
});

[logius]

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

[edyard]

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

[mixgametv]

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

[sergiystramko]

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

[denisk.]

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

[ITTonik]

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

[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;
}
});

[pikau]

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

[js_games_for_dummies]

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