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

/* Это для сопроводительной надписи */ body < font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; >/* Выравнивание и небольшой отступ */ table < float: left; margin-right: 4rem;>/* Стили ячейки */ td < width: calc(25vmin - 10px); height: calc(25vmin - 10px); border: 1px solid #ccc; text-align: center; font-size: calc(10vmin); font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; >/* Это для визуального выделения названий клавиш */ span

Проверку на выигрыш или проигрыш не делал.

Чуть позже мне пришла идея, хранить состояние в одной строке, (один символ — одна фишка), если кодировать в шестнадцатеричной системе. Или если делать большие поля (5х5 или 10х10), то большие числа также можно хранить вплоть до 36-ричной системы.

Переводы между строками и числами можно делать так:

let num, str; num = 30; str = num.toString(36); console.log(`str = $;`); num = parseInt(str, 36); console.log(`num = $;`);

Чуть позже напишу комментариев к коду. Но если будут вопросы — спрашивайте, отвечу как увижу.

Отслеживать
ответ дан 7 дек 2021 в 11:52
7,606 1 1 золотой знак 6 6 серебряных знаков 28 28 бронзовых знаков

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

11 дек 2021 в 15:08
Стоит посмотреть код из другого моего ответа
11 дек 2021 в 19:33
я смотрел, спасибо, тоже полезно.
12 дек 2021 в 1:12

Можно поворачивать игровое поле так, чтобы сдвиг выполнялся всегда слева направо, затем сдвигать ячейки и поворачивать поле обратно.

//преобразовываем координаты чтобы сдвиг выполнялся слева направо if (direction === 'left') < cells.forEach(cell =>< cell.oldRow = cell.row cell.oldCol = cell.col cell.col = size - 1 - cell.col >) > if (direction === 'right') < //ничего >if (direction === 'up') < cells.forEach(cell =>< cell.oldRow = cell.row cell.oldCol = cell.col cell.col = cell.oldRow cell.row = size - 1 - cell.oldCol >) > if (direction === 'down') < cells.forEach(cell =>< cell.oldRow = cell.row cell.oldCol = cell.col cell.col = cell.oldRow cell.row = cell.oldCol >) > //сдвигаем вправо move('right') //Нужно почистить функцию и оставить только часть кода внутри direction === 'right' //восстанавливаем координаты обратно cells.forEach(cell => < cell.row = cell.oldRow cell.col = cell.oldCol >) 

Можно этот алгоритм преобразования координат перенести в функцию getCell :

function getCell(row, col, direction) < if (direction === 'left') < col = size - 1 - cell.col >if (direction === 'up') < let oldRow = row row = size - 1 - col col = oldRow >if (direction === 'down') < let oldRow = row row = col col = oldRow >for (let i = 0; i < cells.length; i++) < const cell = cells[i]; if (cell.row === row && cell.col === col && cell.value !== 0) < return cell; >> > 

Отслеживать
ответ дан 6 дек 2021 в 12:43
2,468 9 9 серебряных знаков 22 22 бронзовых знака

Несложно заметить, что при хранении элементов в плоском массиве разные варианты перебора столбцов и строк отличаются только стартовой позицией и смещениями при переходе к следующим элементам. Соответственно имеет смысл не хардкодить эти величины, а вынести их в отдельную С++style табличку и обращаться к ней при входе в функцию. Также для практической реализации, если надо делать анимации перескакивания и схлопывания ячеек, то имеет смыл добавить в функцию третий аргумент, принимающий функцию обратного вызова для соотв. оповещений.

