Tetris · llama-4-scout
Build a playable Tetris on a canvas with all seven tetrominoes, rotation, line clears, increasing speed, a next-piece preview, and score.
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 Tetris on a canvas with all seven tetrominoes, rotation, line clears, increasing speed, a next-piece preview, and score.
a simple implementation of Tetris in HTML, CSS, and JavaScript. This code creates a single-page web app with all the requested features. ```html <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tetris</title> <style> /* Add some basic styling to our game */ canvas { border: 1px solid black; } #next-piece { border: 1px solid black; } </style> </head> <body> <canvas id="game-canvas" width="200" height="400"></canvas> <div id="next-piece" style="display: inline-block; vertical-align: top;"></div> <div id="score">Score: 0</div> <script> // Get the canvas and its 2D drawing context const canvas = document.getElementById('game-canvas'); const ctx = canvas.getContext('2d'); // Set the canvas dimensions const gridWidth = 10; const gridHeight = 20; const cellSize = 20; // Define the tetrominoes const tetrominoes = [ // I-piece [[1, 1, 1, 1]], // J-piece [[1, 0, 0], [1, 1, 1]], // L-piece [[0, 0, 1], [1, 1, 1]], // O-piece [[1, 1], [1, 1]], // S-piece [[0, 1, 1], [1, 1, 0]], // T-piece [[0, 1, 0], [1, 1, 1]], // Z-piece [[1, 1, 0], [0, 1, 1]] ]; // Initialize the game state let grid = Array(gridHeight).fill(0).map(() => Array(gridWidth).fill(0)); let currentPiece = randomTetromino(); let nextPiece = randomTetromino(); let score = 0; let speed = 1000; // Initial speed in milliseconds let lastMoveTime = Date.now(); // Draw the game grid Grid() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < gridHeight; y++) { for (let x = 0; x < gridWidth; x++) { if (grid[y][x] === 1) { ctx.fillStyle = 'black'; ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize); } } } } // Draw the current piece function drawCurrentPiece() { for (let y = 0; y < currentPiece.shape.length; y++) { for (let x = 0; x < currentPiece.shape[y].length; x++) { if (currentPiece.shape[y][x] === 1) { ctx.fillStyle = 'red'; ctx.fillRect((currentPiece.x + x) * cellSize, (currentPiece.y + y) * cellSize, cellSize, cellSize); } } } } // Draw the next piece function drawNextPiece() { const nextPieceCanvas = document.getElementById('next-piece'); nextPieceCanvas.innerHTML = ''; for (let y = 0; y < nextPiece.shape.length; y++) { for (let x = 0; x < nextPiece.shape[y].length; x++) { if (nextPiece.shape[y][x] === 1) { const piece = document.createElement('div'); piece.style.width = cellSize + 'px'; piece.style.height = cellSize + 'px'; piece.style.display = 'inline-block'; piece.style.background = 'black'; nextPieceCanvas.appendChild(piece); } else { const piece = document('div'); piece.style.width = cellSize + 'px'; piece.style.height = cellSize + 'px'; piece.style.display = 'inline-block'; piece.style.border = '1px solid gray'; nextPieceCanvas.appendChild(piece); } } const br = document.createElement('br'); nextPieceCanvas.appendChild(br); } } // Update the game state function update() { const now = Date.now(); if (now - lastMoveTime >= speed) { lastMoveTime = now; moveDown(); } } // Move the current piece down function moveDown() { if (canMove(currentPiece, 0, 1)) { currentPiece.y++; } else { placePiece(currentPiece); currentPiece = nextPiece; nextPiece = randomTetromino(); checkForClears(); } drawGrid(); drawCurrentPiece(); drawNextPiece(); document.getElementById('score').innerText = 'Score: ' + score; } // Move the current piece left or right function move(dx) { if (canMove(currentPiece, dx, 0)) { currentPiece.x += dx; } drawGrid(); drawCurrentPiece(); } // Rotate the current piece function rotate() { const newShape = rotateShape(currentPiece.shape); const newPiece = { shape: newShape, x: currentPiece.x, y: currentPiece.y }; if (canMove(newPiece, 0, 0)) { currentPiece = newPiece; } drawGrid(); drawCurrentPiece(); } // Check if a piece can be moved function canMove(piece, dx, dy) { for (let y = 0; y < piece.shape.length; y++) { for (let x = 0; x < piece.shape[y].length; x++) { if (piece.shape[y][x] === 1) { const newX = piece.x + x + dx; const newY = piece.y + y + dy; if (newX < 0 || newX >= gridWidth || newY < 0 || newY >= gridHeight || grid[newY][newX] === 1) { return false; } } } } return true; } // Place a piece in the grid function placePiece(piece) { for (let y = 0; y < piece.shape.length; y++) { for (let x = 0; x < piece.shape[y].length; x++) { if (piece.shape[y][x] === 1) { grid[piece.y + y][piece.x + x] = 1; } } } } // Check for and clear full lines function checkForClears() { for (let y = 0; y < gridHeight; y++) { let full = true; for (let x = 0; x < gridWidth; x++) { if (grid[y][x] === 0) { full = false; break; } } if (full) { grid.splice(y, 1); grid.unshift(Array(gridWidth).fill(0)); score++; speed *= 0.9; // Increase speed } } } // Randomly generate a tetromino function randomTetromino() { const type = Math.floor(Math.random() * tetrominoes.length); const shape = tetrominoes[type]; return { shape, x: Math.floor(gridWidth / 2) - Math.floor(shape[0].length / 2), y: 0 }; } // Rotate a shape function rotateShape(shape) { return shape[0].map((_, colIndex) => shape.map(row => row[colIndex]).reverse()); } // Handle keyboard input document.addEventListener('keydowne) => { switch (e.key) { case 'ArrowLeft': move(-1); break; case 'ArrowRight': move(1); break; case 'ArrowDown': moveDown(); break; case 'ArrowUp': rotate(); break; } }); // Initialize the game drawGrid(); drawCurrentPiece(); drawNextPiece(); // Main game loop setInterval(update, 16); // 16ms = 60fps </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.