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

ИП Диордица Александр

2048 на JavaScript

   #puzzle < display: inline-grid; grid-template-columns: repeat(4, 1fr); padding: 30vw; padding-top: 10px; >input

Вы здесь:
Главная
Web
2048 на JavaScript

Фигуры Лиссажу
Path2D на canvas
Контуры на canvas
Прямоугольники на canvas
Canvas и context
2048 на JavaScript
Mines v2 на JavaScript
Игра flip-flop на JavaScript
Игровое поле на JavaScript
Игра Memory на JsavaScript
Игра Где ест уж на JavaScript
Mines на JavaScript
Игра Быки и коровы на JavaScript
Как установить пароль доступа к папке сайта
Виртуальный хостинг в Apache
SSL сертификат от freessl.org
SSL сертификат от freessl.space
Подсветка кода AVR Ассемблера
Вставить в Joomla видео или код
Цикл for.. in
Лучше чем МЭШ
JavaScript код
JavaScript Объектная модель
Язык JavaScript
Метки в CMS Joomla
Цветная подсветка примеров кода на сайте
Php web-сервер
Python http.server
Node.js http-server
Node.js статический web-сервер
Busybox httpd web-сервер
Установка Node.JS
Joomla всплывающие картинки
Лог файлы сервера Apache2
Установка LAMP сервера на Armbian
Apache установка модуля SSL
Создаём самодельный SSL сертификат
Установка SSL сертификата на сервер Apache 2
SSL сертификат для HTTPS бесплатно
Мой новый WEB server

Author Login
Карта сайта

Курсы javascript

Для первой версии достаточно самых базовых функций игры. Но возник ряд вопросов, которые хочу уточнить, что бы избежать «глупых» ошибок и мучений.

1. Как ограничить элементы по сетке, что бы они не вылазили при ходе.
2. Реализация передвижения всех «квадратов» которые уже есть на поле.

Возможно есть советы из личного опыта?

Последний раз редактировалось falkone, 17.10.2014 в 11:20 .
17.10.2014, 11:56
Регистрация: 19.08.2010
Сообщений: 14,102
Встречный вопрос — как осуществляется тот «ход»?
17.10.2014, 11:57
Регистрация: 19.08.2010
Сообщений: 14,102
Всречный вопросы.
— Как они вообще должны двигаться?
— Какие на то есть «правила»?
17.10.2014, 12:34
Регистрация: 27.09.2014
Сообщений: 42

Есть сетка 4 на 4 квадрата. Движения всегда общее, если игрок делает движение вправо например, все элементы(цифры) которые есть на сетке сдвигаются в право до границы, если в ряду например есть две цифры, при встрече идет проверка если номинал «цифр» одинаковый они просто суммируются ну и естественно с двух клеток стает одна. Если же номинал разный, он просто стают рядом друг к другу в ряду.

Всего есть 4 движения: вверх, вниз, влево, вправо. При этих движениях просто все элементы сдвигаются в соответствующую сторону. При встрече элементов (цифр) идет проверка на равенство номиналов, если равны тогда сумма, нет просто ничего не делают. Ну и при движениях вверх или вниз в рандомном месте пустых ячеек появляется новый квадрат с цифрой «2».

Логика простая, просто суммируем цифры пока в одном квадрате не выйдет число 2048 и тогда игрок выиграл.

17.10.2014, 13:52
Регистрация: 19.08.2010
Сообщений: 14,102

Не совсем понял про «движение».
Это как «на доске лежат фишки с циферками», а игрок может наклонять доску влево, вправо, от себя, на себя. И фишки «скатываются» по своим рядам или колонкам?

Или нужно выбрать одну фишку и двигать только ее на одну клетку?

Матрица по принципу игры 2048

У нас есть 4 размерный массив. Нужно написать программу, который сложит ровный его число, который направо, а его сделает 0, но только один раз.

function solution(x) < for (var i = 0; i < x.length; i++) < for (var j = 0; j < x.length; j++) < if (x[i][j]==x[i][j+1]) < x[i][j]=0 x[i][j+1]*=2 >> > return JSON.stringify(x) > console.log(solution([[2,2,4,8], [4,8,4,8], [8,8,8,8], [64,8,16,8]]))

 [0,0,0,16], [4,8,4,8], [0,16,0,16], [64,8,16,8]

но нужно чтобы второй раз не сложил,то есть вместо [0,0,0,16], нужно [0,4,4,8]

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

2048 на JavaScript / Angular. Практика JavaScript. Разработка игры на JavaScript

Иконка канала Профессиональная чистка

Полное руководство как сделать игру 2048! Не забудь добавить в закладки и подписаться на канал. Исходники в описании. Привет всем. Это большое видео я сделал для вас, мои зрители, в надежде не то, что вы станете моими подписчиками и будете радовать меня своим вниманием 🙂 Разработка игры на javascript не такая уж редкая задача. Решение такой задачи даст понимание зачем там много говорят о возможностях работы javascript. Ведь только при разработке игры можно столкнуться со сложными переборами массивов, применением зананий алгоритмов программирования. Angular в этом видео был использован исключительно как инструмент для отрисовки. Этот код будет работать на Vue JS но потребует небольших доработок для React JS Это видео могло бы быть частью курса Джейдай веб разработки (Практика JavaScript ) Подписывайся на группу в telegram https://t.me/webDevGromMaxChannel Поиграть можно тут https://angular-ivy-45mkjc.stackblitz.io/ Исходники тут https://stackblitz.com/edit/angular-ivy-45mkjc?embed=1&file=src/app/app.component.ts github репозиторий https://github.com/MaksymGrom/angular-2048-game/tree/1.0.0 Patreon (толко если сильно хочется) https://www.patreon.com/grommax 0:00 — Обзор урока 2:21 — Установка Angular проекта 3:21 — Добавление GameModule 6:09 — Верстка поля и плиточек (View) 18:14 — Типизация Item, логика отображения (ViewModel) 30:37 — События клавиатуры. HostListener 36:16 — Сервис, логика игры (Model) 42:10 — Логика генерация Items 56:48 — Логика нажатия влево 1:13:53 — Логика движения (move) 1:24:08 — Определение конца игры 1:44:38 — Исправления логики конца игры 2:00:00 — Подсчет очков и сброс игры 2:06:00 — Спасибо за просмотр

Войдите , чтобы оставлять комментарии

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