type Field = Array; type Direction = 'left' | 'right' | 'up' | 'down'; type Navigation = < initial: number; next_col: number; next_row: number; >; type Lookup = < [direction in Direction]: Navigation; >; const dim = 4; const cells_count = dim * dim; const lookup: Lookup = < left : < initial: 0 , next_col: 1 , next_row: dim >, right: < initial: (dim - 1) , next_col: -1 , next_row: dim >, up : < initial: 0 , next_col: dim, next_row: 1 >, down : < initial: (dim - 1) * dim, next_col: -dim, next_row: 1 >>; function Fold(input: Field, direction: Direction): Field < const output = new Array(cells_count).fill(0); const navigation = lookup[direction]; let remaining = cells_count; let pos = navigation.initial; for (;;) < let read_pos = pos; let write_pos = pos; for (;;) < if (0 !== input[read_pos]) < if (output[write_pos] !== input[read_pos]) < if (0 !== output[write_pos]) < write_pos += navigation.next_col; >output[write_pos] = input[read_pos]; > else < output[write_pos] *= 2; write_pos += navigation.next_col; >> --remaining; if (0 === (remaining % dim)) < break; // inner loop >read_pos += navigation.next_col; continue; // inner loop > if (0 === remaining) < break; // outer loop >pos += navigation.next_row; continue; // outer loop > return output; > 

Отслеживать
ответ дан 7 дек 2021 в 15:18
user7860670 user7860670
29.9k 3 3 золотых знака 17 17 серебряных знаков 36 36 бронзовых знаков
Спасибо. TS мне не катит, но идею понял.
7 дек 2021 в 15:26
@aepot ¿Почему не катит? А вообще он легким движением превращается в js.
7 дек 2021 в 15:29
Оно понятно, спасибо еще раз.
7 дек 2021 в 15:30

Решил немного расширить ответ. А новый код вместе со старым ответом в один ответ не вместился. Потому выложу отдельным ответом.

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

В целом, демка получилась неплохая. Над анимацией еще поработать надо.

Будут вопросы — задавайте. Код может работать некорректно. Если заметили баг, напишите, исправим.

