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