2048-gen example

inimino · Apr 22, 2024 · d6d1ab9 · d6d1ab9
1 parent 9a21e19
commit d6d1ab9
Showing 1 changed file with 131 additions and 0 deletions.
diff --git a/doc/examples/2048-gen.md b/doc/examples/2048-gen.md
@@ -0,0 +1,131 @@
+## CSS
+
+All the CSS.
+
+````css
+* { margin:0; padding:0; box-sizing:border-box }
+body { display:flex; flex-direction:column; justify-content:center; align-items:center; background:#bbada0; font-family:Arial, sans-serif }
+h1 { color:#776e65; text-align:center; margin:20px 0; font-size:60px }
+#game { display:grid; grid-template-columns:repeat(4, 1fr); grid-template-rows:repeat(4, 1fr); gap:10px; width:500px; height:500px; background:#bbada0; padding:10px; box-shadow:0 0 40px rgba(0, 0, 0, 0.5); margin:0 auto }
+.tile { display:flex; justify-content:center; align-items:center; background:#cdc1b4; font-weight:bold; font-size:55px; color:#f9f6f2 }
+.tile.tile-empty { background:#cdc1b4; color:transparent }
+.tile.tile-1 { background:#eee4da; color:#81a8b5 }
+.tile.tile-2 { background:#ede0c8; color:#81a8b5 }
+.tile.tile-3 { background:#f2b179 }
+.tile.tile-4 { background:#f59563 }
+.tile.tile-5 { background:#f67c5f }
+.tile.tile-6 { background:#f65e3b }
+.tile.tile-7 { background:#edcf72 }
+.tile.tile-8 { background:#edcc61 }
+.tile.tile-9 { background:#edc850 }
+.tile.tile-10 { background:#edc53f; font-size:45px }
+.tile.tile-11 { background:#edc22e; font-size:45px }
+.tile.tile-12 { background:#3c3a32; font-size:45px }
+.tile.tile-13 { background:#3c3a32; font-size:45px }
+.tile.tile-14 { background:#3c3a32; font-size:36px }
+.tile.tile-15 { background:#3c3a32; font-size:36px }
+.tile.tile-16 { background:#3c3a32; font-size:36px }
+.tile.tile-17 { background:#3c3a32; font-size:30px }
+````
+
+## JS
+
+All the game implementation.
+Note that the formatting is not consistent, as each function is generated separately by the LLM.
+If you care about this, you can use a code formatter, but you might be too busy implementing new features.
+
+
+````js
+function setup_game() {
+  let game = new Array(16).fill(0);
+  let randomIndices = [];
+  while(randomIndices.length < 2) {
+    let r = Math.floor(Math.random() * 16);
+    if(randomIndices.indexOf(r) === -1) randomIndices.push(r);
+  }
+  randomIndices.forEach(index => {
+    game[index] = Math.random() < 0.9 ? 1 : 2;
+  });
+  return game;
+}
+
+function board(arr) {
+  return arr.map(val => `<div class="tile ${val ? `tile-${val}` : 'tile-empty'}">${val ? 2 ** val : ''}</div>`).join('');
+}
+
+function handle_move_4cell(cells) {
+    // Slide non-zero cells to the front
+    let result = cells.filter(val => val > 0);
+    result = [...result, ...Array(4 - result.length).fill(0)];
+
+    // Merge adjacent cells if they are equal
+    for (let i = 0; i < 3; i++) {
+        if (result[i] !== 0 && result[i] === result[i + 1]) {
+            result[i]++;
+            result[i + 1] = 0;
+        }
+    }
+
+    // Slide again after merge
+    result = result.filter(val => val > 0);
+    result = [...result, ...Array(4 - result.length).fill(0)];
+
+    return result;
+}
+
+function game_update(board, direction) {
+    let newBoard = Array(16).fill(0);
+    let indices = {
+        u: [[0, 4, 8, 12], [1, 5, 9, 13], [2, 6, 10, 14], [3, 7, 11, 15]],
+        d: [[12, 8, 4, 0], [13, 9, 5, 1], [14, 10, 6, 2], [15, 11, 7, 3]],
+        l: [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]],
+        r: [[3, 2, 1, 0], [7, 6, 5, 4], [11, 10, 9, 8], [15, 14, 13, 12]]
+    };
+
+    indices[direction].forEach((group, index) => {
+        const values = group.map(i => board[i]);
+        const moved = handle_move_4cell(values);
+        moved.forEach((value, i) => {
+            newBoard[group[i]] = value;
+        });
+    });
+
+    return add_new_tile(board, newBoard);
+}
+
+function add_new_tile(boardBefore, boardAfter) {
+  if (boardBefore.join() === boardAfter.join()) return boardAfter;
+
+  let emptyIndices = [];
+  boardAfter.forEach((val, idx) => {
+    if (val === 0) emptyIndices.push(idx);
+  });
+
+  let newIndex = emptyIndices[Math.floor(Math.random() * emptyIndices.length)];
+  boardAfter[newIndex] = Math.random() < 0.9 ? 1 : 2;
+
+  return boardAfter;
+}
+
+let gameState = setup_game();
+
+function updateDisplay() {
+  document.getElementById('game').innerHTML = board(gameState);
+}
+
+updateDisplay();
+
+document.addEventListener('keydown', function(event) {
+  let move = '';
+  switch (event.key) {
+    case 'ArrowUp': move = 'u'; break;
+    case 'ArrowDown': move = 'd'; break;
+    case 'ArrowLeft': move = 'l'; break;
+    case 'ArrowRight': move = 'r'; break;
+  }
+  if (move) {
+    gameState = game_update(gameState, move);
+    updateDisplay();
+  }
+});
+````