// Порог срабатывания приковнования const TOUCH_THRESHOLD = 50; // Цветовая схнма COLOR_SCHEMA = [ 'E57373', 'F06292', 'BA68C8', '9575CD', '7986CB', '64B5F6', '4FC3F7', '4DD0E1', '4DB6AC', '81C784', 'AED581', 'DCE775', 'FFF176', 'FFD54F', 'FFB74D', 'FF8A65', 'A1887F', '90A4AE', 'E0E0E0', ]; // Математические функции и константа const < abs, round, random, max, min, sin, cos, hypot, atan2, PI: π, E: �� >= Math; // Функции Object const < assign, entries, fromEntries >= Object; // Хэлпер querySelector const sel = (. q) => !q.length ? null : Array.isArray(q[0]) ? sel(q[0].reduce((r, s, i) => ((r += (i ? q[i] : '') + s), r), '')) : q.reduce((r, s) => (!r ? null : 'object' == typeof s ? s : r.querySelector(s)), document); // Хэлпер querySelectorAll const selAll = (. q) => !q.length ? null : Array.isArray(q[0]) ? selAll(q[0].reduce((r, s, i) => ((r += (i ? q[i] : '') + s), r), '')) : q.reduce( (r, s, i, q) => !r ? null : 'object' == typeof s ? s : r['querySelector' + (i == q.length - 1 ? 'All' : '')](s), document ); // Хэлперы классов const addCls = (el, . cls) => (el.classList.add(. cls), el); const remCls = (el, . cls) => (el.classList.remove(. cls), el); // Хэлпер аттрибутов const attr = (el, atr, val) => (typeof val == 'undefined' ? el.getAttribute(atr) : (el.setAttribute(atr, val), el)); // Хэлпер createElement const create = def => < const el = document.createElement(def.tag || 'div'); if (def.cls) el.className = def.cls; if (def.css) assign(el.style, def.css); if (def.evt) entries(def.evt).forEach(([evt, cb]) =>el.addEventListener(evt, cb, false)); if (def.tgt) def.tgt.appendChild(el); if (def.atr) entries(def.atr).forEach(([atr, val]) => attr(el, atr, val)); if (def.txt) el.innerHTML = def.txt; if (def.chd) < if (Array.isArray(def.chd)) def.chd.forEach(subdef =>create(< tgt: el, . subdef >)); else create(< tgt: el, . def.chd >); > return el; >; // Останавливает событие const stop = e => < e.preventDefault(); e.stopPropagation(); >; // Преобразователь массива в строку const arr2str = arr => arr.map(val => (+val).toString(36)).join``; // Преобразователь строки в массив const str2arr = str => [. str].map(chr => parseInt(chr, 36)); // Схемы клавиатуры [ ['left', 'down', 'up', 'right', 'undo', 'redo'], ['⬅', '⬇', '⬆', '⮕', '⌫', '⏎'], ['H', 'J', 'K', 'L', 'U', '.'], ['A', 'S', 'W', 'D', 'Z', 'R'], ].forEach((scheme, idx) => create( < tag: 'tr', chd: scheme.map(key =>( < tag: idx ? 'td' : 'th', chd: < tag: 'span', cls: 'key', txt: key >>)), tgt: sel('table'), >) ); //Уровни сложности [ [3, 8], [4, 11], [5, 14], [6, 16], [7, 19], ].forEach(([size, adv]) => create(< tag: 'button', atr: < size, adv >, chd: [ < tag: 'label', cls: 'size', txt: `$ ×$ ` >, < tag: 'hr' >, < tag: 'label', cls: 'advance', txt: `to $ ` >, ], evt: < click: evt =>< let target = evt.target.closest('button'); createGame(< size: +attr(target, 'size'), adv: +attr(target, 'adv') >); >, >, tgt: sel('.new-game'), >) ); // Стили для фрейма выигрыша create( < tag: 'style', txt: `.frame.success h3, .frame.success .score < animation: css-fizzy 12s linear 0s infinite; >@keyframes css-fizzy < $`$<(100 / 12) * frameIdx>% `$px $< (-1.6) ** shdowPartIdx * cos((frameIdx / 6) * π) >px $px` ), ] .map((shadow, shadowIdx) => `$ hsl($deg,99%,$%)`) .join()>;>` ).join``> >`, tgt: document.body, >); // текущая игра var game; // текущее косание let cur = < pageX: null, pageY: null >; // Обработчик кнопок закрытия selAll('button.exit').forEach( btn => (btn.onclick = e => attr(e.target.closest('.frame'), 'mode') == 'export' ? (setFrame('game'), activateListeners()) : closeGame()) ); // Обработчик кнопкт Экспорт sel('button.export').onclick = e => < deactivateListeners(); const txtAr = sel('textarea'); txtAr.value = JSON.stringify(game.serialize()); attr(setFrame('memo'), 'mode', 'export'); txtAr.select(); >; // Обработчик кнопки import sel('button.import').onclick = e => < deactivateListeners(); const txtAr = sel('textarea'); txtAr.value = ''; attr(setFrame('memo'), 'mode', 'import'); txtAr.select(); >; // Обработчик кнопки OK sel('button.ok').onclick = e => < const txtAr = sel('textarea'); if (attr(txtAr.closest('.frame'), 'mode') == 'import') < try < let obj = JSON.parse(txtAr.value); // TODO: Check JSON-data createGame(obj); >catch (e) < alert(e.message); >> else < setFrame('game'); activateListeners(); >>; // Обработчик кнопки Undo sel('button.undo').onclick = e => < game.undo(); >; // Обработчик кнопки Redo sel('button.redo').onclick = e => < game.redo(); >; // отчищает текущее косание function clearCur() < cur.pageX = cur.pageY = null; >// устанавливает начало текущего косания function setCur(touch) < cur.pageX = touch.pageX; cur.pageY = touch.pageY; >// определяет направление косания function dirCur(touch) < const dX = touch.pageX - cur.pageX; const dY = touch.pageY - cur.pageY; const d = Math.hypot(dX, dY); if (d >TOUCH_THRESHOLD && (abs(dY) > 2 * abs(dX) || 2 * abs(dY) < abs(dX))) < let side = ((π + atan2(dX, dY)) / π) * 2; side = round(side); side = side < 4 ? side : side - 4; let dir = ['u', 'l', 'd', 'r'][side]; setCur(touch); return dir; >else < return null; >> //Функция создает экземпляр игры function createGame(props) < setFrame('game'); game = new Game(props).init(); activateListeners(); >// Функция закрывает текующий экземпляр игры function closeGame() < game = null; setFrame('lobby'); deactivateListeners(); >// Функция активирует заданный аргументом фрейм function setFrame(frame) < selAll('.frame').forEach(frame =>remCls(frame, 'show')); return addCls(sel(`.$`), 'show'); > // Функция включает обработчики function activateListeners() < window.ontouchstart = e => < if (e.touches.length != 1) < clearCur(); >else < setCur(e.touches[0]); >>; window.ontouchmove = e => < if (e.touches.length != 1) < return clearCur(); >let dir = dirCur(e.touches[0]); if (dir) < game.swap(dir); >>; window.ontouchend = e => clearCur(); window.ontouchcancel = e => clearCur(); window.onkeydown = e => < [ ['up', ['ArrowUp', 'KeyW', 'KeyK']], ['down', ['ArrowDown', 'KeyS', 'KeyJ']], ['left', ['ArrowLeft', 'KeyA', 'KeyH']], ['right', ['ArrowRight', 'KeyD', 'KeyL']], ['undo', ['Backspace', 'KeyU', 'KeyZ']], ['redo', ['Enter', 'KeyR', 'Period']], ].map(([fn, keys]) => < if (keys.includes(e.code) && !e.ctrlKey && !e.altKey && !e.metaKey) < game[fn](); stop(e); >>); >; window.onresize = e => < game.reposition(); >; window.onwheel = e => < stop(e); >; > // Функция выключет обработчики function deactivateListeners() < // удаляем обработчики ['keydown', 'touchend', 'touchcancel', 'touchmove', 'touchstart', 'resize', 'wheel'].map( evt =>(window[`on$`] = null) ); > // Функция пересоздает grid function regrid(size) < // Удаляем старые ячейки selAll(grid, 'div').forEach(cell =>cell.remove()); // Удаляем старые тайлы selAll(layer, 'div').forEach(tile => tile.remove()); // Добавляем новые ячейки for (let i = 0; i < size ** 2; i++) create(< tag: 'div', tgt: grid >); // Шаблоны grid assign(grid.style, < gridTemplateColumns: `repeat($,1fr)`, gridTemplateRows: `repeat($ ,1fr)`, >); // Динамические стили для тайлов dynamic.innerHTML = Object.entries(COLOR_SCHEMA) .map( ([dib, color]) => `#layer .tile[val="$"];> #layer .tile[val="$"]::before< content:"$"; >` ) .join('\n') + `#layer .tile < font-size: calc(80vmin / $); line-height: calc(80vim / $); >`; > class Game < // размер size; // сложность adv; // массив значений raw; // стек отмен stackUndo = []; // стек повторов stackRedo = []; // очки _score = 0; // флаг начала started = false; constructor(props) < assign(this, props); >// Инициализация init() < if (!this.size) this.size = 4; if (!this.adv) this.adv = round(this.size * ��); if (!this.raw) this.raw = new Array(this.size ** 2).fill(0); regrid(this.size); if (!this.started) < this.started = true; this.addition().addition(); >else < this.recreate(); >this.score = this.score; return this; > // Дополнение addition() < // считаем пыстые ячейки let freeCells = []; for (let i = 0; i < this.size ** 2; i++) < if (!this.raw[i]) < freeCells.push(i); >> // выбираем рандломную let pos = freeCells[~~(freeCells.length * random())]; // рандомное значение let value = 1 + ~~((this.size - 2) * random()); // let [x, y] = [pos % this.size, ~~(pos / this.size)]; this.raw[pos] = value; this.createTile(x, y, value, 'addition'); return this; > // Сделать ход swap(dir) < const [property, method] = < u: ['cols', 'backward'], d: ['cols', 'forward'], r: ['rows', 'forward'], l: ['rows', 'backward'], >[dir]; let lines = this[property]; let newLines = []; let changes = 0; // Вызываем метод сдвига for (let i = 0; i < this.size; i++) < let line = lines[i]; let result = this[method](line); let < moves, mixes, newLine >= result; for (let j = 0; j < moves.length; j++) < let [from, to] = moves[j]; let [xFrom, yFrom, xTo, yTo] = property == 'cols' ? [i, from, i, to] : [from, i, to, i]; let tile = this.getTile(xFrom, yFrom); assign(tile.style, this.getRect(xTo, yTo)); attr(tile, 'x', xTo); attr(tile, 'y', yTo); >// вызываем метод мутирования for (let j = 0; j < mixes.length; j++) < let [x, y] = property == 'cols' ? [i, mixes[j]] : [mixes[j], i]; let value = newLine[mixes[j]]; this.score += value; // Удаляем старые тайлы this.getTile(x, y).remove(); this.getTile(x, y).remove(); // создаем новые тайлы this.createTile(x, y, value, 'mix'); >changes += mixes.length + moves.length; newLines.push(newLine); > // Если что-то поменялось if (changes) < // Сохраняем старые значения this.stackUndo.push([arr2str(this.raw), this._score]); this.stackRedo.splice(0, this.stackRedo.length); // Применяем значения this[property] = newLines; // Добавляем рандомный тайл this.addition(); // Чекнем на вымгрыш или проигрыш this.check(); // На всякий перепозиционируем тайлы requestAnimationFrame(() =>< this.reposition(); >); > > // биндинги сторон up() < this.swap('u'); >down() < this.swap('d'); >left() < this.swap('l'); >right() < this.swap('r'); >// отменить undo() < // если стек пуст if (!this.stackUndo.length) < return; >this.stackRedo.push([arr2str(this.raw), this.score]); let [raw, score] = this.stackUndo.pop(); this.score = score; this.raw = str2arr(raw); this.recreate(); > // повторить redo() < // если стек пуст if (!this.stackRedo.length) < return; >this.stackUndo.push([arr2str(this.raw), this.score]); let [raw, score] = this.stackRedo.pop(); this.score = score; this.raw = str2arr(raw); this.recreate(); > // Проверка на выигрыш или проигрыш check() < if (this.raw.find(item =>item == this.adv)) < return setFrame('success'); >if (!this.raw.includes(0)) < for (let y = 0; y < this.size; y++) < for (let x = 0; x < this.size - 1; x++) < if (this.raw[y * this.size + x] == this.raw[y * this.size + x + 1]) < return; >> > for (let x = 0; x < this.size; x++) < for (let y = 0; y < this.size - 1; y++) < if (this.raw[y * this.size + x] == this.raw[(y + 1) * this.size + x]) < return; >> > return setFrame('failure'); > > // сдвигаем назад backward(line) < let moves = []; let mixes = []; let skip = []; let pos = -1; let lastValue = null; let lastIndex = null; let newLine = []; for (let i = 0, l = line.length; i < l; i++) < if (line[i] == 0) < skip.push(i); >else if (lastIndex != null && lastValue != null && line[i] == lastValue) < moves.push([i, lastIndex]); mixes.push(lastIndex); newLine[lastIndex]++; lastIndex = null; lastValue = null; >else < lastIndex = newLine.length; newLine.push(line[i]); lastValue = line[i]; // >if (++pos != i) < moves.push([i, pos]); >> > let endian = this.size - newLine.length; newLine.splice(newLine.length, 0, . new Array(endian).fill(0)); return < moves, mixes, newLine >; > // сдвигаем линию вперед forward(line) < let moves = []; let mixes = []; let skip = []; let pos = this.size; let lastValue = null; let lastIndex = null; let newLine = new Array(this.size).fill(0); for (let i = line.length - 1; i >= 0; i--) < if (line[i] == 0) < skip.push(i); >else if (lastIndex != null && lastValue != null && line[i] == lastValue) < moves.push([i, lastIndex]); mixes.push(lastIndex); newLine[lastIndex]++; lastIndex = null; lastValue = null; >else < lastIndex = --pos; newLine[pos] = line[i]; lastValue = line[i]; if (pos != i) < moves.push([i, pos]); >> > return < moves, mixes, newLine >; > // перепозиционирование тайлов reposition() < // получаем все тайлы let tiles = selAll(layer, '.tile'); for (let tile of tiles) < let [x, y] = [+attr(tile, 'x'), +attr(tile, 'y')]; // циклично каждому устанавливаем позицию в соответствии с коордтнатами assign(tile.style, this.getRect(x, y)); >> // пересоздать тайлы recreate() < // удаляем все тайлы selAll(layer, 'div').forEach(tile =>tile.remove()); // создаем тайлы for (let [pos, dib] of this.raw.entries()) < if (!dib) continue; let [x, y] = [pos % this.size, ~~(pos / this.size)]; this.createTile(x, y, dib); >> // создать тайл createTile(x, y, val, anim) < let rect = this.getRect(x, y); let tile = create(< cls: 'tile', atr: < x, y, val >, css: this.getRect(x, y), tgt: layer, >); if (anim) < requestAnimationFrame(() => < if (anim) < tile.classList.add(anim); >requestAnimationFrame(() => < tile.classList.add('transition'); if (anim) < requestAnimationFrame(() =>< tile.classList.remove(anim); >); > >); >); > return tile; > // Найти тайл getTile(x, y) < return sel(layer, `div[x="$"][y="$"]`); > // Найти область ячейки getRect(x, y) < const rect = sel(grid, `div:nth-child($)`).getBoundingClientRect(); return fromEntries(['left', 'top', 'width', 'height'].map(prop => [prop, rect[prop] + 'px'])); > // Свойство возвращает массив столбцов get cols() < const cols = []; for (let ci = 0, cn = this.size; ci < cn; ci++) < let col = []; for (let ri = 0, rn = this.size; ri < rn; ri++) < col.push(this.raw[ri * cn + ci]); >cols.push(col); > return cols; > // Свойство записывает массив столбцов set cols(v) < for (let ci = 0, cn = this.size; ci < cn; ci++) < for (let ri = 0, rn = this.size; ri < rn; ri++) < this.raw[ri * cn + ci] = v[ci][ri]; >> > // Свойство возвращает массив строк get rows() < const rows = []; for (let ri = 0, rn = this.size; ri < rn; ri++) < let row = []; for (let ci = 0, cn = this.size; ci < cn; ci++) < row.push(this.raw[ri * cn + ci]); >rows.push(row); > return rows; > // Свойство записывает массив строк set rows(v) < for (let ri = 0, rn = this.size; ri < rn; ri++) < for (let ci = 0, cn = this.size; ci < cn; ci++) < this.raw[ri * cn + ci] = v[ri][ci]; >> > // Свойство возвращает количество очков get score() < return this._score; >// Свойство устанавливает количество очков set score(v) < selAll('.score').forEach(el =>(attr(el, 'text', v).innerHTML = v)); this._score = v; > // Сериализация игры serialize() < return fromEntries( ['size', 'adv', 'raw', 'score', 'started', 'stackUndo', 'stackRedo'].map(prop =>[prop, this[prop]]) ); > >

