Как сделать игру 2048 на React

Игру 2048 знают многие и многие в неё играли. А давайте теперь попробуем реализовать её самостоятельно с автором этого туториала.

В своей версии он использовал хуки библиотеки React, её Context API, а также TypeScript и LESS. Помимо туториала в статье вы найдёте ссылки на игру, её код и демо анимацией:

https://habr.com/ru/company/skillfactory/blog/588356/

#react #gamedev

Menja — духовный наследник Fruit Ninja на JavaScript

Предлагаем вашему вниманию игру Menja, которая по сути является альтернативной версией Fruit Ninja, но с более геометрическим дизайном. Здесь вам необходимо разрубать пролетающие блоки.

Игра реализовано на JavaScript без сторонних фреймворков. Посмотреть на код и поиграть можно здесь:

https://codepen.io/MillerTime/details/BexBbE

#gamedev #codepen #javascript

Разработчик сделал ремейк знаменитой игры ZUMA, используя только HTML, CSS и TypeScript

Не обошлось, конечно, без небольших хитростей в виде препроцессора SCSS, но при этом игра полностью реализована на фронтенде и даже код доступен.

Посмотрите сами:

https://codepen.io/lintingyou/pen/RwMLqRZ

#codepen #gamedev

Паззлы на чистом CSS

Обычно, для какого-то специфического взаимодействия с элементами без JavaScript применяются чекбоксы, которые с помощью некоторых допиливаний помогают наладить логику. Но в этой статье автор предлагает пойти дальше и создать игру без использования чекбоксов.

Посмотрите, что у него в итоге получилось и каким образом:

https://css-tricks.com/how-i-made-a-pure-css-puzzle-game/

#css #gamedev

​Тетрис на JavaScript

Что ж, пора создать ещё один пет-проект. На этот раз это будет классический тетрис, в который можно поиграть прямо из браузера.

Как вы можете его сделать? Ну вы чего, вот же инструкция:

https://thecode.media/tetris/

#gamedev #петпроект

Новогодняя игра «Помощник Санты»

Если салаты уже нарезаны, шампанское охлаждается и вам пока что нечем заняться, то поиграть в игру «Помощник Санты». Ваша задача максимально проста — добраться как можно дальше переходя с одной печной трубы на другую.

Для особо любопытных там также доступен код игры, который вы можете изучить:

https://codepen.io/housamz/pen/KKgmMLm

#codepen #gamedev

Feed the World

Милый codepen-проект, предлагающий в буквальном смысле накормить Мир, перетягивая еду прямо в рот.

Из интересного здесь стоит отметить отслеживание курсора, наличие звукового сопровождения, а также различные эффекты при кормлении разными предметами.

Попробовать можно тут:

https://tprg.ru/Kwkq

#codepen #gamedev

Monster Mash

Нечасто на codepen попадаются интересные проекты не только с точки зрения кода, но и самой идеи. Игра Monster Dash как раз является одним из таких проектов. Это аркада, которая предлагает несколько уровней с разными типами монстров и ваша задача отстреливать их.

Отрисовка здесь происходит с помощью Canvas, в чём вы можете убедиться, изучив код, когда вам надоест играть.

https://codepen.io/grantjenkins/pen/xxjQmmo

#codepen #gamedev

​Как создать игру Tetris с помощью Three.js

В этом руководстве вы создадите не просто Tetris, а его 3D-версию. А поможет нам библиотека Three.js, которая идеально справляется с рендерингом 3D-объектов. Подробнее:

https://habr.com/ru/company/ruvds/blog/680666/

#threejs #gamedev

​​Реально ли сделать движок для игры от первого лица за 265 строк Javascript?

В этой статье автор рассказал, как с нуля, быстро и без особо сложной математики написать движок для игры от первого лица с помощью приёма raycasting. Возможно, вы видели примеры такой техники в играх Daggerfall и Duke Nukem 3D.

Вот демка

Вот статья

#gamedev #история #javascript #веб

​Реально ли создать 3D-шутер на React + Three.js?

В современной веб-разработке границы между классическими и веб-приложениями стираются с каждым днём. Сегодня можно создавать не только интерактивные сайты, но и полноценные игры прямо в браузере.

Автор серии статей делает шутер и рассказывает о процессе в формате пошагового гайда. Код проекта и ссылки на статьи на английском: https://github.com/JI0PATA/fps-game

Перевод одной из частей на русском: https://habr.com/ru/articles/774090/

#threejs #react #gamedev

​С помощью пет-проектов можно научиться чему-то и получить удовольствие. А если этот пет-проект — игра, удовольствие удваивается.

Нашли репозиторий с базовыми реализациями нескольких игр: от Doodle Jump до Boomberman и «тетриса». Все на основе HTML и JS. Просто выбираете понравившийся проект, вникаете в его устройство и допиливаете до идеала: https://gist.github.com/straker/b96a4a68bd6d79cf75a833d98a2b654f

#gamedev #петпроект

​Новогодняя игра «Помощник Санты»

Игра — лучший способ потренировать HTML, CSS и JavaScript. Тем более, игра новогодняя, а у проекта полностью открытые исходники.

Сохраните, чтобы не потерять. Будет чем заняться на праздниках: https://codepen.io/housamz/pen/KKgmMLm

#codepen #gamedev

​​16 впечатляющих игр на чистом CSS

Обычно, для специфического взаимодействия с элементами используется JavaScript. Но с каждым годом у HTML и CSS появляются новые возможности, которые отодвигают JavaScript на задний план.

От головоломок до классики — откройте для себя проекты игр, демонстрирующие универсальность CSS без использования JavaScript. Демо и исходники прилагаются: https://www.frontendplanet.com/css-game-examples/

#css #gamedev

​​Пишем змейку на JS

Почти двухчасовой гайд по созданию браузерной змейки в ретро стиле на JS + CSS: https://www.youtube.com/watch?v=uyhzCBEGaBY

#javascript #gamedev

Гайд: создаём полноценную браузерную игру на TypeScript

Делимся 2-часовым гайдом по созданию 2D-платформера на TypeScript: https://www.youtube.com/watch?v=R6WvJOiX99s

#typescript #gamedev

Портируем олдскульную головоломку в веб с использованием LLM и Midjourney для бати

Помните этот старый маджонг с покемонами? Я вот в своё время вдоволь наигрался в неё.

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

#gamedev

RUINSWORD: Многопользовательский шутер с открытым миром для браузера на JS/TS, Three и Vue

Вот по-настоящему амбициозный проект, который на 100% раскрывает возможности современных браузеров. Несмотря на то, что сейчас доступна только бета-версия, мы с вами можем оценить объём проделанной работы и даже поиграть.

Если вам хочется попробовать игру самостоятельно и вы не боитесь багов бета-версии, то кликайте по ссылке. А если вам интересно узнать технические подробности проекта и почитать с какими трудностями столкнулся разработчик, то залетайте в статью.

#gamedev #vue #threejs

Изучаем JavaScript, создавая игру

Погрузитесь в JavaScript, создавая 2D-игру с нуля. Этот бесплатный курс поможет вам освоить основы программирования через практику.

#javascript #gamedev

Old But Gold: создаём полноценную браузерную игру на TypeScript

Делимся 2-часовым гайдом по созданию 2D-платформера на TypeScript: https://www.youtube.com/watch?v=R6WvJOiX99s

#typescript #gamedev