2048 · llama-3.1-8b-instruct
Build a playable 2048 game with arrow-key tile sliding and merging, smooth animations, a score, and win and lose states.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 messages
Build a playable 2048 game with arrow-key tile sliding and merging, smooth animations, a score, and win and lose states.
{"name": "write", "parameters": {"path": "/workspace/index.html", "content": "<!DOCTYPE html>\n<html>\n<head>\n\t<title>2048 Game</title>\n\t<style>\n\t\tbody {\n\t\t\tfont-family: Arial, sans-serif;\n\t\t\ttext-align: center;\n\t\t}\n\t\t#game-board {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: repeat(4, 100px);\n\t\t\tgrid-gap: 10px;\n\t\t\twidth: 400px;\n\t\t\theight: 400px;\n\t\t\tborder: 1px solid black;\n\t\t}\n\t\t.tile {\n\t\t\twidth: 100px;\n\t\t\theight: 100px;\n\t\t\tbackground-color: #ccc;\n\t\t\tborder-radius: 10px;\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t.tile-merged {\n\t\t\tbackground-color: #f2c464;\n\t\t}\n\t\t.score {\n\t\t\tfont-size: 24px;\n\t\t\tfont-weight: bold;\n\t\t}\n\t\t.game-over {\n\t\t\tfont-size: 36px;\n\t\t\tfont-weight: bold;\n\t\t}\n\t\t.game-won {\n\t\t\tfont-size: 36px;\n\t\t\tfont-weight: bold;\n\t\t}\n\t</style>\n\t<script>\n\t\tlet score = 0;\n\t\tlet gameBoard = [\n\t\t\t[0, 0, 0, 0],\n\t\t\t[0, 0, 0, 0],\n\t\t\t[0, 0, 0, 0],\n\t\t\t[0, 0, 0, 0]\n\t\t];\n\t\tlet gameWon = false;\n\t\tlet gameOver = false;\n\n\t\tfunction generateRandomTile() {\n\t\t\tlet randomNumber = Math.floor(Math.random() * 16);\n\t\t\twhile (gameBoard[Math.floor(randomNumber / 4)][randomNumber % 4] !== 0) {\n\t\t\t\trandomNumber = Math.floor(Math.random() * 16);\n\t\t\t}\n\t\t\tgameBoard[Math.floor(randomNumber / 4)][randomNumber % 4] = 2;\n\t\t}\n\n\t\tfunction mergeTiles(row) {\n\t\t\tfor (let i = 0; i < 3; i++) {\n\t\t\t\tif (row[i] === row[i + 1] && row[i] !== 0) {\n\t\t\t\t\trow[i] *= 2;\n\t\t\t\t\trow[i + 1] = 0;\n\t\t\t\t\tscore += row[i];\n\t\t\t\t\tgameWon = checkGameWon();\n\t\t\t\t\tif (gameOver) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tgenerateRandomTile();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tfunction checkGameWon() {\n\t\t\tfor (let i = 0; i < 4; i++) {\n\t\t\t\tfor (let j = 0; j < 4; j++) {\n\t\t\t\t\tif (gameBoard[i][j] === 2048) {\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false;\n\t\t}\n\n\t\tfunction checkGameOver() {\n\t\t\tlet hasZero = false;\n\t\t\tlet hasPair = false;\n\t\t\tfor (let i = 0; i < 4; i++) {\n\t\t\t\tfor (let j = 0; j < 4; j++) {\n\t\t\t\t\tif (gameBoard[i][j] === 0) {\n\t\t\t\t\t\t.hasZero = true;\n\t\t\t\t\t}\n\t\t\t\t\tif (i < 3 && gameBoard[i][j] === gameBoard[i + 1][j]) {\n\t\t\t\t\t\t.hasPair = true;\n\t\t\t\t\t}\n\t\t\t\t\tif (j < 3 && gameBoard[i][j] === gameBoard[i][j + 1]) {\n\t\t\t\t\t\t.hasPair = true;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (!hasZero && !hasPair) {\n\t\t\t\tgameOver = true;\n\t\t\t}\n\t\t}\n\n\t\tfunction slideTiles(direction) {\n\t\t\tlet tiles = gameBoard.slice();\n\t\t\tswitch (direction) {\n\t\t\t\tcase 'up':\n\t\t\t\t\tfor (let i = 0; i < 4; i++) {\n\t\t\t\t\t\tmergeTiles(tiles[i]);\n\t\t\t\t\t\ttiles[i] = tiles[i].filter(tile => tile !== 0);\n\t\t\t\t\t\ttiles[i].push(0, 0, 0, 0);\n\t\t\t\t\t\ttiles[i] = tiles[i].sort((a, b) => a - b);\n\t\t\t\t\t}\n\t\t\t\t\tgameBoard = tiles;\n\t\t\t\t\tcheckGameOver();\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'down':\n\t\t\t\t\tfor (let i = 0; i < 4; i++) {\n\t\t\t\t\t\ttiles[i] = tiles[i].reverse();\n\t\t\t\t\t\tmergeTiles(tiles[i]);\n\t\t\t\t\t\ttiles[i] = tiles[i].filter(tile => tile !== 0);\n\t\t\t\t\t\ttiles[i].push(0, 0, 0, 0);\n\t\t\t\t\t\ttiles[i] = tiles[i].sort((a, b) => a - b);\n\t\t\t\t\t\ttiles[i] = tiles[i].reverse();\n\t\t\t\t\t}\n\t\t\t\t\tgameBoard = tiles;\n\t\t\t\t\tcheckGameOver();\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'left':\n\t\t\t\t\tfor (let i = 0; i < 4; i++) {\n\t\t\t\t\t\tmergeTiles(gameBoard[i]);\n\t\t\t\t\t\tgameBoard[i] = gameBoard[i].filter(tile => tile !== 0);\n\t\t\t\t\t\tgameBoard[i].push(0, 0, 0, 0);\n\t\t\t\t\t\tgameBoard[i] = gameBoard[i].sort((a, b) => a - b);\n\t\t\t\t\t}\n\t\t\t\t\tcheckGameOver();\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'right':\n\t\t\t\t\tfor (let i = 0; i < 4; i++) {\n\t\t\t\t\t\tgameBoard[i] = gameBoard[i].reverse();\n\t\t\t\t\t\tmergeTiles(gameBoard[i]);\n\t\t\t\t\t\tgameBoard[i] = gameBoard[i].filter(tile => tile !== 0);\n\t\t\t\t\t\tgameBoard[i].push(0, 0, 0, 0);\n\t\t\t\t\t\tgameBoard[i] = gameBoard[i].sort((a, b) => a - b);\n\t\t\t\t\t\tgameBoard[i] = gameBoard[i].reverse();\n\t\t\t\t\t}\n\t\t\t\t\tcheckGameOver();\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tfunction drawGameBoard() {\n\t\t\tlet gameBoardHtml = '';\n\t\t\tfor (let i = 0; i < 4; i++) {\n\t\t\t\tgameBoardHtml += '<div class="row">\n';\n\t\t\t\tfor (let j = 0; j < 4; j++) {\n\t\t\t\t\tgameBoardHtml += '<div class="tile" style="background-color: #ccc;';\n\t\t\t\t\tif (gameBoard[i][j] !== 0) {\n\t\t\t\t\t\tgameBoardHtml += 'background-color: #f2c464;';\n\t\t\t\t\t\tgameBoardHtml += '>'; gameBoardHtml += gameBoard[i][j]; gameBoardHtml += '</div>\n';\n\t\t\t\t\t} else {\n\t\t\t\t\t\tgameBoardHtml += '></div>\n';\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tgameBoardHtml += '</div>\n';\n\t\t\t}\n\t\t\tdocument.getElementById('game-board').innerHTML = gameBoardHtml;\n\t\t}\n\n\t\tfunction drawScore() {\n\t\t\tlet scoreHtml = document.getElementById('score');\n\t\t\tscoreHtml.innerHTML = 'Score: ' + score;\n\t\t}\n\n\t\tfunction drawGameOver() {\n\t\t\tlet gameOverHtml = document.getElementById('game-over');\n\t\t\tgameOverHtml.innerHTML = 'Game Over!';\n\t\t}\n\n\t\tfunction drawGameWon() {\n\t\t\tlet gameWonHtml = document.getElementById('game-won');\n\t\t\tgameWonHtml.innerHTML = 'You Won!';\n\t\t}\n\n\t\tdocument.addEventListener('keydown', function(event) {\n\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\tslideTiles('up');\n\t\t\t\tdrawGameBoard();\n\t\t\t\tcheckGameOver();\n\t\t\t\tcheckGameWon();\n\t\t\t}\n\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\tslideTiles('down');\n\t\t\t\tdrawGameBoard();\n\t\t\t\tcheckGameOver();\n\t\t\t\tcheckGameWon();\n\t\t\t}\n\t\t\tif (event.key === 'ArrowLeft') {\n\t\t\t\tslideTiles('left');\n\t\t\t\tdrawGameBoard();\n\t\t\t\tcheckGameOver();\n\t\t\t\tcheckGameWon();\n\t\t\t}\n\t\t\tif (event.key === 'ArrowRight') {\n\t\t\t\tslideTiles('right');\n\t\t\t\tdrawGameBoard();\n\t\t\t\tcheckGameOver();\n\t\t\t\tcheckGameWon();\n\t\t\t}\n\t\t});\n\n\t\tgenerateRandomTile();\n\t\tgenerateRandomTile();\n\t\tdrawGameBoard();\n\t\tdrawScore();\n\t\t\n\t</script>\n</head>\n<body>\n\t<div id='game-board'></div>\n\t<div id='score'></div>\n\t<div id='game-over' style='display: none;'></div>\n\t<div id='game-won' style='display: none;'></div>\n\t<script>\n\t\tsetInterval(function() {\n\t\t\tgenerateRandomTile();\n\t\t\tcheckGameOver();\n\t\t\tcheckGameWon();\n\t\t\t}, 1000);\n\t</script>\n</body>\n</html>"}}
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.