*, *::before, *::after < box-sizing: border-box; >body < margin: 0; min-height: 100vw; overflow: hidden; >.frame < width: 100vw; height: 100vh; >.frame < display: none; >.show, .lobby.show, .new-game, .panel < display: flex; >.anim < transition: all 100ms; >.lobby, .memo, .game < flex-flow: column nowrap; justify-content: flex-start; align-items: center; >.meta, .new-game < justify-content: center; align-items: center; flex-flow: row wrap; gap: 1rem; >.note, .kbd < width: 25rem; >.note::before, .kbd::before < margin-right: 1rem; display: block; >.note::before < content: '⚠'; font-size: 3rem; >.kbd::before < content: '⌨'; font-size: 5rem; line-height: 3rem; >.meta, .note, .kbd < display: flex; flex-flow: row nowrap; >table tr th < font-size: 0.8rem; >table tr td span < width: 2rem; height: 1.6rem; border: 1px solid #3339; text-align: center; background: #8080802b; border-collapse: separate; border-bottom: 1px solid #4449; border-radius: 3px; box-shadow: #000 0px -1px 0px 0px inset; color: #000; cursor: default; display: block; font-family: -apple-system, system-ui, sans-serif; font-size: 1.2rem; forced-color-adjust: none; line-height: 1rem; margin: 0 2px 0 0; padding: 3px 5px; user-select: none; white-space: nowrap; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-font-smoothing: antialiased; >h3, .score, #layer div < font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; >h3, .score < font-size: 4rem; >#grid < background: #888; display: grid; >#layer, #grid < border-radius: 1vmin; width: calc(100vw - 2rem); height: calc(100vh - 2rem); max-width: calc(100vh - 2rem); max-height: calc(100vw - 2rem); position: fixed; top: 1rem; left: 1rem; padding: 1vmin; gap: 1vmin; >#layer div < z-index: 10; position: fixed; text-align: center; >#layer div, #grid div < border-radius: 0.5vmin; >#grid div < background: #fff; >h3, .failure .score, .success .score < position: fixed; left: 50vw; transform: translate(-50%, -150%); text-align: center; color: #fffa; >h3 < top: 45vh; >.failed .score, .success .score < top: 55vh; >.layer div < position: fixed; text-align: center; color: #555; text-shadow: 0 0 0.2rem #ff0, 0 0 0.4rem #fff; >.layer > .tile < transform: scale(1); opacity: 1; >.layer > .tile.addition < transform: scale(0); >.layer > .tile.mixed < transform: scale(1.5); opacity: 0; >.transition < transition: all 100ms ease-out; >.exit < margin: 1rem 1rem 0 1rem; width: 2rem; height: 2rem; border-radius: 1rem; background: #f00; color: #fff; border: 2px solid #000; /* box-shadow: 0 0 1rem #f00; */ display: inline-block; text-align: center; padding: 0; line-height: 1.5rem; cursor: pointer; >.exit:hover < position: relative; border: 2px solid #fff; box-shadow: 0 0 1rem #f00; top: -2px; >.exit:active < border: 2px solid #fffc; box-shadow: 0 0 0.5rem #f00; top: 2px; >.exit::before < /* ✖× */ content: '×'; font-size: 2rem; line-height: 1.5rem; text-align: center; >button.ok < width: 6rem; height: 3rem; font-size: 2rem; display: inline-block; >textarea < height: calc(100vh - 3rem - 3rem - 3rem); margin: 1rem; width: calc(100vw - 2rem); >header < display: flex; flex-flow: row; justify-content: space-between; align-items: top; width: 100vw; >.game .score < position: fixed; top: 3rem; right: 1rem; color: #0008; cursor: default; user-select: none; >button < display: inline-block; vertical-align: center; >button p < float: right; /* clear: right; */ margin: 0.8rem 0 0 0.3rem; >.undo::before, .redo::before, .import::before, .export::before < font-size: 2rem; display: block; float: left; >.undo::before < content: '◀'; >.redo::before < content: '▶'; >.export::before < content: '��'; >.import::before < content: '��'; >.memo[mode='import'] header p::before < content: 'Вставте содержимое файла в это поле и нажмите ОК:'; >.memo[mode='export'] header p::before < content: 'Сохраните содержимое файла из этого поля'; >.memo p < margin: 2rem 0 0 1rem; >.panel < position: fixed; bottom: 1rem; right: 1rem; >:root < --f-size: 15; --f-unit: 1vmin; --f: calc(var(--f-size) * var(--f-unit)); --bg: #222; >.failure.frame, .success.frame < background: var(--bg); >.failure.frame .score, .failure.frame h3 < flex: 1; line-height: 0.75; margin: auto; color: #1af0dc; text-align: center; transform: scaleX(var(--scale, 1)); animation: glitch-p 11s infinite alternate; font-size: 6vmin; position: fixed; left: 50vw; transform: translate(-50%, -50%); >.failure.frame .loose < top: 45vh; >.failure.frame .score < top: 55vh; >.failure.frame > *::before, .failure.frame > *::after < --top: 0; --left: 0; --v-height: 30%; --n-tenth: calc(var(--f-size) * 0.1 * var(--top)); --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%); --b-cut: calc(var(--t-cut) + var(--v-height)); content: attr(text); position: absolute; width: 100%; left: 0; text-align: center; transform: translateX(calc(var(--left) * 100%)); filter: drop-shadow(0 0 transparent); text-shadow: calc(var(--left) * -3em) 0 0.02em lime, calc(var(--left) * -6em) 0 0.02em #ff00e1; background-color: var(--bg); clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut)); >.failure.frame > *::before < animation: glitch-b 1.7s infinite alternate-reverse; >.failure.frame > *::after < animation: glitch-a 3.1s infinite alternate; >@keyframes glitch-p < 17% < --scale: 0.87; >31% < --scale: 1.1; >37% < --scale: 1.3; >47% < --scale: 0.91; >87% < --scale: 1; >> @keyframes glitch-a < 10%, 30%, 50%, 70%, 90% < --top: 0; --left: 0; >0% < --v-height: 15%; >20% < --left: 0.005; >40% < --left: 0.01; --v-height: 20%; --top: 3; >60% < --left: 0.03; --v-height: 25%; --top: 6; >80% < --left: 0.07; --v-height: 5%; --top: 8; >100% < --left: 0.083; --v-height: 30%; --top: 1; >> @keyframes glitch-b < 10%, 30%, 50%, 70%, 90% < --top: 0; --left: 0; >0% < --v-height: 15%; --top: 10; >20% < --left: -0.005; >40% < --left: -0.01; --v-height: 17%; --top: 3; >60% < --left: -0.03; --v-height: 35%; --top: 6; >80% < --left: -0.07; --v-height: 5%; --top: 8; >100% < --left: -0.083; --v-height: 30%; --top: 1; >> @keyframes mixed < 0% < transform: scale(1); >50% < transform: scale(1.5); >100% < transform: scale(1); >>

  
 
 
 
