Всем привет, сегодня мы будем снова решать задачи по JavaScript от ИИ. Сегодня мы будем исправлять баги в проекте.
Много говорить не буду, начинаем.
Генерируем задачу
В прошлый раз мы написали вот такой промпт
Гигачат выдал нам список из 10 задач
А потом я написал ему вот такой промпт
На этот раз мы не будем писать новый запрос ИИ, а просто зайдём в старый чат и возьмём задачку отсюда. Почему-то в каждой новой статье я создавал новый чат.
Давайте на этот раз выберем задачу №9, игру "Змейка".
Только нужно дополнить наши предыдущие промпты и дописать какие-то дополнения от себя.
В прошлый раз Гигачат сгенерировал нам мало багов, из 6 багов по JS он сделал только 2 бага по JS, и около 2 багов по CSS.
Если что, проблема не совсем в Гигачате. В целом для ИИ это сложная задача, сгенерировать код с конкретными багами. Происходит это потому что ИИ обучают писать код без багов, делать противоположное действие он не умеет.
Я проверял более развитый и популярный DeepSeek, даже он ошибается в создании задач на исправление багов. В этом плане он работает, как Гигачат, я даже видел, как DeepSeek справлялся хуже Гигачата. Но пока я их тестирую, я хочу более подробно узнать, кто на что способен.
Давайте пробовать генерировать задачу.
Наверное, я теперь всегда буду решать такие задачи только в одном чате. Удобно, он же запоминает мои инструкции.
У Гигачата хорошо получается говорить и оформлять)) А когда код для задачи сделать, могут быть трудности. Но на самом деле Гигачат меня радует, я много раз слышал, как о нём плохо отзывались, но в действительности он намного умнее, чем считают другие.
Как мало кода... Ааа, здесь канвас, теперь всё ясно.
Это код для тех, кому интересно. Если хотите, можете просто пролистать.
Хмм... Интересно...
Ого, змейка, работающая на canvas.
Если что, canvas это элемент, в котором можно проводить отрисовку изображений через JS код.
Когда-то я учился работать с canvas, но большинство информации забыл, к сожалению... Вот поэтому изученную информацию постоянно надо закреплять... 🤨
Когда игра начинается, змейка уезжает вправо и убегает за пределы экрана
Да что-то змейка не умирает в начале игры.
А змейка не должна проходить сквозь стены, появляясь с другой стороны? К сожалению, она у меня вообще убежала...
Моя змейка вообще не реагирует на нажатие стрелок. Вот так вот, нет одних багов, зато есть другие баги. Почему-то для ИИ это тяжёлая задача сгенерировать код с конкретными ошибками. И у Алисы AI, и у DeepSeek с этим проблемы. DeepSeek вроде бы продвинутая нейронка, а те же трудности.
Давайте напишем ИИ, чтобы он исправился.
Так, он мне пишет, что эти баги и были заложены в код...
Не понял. Змейка же должна умирать, что значит, все эти баги присутствуют в коде?
Он исправил список багов. По сути, баги есть, только они проявляются в других вещах 😀. Ладно, давайте начнём решать
Начинаем решать
Для начала исправим самый мешающий баг, а именно неработающие стрелки. Без работающего управления, мы не сможем нормально тестировать змейку.
Смотрим код. У нас в переменную "canvas" записывается канвас, в переменную "ctx" записывается элемент, для работы с канвасом, а чуть ниже у нас имеется массив с координатами частей змейки.
Ну и какое-то смещение dx, dy. Думаю, может пригодиться, где-нибудь.
Наверное, чтобы перемещаться, нужно как-то менять этот массив. Давайте поищем в коде все "snake"
Функция "update()" должна обновлять, исходя из своего названия.
Так, получается, код работает так: он просто добавляет змее новую голову и убирает клетку из хвоста. А если змейка что-то съела, то он просто прибавляет ей голову, не убирая хвост.
А голова добавляется по координатам головы, но к ним прибавляется смещение "dx" и "dy".
Могу предположить, что смещение "dx" и "dy" задаются при нажатии на стрелки. Теперь поищем в коде "dx"
Стоп, а это ещё что? Зачем нужен "inputDirection" и что за ограничения для нажатия кнопок?
Наш "dx" в начале равен 1.
Если мы нажимаем стрелку вправо, нас пропускает по условию, и "inputDirection" устанавливается в "{x: 1, y: 0}", при этом "dx" не устанавливается.
"dx" устанавливается только в начале, и больше нигде не меняется в коде. Надо его поменять в этих условиях.
Чтооо????
Чтоооо????? 😨😨😨
Змейка ползёт по диагонали... Похоже, при изменении "dx" нужно обнулять "dy".
Только теперь у нас какая-то инверсия. Нажимаешь вверх, ползёт вниз.
По сути, я сделал всё по логике кода, если "dx" не -1, тогда он им станет. Инверсия вроде не моя ошибка.
Давайте ка это исправим.
Да, теперь он поворачивает туда, куда я скажу
Вот эта задача от Гигачата довольно интересная, намного интереснее предыдущих. Я рад 😃.
Но в коде я заметил несколько багов (заложенных по задаче). Когда змейка ползёт вверх, а потом резко нажать вниз, она под собой проползает, как-то выкручивается, немножко сжимается, а потом разжимается и ползёт вниз. Она не должна полсти в противоположное направление под собой.
На скриншоте запечатлить не могу, но вот кадр. Змейка как какой-то лизун. Эх, помню, в 2010-ых годах продавались всякие лизуны 😀. Они прыгали и меняли форму, как эта змейка при резком повороте сверху вниз.
Я понял, я неправильно сделал здесь. Возможно и инверсии никакой не было, я почему-то подумал, что нельзя дважды нажимать на одну и ту же стрелку, поэтому проверка. На самом деле нельзя нажимать на противоположные стрелки... Вот блин... Нужно поменять минусы у всех условий с "dx" и "dy".
Вот. Создали баг и героически его исправили 😃. Теперь нельзя ползти вверх, а потом сразу вниз.
Так, баг №1 мы исправили
А что насчёт фруктов?
Эээ, ты что??? Какой 10, во отожрался то ааа!!!
На всякий случай уточню.
Нет, так и должно быть.
Ишь какой, как отъелся 😀.
Я не понял третий баг. Вроде бы всё присваивает.
Снова уточню
Так, теперь он пытается выкрутиться и изменить название бага. Стоит признать, он немножко поумнел с нашей последней встречи 😀. Только вот и этого бага нет, счётчик работает.
Я просто на кнопки дизлайка нажал, там появляется окно для связи с разработчиками. Они похоже в прошлый раз его быстренько пофиксили и сделали хитрее.
Я попросил ИИ перегенерировать баг и дать код отдельной функции, он предлагает такой баг. Просто убрать строку кода.
Ну а если подумать и посмотреть с другой стороны, а как тут придумать что-то более интересное?
Я попросил его сделать баг по хитрее
Теперь он добавил лишнюю строчку. Нет, это баг не интересен.
А вот интересно, как можно придумать интересный баг с нулём? Смогу ли я такое сделать? Это не просто.
Ладно, ничего страшного. У других ИИ тоже ничего не получается с генерацией подобной задачи, и у них тоже часть багов отсутствует 😀.
Смотрим дальше
Змейка действительно проходит сквозь стены, надо это исправить.
В функции "update()" есть функция "checkCollision()" (проверка столкновений), возможно что-то есть здесь.
Понял, он только с собой проверяет столкновение
Сталкивается он сам с собой отлично. Думаю, этот механизм можно использовать и для столкновения со стеной.
Знать бы только где проходит эта граница, на каких координатах.
Допустим, у нас написано, что размер ячейки равен 20.
Наш канвас размера 400 на 400 пикселей. Получается 20 на 20 клеток.
Здесь цикл проходится по каждой из всех клеток змеи для проверки на столкновение.
Для проверки на столкновение со стеной, нам нужна только одна клетка - голова. Она в массиве всегда первая.
Я попробовал написать так, но это не работает. А что вообще записано в этих x, y?
Нормальные значения, так в чём же дело?
Я понял, наша змея на старте имеет длину 3, а у нас цикл начинается с 4. Да и вообще, зачем его начинать с 4? Получается, не все клетки проверятся на столкновение.
Когда i = 0 ставишь, змейка умирает на старте. Голова это i=0, получается, она сама с собой сталкивается.
Вот
И сталкивается с границей по x нормально
Только вот змейка выходит за неё, а также текст сообщения неправильный.
И вообще, это сообщение нужно вынести из цикла, так как для проверки на столкновения с границами не нужно проверять все клетки, только голову.
Хорошо, но теперь змейка уезжает ещё дальше. Наверное, стоило оставить >= 20. Думаю, если поставить >= 19, змейка не доходя до границы разобьётся.
Только почему-то после нажатия на "Ок" происходит ещё баг, и змейка ползёт дальше. Получается, бесконечный вызов окна.
Я понял, окно обновляется не сразу, нужна секунда, из за этого какой-то баг возникает, и змейка пытается какое-то время убежать за границу, а модальное окно вызывается очень много раз.
Сделаю так. Эта переменная сделает так, чтобы остановка игры и модальное окно после столкновения вызвались 1 раз.
Теперь всё работает хорошо.
Посмотрим, что с едой.
Еда генерируется при помощи функции "getRandomFoodPosition()", после того, как её съедят.
Это делается здесь
Пока функция onShake (на змее) выводит true, цикл генерирует позицию для новой еды. Только вот что это за "onSnake()" такой?
Что-то сложное и непонятное.
В "snake.some" перебираются элементы массива, функция "some()" выводит true, если хотя бы один элемент массива даст true.
В функции 113 выводится функция, принимающая элемент и позицию.
Только вот в другой функции элемент и позиция превращаются в "pos1.x" и "pos2.x" каким-то образом... Это странно...
Я хочу проверить, что будет, если мы сделаем гигантскую змею, будет ли еда генерироваться на ней?
Какой огромный
Не знаю, как работает тот странный код, а я на змее играю довольно долго
Я наиграл 410 очков, но еда так и не сгенерировалась в змее. Получается, бага нет.
Что значит "змея растёт слишком быстро" и "игра идёт с максимальной скоростью". Если игра идёт быстро, не связано ли это с быстрым ростом змеи?
Не правда, змея не растёт, когда двигается без еды.
Да и этот баг работает
Получается, из 6 багов ИИ сделал только 2?
Получается, из 6 багов мы можем исправить только 2.
Подведём итоги
Не смотря на то, что багов получилось 2, а не 6, сегодняшняя задача мне понравилось. Это самое интересное, что генерировал для меня Гигачат в статьях моего блога.
Мы сегодня не только исправили 2 бага, но и покапались в коде, протестировали его, разобрались и увидели всякие необычные моменты 😀
В целом для ИИ подобного рода задачи сложны. Обычно ИИ обучают писать рабочий код, а не намеренно вставлять в него ошибки. Даже у DeepSeek с таким проблемы. Делать контент по таким задачам, используя Гигачат и DeepSeek, у меня получается одинаково, в этом направлении они отличаются друг от друга не сильно.
Было классно, но хотелось бы, чтобы багов и тем для размышления было побольше.
