Хороший урок, есть чуток замечаний: 1) Код загроможден переменной bох, надо оставит её только для отрисовки в пикселах, а все сравнения и расчеты по координатам вести в количестве самих ячеек, а не в пикселах; 2) Есть объект food, тогда и картинку еды перенести надо в этот объект 3) Есть объект snake, тогда и направление dir перенести в этот объект 4) Есть голова змеи head, snakeX и snakeY - тогда их тоже вложить в объект snake P.S. По коду "размазаны" переменные, которые через 2 недели не вспомнишь что они делают - их надо логически вкладывать в объекты
@@timagoldm Внимательно перечитай мой пункт 1. Переменная box (а еще лучше сделать её const) нужна только внутри функции отрисовки drawGame(). Вот и всё.
Привет, в canvas остаются следы предыдущего местоположения змейки и кажется что ты рисуешь ею на поле. Такой же баг повторяется и с score. Цифра не обновляется а накладывается на предыдущее т.е. на 0 рисуется единичка и тд. Решила проблему добавив ctx.clearRect(0, 0, 609, 609); в самое начало функции drawGame(). Может кому понадобится.
В процессе создания столкнулся с такой-же проблемой. Оказалось, что я написал pop, вместо pop(). Поэтому элементы массива не удалялись, а оставались на месте, что и кажется, как закрашивание
Не хочу выпендриваться, я новичок в этом деле, но я бы создал функцию, которая каждый рандомно генерирует еду, типа function createfood() {тут прописать рандомное появление еды} А переменную food просто объявить, затем вызвать эту функцию и каждый раз вызывать функция, когда змея проглатывает пищу) Спасибо за урок)
Подскажите насчет ошибки. При выполнении интервала на 11:11 в консоли выдает "Uncaught TypeError: Cannot read property 'drawImage' of null at drawGame"
что делать, ошибка game.js:48 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. at drawGame (
А почему Гошу критикуют на других каналах? Хорошо он рассказывает, всё понятно. Конечно для понимания база какая-то нужна, без неё никуда. А так всё норм, всё подробно, чего писать, куда вставлять, почему такое действие.
@@yingwai8668 ты все food заменил на foodImg? проверь правильность написания кода и указаных путей к картинкам. У меня файлы расположены в таких же папках как у него, но чобы получить картинку я прописал такой путь: foodImg.src = "../img/food.png"; после чего все заработало
Супер🤝🏆слушай топчик еще бы game over по соли экрана это реально не подскажешь как🤔😆 Короч я решил заняться плотно веб разработкой и тут столкнулся с js пока не платно занимаюсь ! Есть советик !? С чего лучше начинать html и css знаю не так хорошо но знаю но говорят в наше время js всем глава без него ни куда ! Что скажешь!?
Всё прекрасно! Получилось! Но есть один вопрос - зачем исползовать переменную let, если можно использовать переменную var? тоже и с const?(Я не причисляю твои дествия к ошибке, а лишь спрашиваю)
@@user-ol7fc8ls7e в области видимости дело. если сначала вызвать переменную заданную при помощи var а потом определить ее,то оно даст это сделать и ты получишь undefined. С let такая шняга работать не будет. тебе покажет ошибку. Как то так. Поэтому желательно использовать let. А если уверен что изменять переменную не будешь то делай const. Я обычно const для стрелочных функций использую.
Пытался разобраться как работает змейка, но даже я полный новичок вижу что код написан как попало. Куча лишних переменных, объектов непонятно для чего они нужны... Вот в чем проблема например сделать объект и с направлениями змейки и позицией? не понятно...
У меня рисуется ЕДА , СЧЁТ, ЗМЕЙКА. Еда перемещается. Но змейка не двигается. консоль всё время выдаёт ошибки, хотя всё сделано по Гоше. Кажется, перепробовал всё. Выдаваемые консолью ошибки, на первый взгляд, выглядят необоснованными. Что делать не знаю.
Очень долго делал, но всё таки переписал эту же игру на Python в Tk+Canvas) Проблема была в зацикливании движения змейки. root.after(150, func) помогло.
Привет, хочу спросить у тебя если не сложно) я хочу научиться фронтент разработке и немного бэкенда, для этого нужен ПК или ноутбук, хотел бы узнать что из этого лучше ? И на сколько мощными они должны быть?
@@kain5731 если хочешь учиться то тебе хватит самого обычного пк или ноутбука что удобнее тебе будет, мощностью не имеет значения, даже на самом простом пк можно открыть редактор кода и видео по которым будешь учиться
В строке let game = SetInterval ( drawGame, 100 ); надо увеличить интервал с 100, например до 200 (т.е. заменить 100 на 200). Если надо еще медленнее - то ставим 300 вместо 100
Привет Георгий я писал игру я смотрел все твои уроки по Js и я решил посмотреть это видео в коде у меня показывает что все правильно но когда я зашел в консоль у меня выдало ошибку почему?
Приветствую, насколько сильно нужно будет допилить игру, чтобы была возможность у пользователя сохранить фи и почту, чтобы сохранить/вывести таблицу с результатами?
и ещё такой момент, если змейка внезапно остановилась при развороте, но сама ещё прямая, значит она развернулась не изменив координаты и сама себя съела
@Mad Doctor Это нужно изменить в другом месте, не там где коды указываются, а if(dir == "left") snake -= box; ... Тут проверь, все ли минусы и плюсы правильно написал, и порядок (left, right, up, down)
Белый экран а в консоли пишет : 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
Нашел 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 особо не было, но способ рабочий.
const - неизменяемая переменная(константа) var - старый способ создания переменной let - новый способ создания переменной, с некоторыми незначительными преимуществами перед var
for (let i = 0; i < snake.length; i++) { if (i === 0) { ctx.drawImage(sneakHead, snake[i].x, snake[i].y, box, box); } else { ctx.fillStyle = 'orange'; ctx.fillRect(snake[i].x, snake[i].y, box, box); } } //перед этим нужно не забыть положить в исходники картинку и объявить переменную с ней
@@eVoEvo111 for (let i = 0; i < snake.length; i++) { if (i === 0) { ctx.drawImage(sneakHead, snake[i].x, snake[i].y, box, box); } else { ctx.drawImage(sneakHead2, snake[i].x, snake[i].y, box, box); } } вот весь цикс змеи, если хочешь чтоб голова и тело были разными картинками. где нибудь возле объявления переменной снейкхед, объяви еще и переменную снейкхед2 и кинь в дистрибутив картинку с названием хвоста. Вот переменные let foodImg = new Image(); foodImg.src = "img/food.png"; let sneakHead = new Image(); sneakHead.src = "img/sneakHead.png"; //бошка// let sneakHead2 = new Image(); sneakHead2.src = "img/sneakHead2.png" //хвост//
Гоша, я твой старый подписчик. У меня есть очень интересный вопрос. Он немного не по теме программирования, а больше по теме 3D и создания игр. Но я не знаю кому ещё задать. Если прочитал это напиши хоть . и я распишу вопрос. Надеюсь прочитаешь.
@@ЖеняПетровский-р6т как бы вопрос не по моделям. Я видел на ютубе англ видео о дешёвой лицевой анимации. Люди обмазывали лицо зелёнкой и делали так лицевую анимацию. Могу скинуть. Очень интересная тема, и на рутубе никто не делал. Автор делал в блендера. (но я люблю синьку и подобных видео не было).
@@ЖеняПетровский-р6т ты очень плохо читал. Это бесплатно, в этом и прикол. Они как то настраивают и делают анимацию. Случайно на ролик наткнулся, оказалось по подобному запросу есть ещё. И там реал похоже на зеленку.) А студийная анимация стоит десятки тысяч долларов.
Если вы хотите что-бы когда голова врезалась в стенку голова не пролетала ещё клетку, то просто вставте этот код после кода с созданием переменной newHead!
У меня змейка движется, удлиняясь с каждым квадратиком. Не могу сделать, чтобы змейка двигалась одним квадратиком. Кажется, всё делаю по Гоше. Помогите, кто может!
Полчаса искал ошибку... оказалось в строке: const ctx = canvas.getContext("2d"); Написал 2d написал с большой буквой, то есть 2D. А в консоль писало: "Uncaught TypeError: Cannot read property 'drawImage' of null at drawGame" 😁
for(let i = 0; i < snake.length; i++) { ctx.drawImage(snakeh, snake[0].x-16, snake[0].y-16) ; if (i!= 0) { ctx.drawImage(snakeb, snake[i].x-8, snake[i].y-8);} } чтобы змейка была из ваших картинок snakeh - голова snakeb - тело
привет из 2020! Если кто нибудь это читает, помогите! моя змейка вырастать никак не хочет, Всё в порядке не в редакторе не в консоле ошибок нету, счёт вырастает с каждым поеданием еды, последняя в свою очередь пропадает, когда змейка ест. Не понимаю, почему это так. Сталкивались с подобной проблемой? Что может быть причиной?..заранее спасибо \_( o~o )_/