Игра отличается от оригинала!
Длинные числа заменены на степени двоек.
Например, 2 + 2 => 3 и 3 + 3 => 4.
Управление с тачскрина не требует
отрыва пальца от экрана.
Чувствительность сенсора завышена.
 
 
 
 
Import





  
 
 
0
 
Export 
Undo 
Redo 
 
 
YOU WIN
 
 
GAME OVER
 
 
OK 

Saved searches

Use saved searches to filter your results more quickly

Cancel Create saved search

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

kubowania / 2048 Public

A game of 2048 in vanilla javaScript, HTML and CSS

kubowania/2048

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Go to file

Folders and files

Last commit message
Last commit date

Latest commit

History

View all files

Repository files navigation

2048

A game of 2048 in vanilla JavaScript, HTML and CSS

In this walkthrough, we make the very popular game 2048 in JavaScript, HTML and CSS! No canvas required! (Now with more accurate subtitles for programmers)

Full video walkthrough here

Rules of 2048:

2048 is played on a 4×4 grid, with numbered tiles that slide smoothly when a player moves them using the four arrow keys. Each time you slide, a new tile will randomly appear in an empty spot on the board. Tiles slide as far as possible in the chosen direction until they are stopped by either another tile or the edge of the grid. If two tiles of the same number collide while moving, they will merge into a tile with the total value of the two tiles that collided. The resulting tile cannot merge with another tile again in the same move.

Tools and Software I used in this video:

• TabNine By Codota: https://bit.ly/Codota
• VSCode: https://bit.ly/VSCode-Editor

By creating this popular game we will learn the following javaScript Methods:

• querySelector()
• getElementById()
• createElement()
• appendChild()
• push()
• Math.floor()
• Math.random()
• length
• innerHTML
• parseInt()
• filter()
• Array()
• fill()
• concat()
• keyCode
• addEventListener()
• removeEventListener()
• setTimeout()
• clearInterval()
• setInterval()

If you did like this video, please do Like and Subscribe so I know to make others like this!

I would love to see what you have made so please do share your finished games with me on twitter! My handle is @ania_kubow.

MIT Licence

Copyright (c) 2020 Ania Kubow

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the «Software»), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

*Translation: Ofcourse you can use this for you project! Just make sure to say where you got this from 🙂

THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Курсы javascript

Привет, я играл в одну мобильную игру и там была мини-игра по типу 2048. Там правда вместо плиток были клинки с нумерацией от 0 до 9(9й клинок максимальный = плитке 2048). Сложность заключалась в том что 9й клинок не соединялся с таким же. В итоге они просто копились на поле тем самым уменьшая количество рабочих клеток. решил попробовать(!) сделать также своими ручками, но не разбираюсь в js(от слова совсем). думал просто в коде некоторые значения поменяю на false и та-да. скачал код который выложил создатель игры и попытался разобраться в том что нужно сделать, но так и не нашел тех самых заветных строк которые можно было бы изменить. быть может вообще на js нельзя такое провернуть но буду очень благодарен если вы поможете хотя бы ответом «это невозможно». но раз в игре такое есть значит где-то все таки возможно!!

Изображения: