Tetris Game

{"name":"Tetris","description":"Just like tetris.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/zfocbspgyxn6znjgzdsi","view_count":7,"fork_count":2,"expires_at":null,"created_at":"2025-05-03T21:12:54.663811Z","updated_at":"2025-05-03T21:12:54.663813Z","user_id":647,"status":"PUBLIC","parent_id":null,"id":7750,"user":{"photo":null,"email":null,"recess_id":"d0315104-ac44-4ee3-9145-56e7e12c3a03","created_at":"2025-04-29T23:01:46.022681Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"Caleb_Industries","id":647,"password_hash":null,"updated_at":"2025-04-29T23:01:46.022685Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"const ROWS = 18;\n\nconst COLUMNS = 10;\n\nconst BLOCK_SIZE = 30;\n\nlet score = 0;\n\nlet level = 1;\n\nlet linesCleared = 0;\n\nconst colors = ['#FF5733', '#33FF57', '#3357FF', '#F5FF33', '#F533FF', '#33FFF5', '#F53357'];\n\nlet grid = Array.from({ length: ROWS }, () => Array(COLUMNS).fill(null));\n\nlet currentPiece = null;\n\nlet gameOver = false;\n\nconst canvasWidth = COLUMNS * BLOCK_SIZE;\n\nconst canvasHeight = ROWS * BLOCK_SIZE;\n\nconst canvas = document.getElementById('gameCanvas');\n\nconst ctx = canvas.getContext('2d');\n\nlet fallInterval = 1000;\n\nlet lastFallTime = 0;\n\nlet nextPiece = createPiece();\n\nconst nextPieceCanvas = document.getElementById('nextPieceCanvas');\n\nconst nextPieceCtx = nextPieceCanvas.getContext('2d');\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n drawGrid();\n drawPiece(currentPiece);\n\n // Draw the next piece beneath the score\n drawNextPiece();\n\n if (gameOver) {\n ctx.fillStyle = 'red';\n ctx.font = '40px Arial';\n ctx.fillText('Game Over', canvas.width / 4, canvas.height / 2);\n }\n\n // Update score and level display\n document.getElementById('score').textContent = `Score: ${score}`;\n document.getElementById('level').textContent = `Level: ${level}`;\n}\n\nfunction drawGrid() {\n for (let row = 0; row < ROWS; row++) {\n for (let col = 0; col < COLUMNS; col++) {\n if (grid[row][col]) {\n ctx.fillStyle = grid[row][col];\n ctx.fillRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);\n }\n }\n }\n}\n\nfunction drawPiece(piece) {\n piece.shape.forEach(([row, col]) => {\n ctx.fillStyle = piece.color;\n ctx.fillRect((piece.x + col) * BLOCK_SIZE, (piece.y + row) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);\n });\n}\n\nfunction isValidMove(piece) {\n return piece.shape.every(([row, col]) => {\n const newRow = piece.y + row;\n const newCol = piece.x + col;\n return newRow >= 0 && newRow < ROWS && newCol >= 0 && newCol < COLUMNS && !grid[newRow][newCol];\n });\n}\n\nfunction placePiece(piece) {\n piece.shape.forEach(([row, col]) => {\n grid[piece.y + row][piece.x + col] = piece.color;\n });\n}\n\nfunction removeFullRows() {\n for (let row = ROWS - 1; row >= 0; row--) {\n if (grid[row].every(cell => cell !== null)) {\n grid.splice(row, 1);\n grid.unshift(Array(COLUMNS).fill(null));\n linesCleared++;\n score += 100; // Increase score for each line cleared\n if (linesCleared % 10 === 0) {\n level++;\n }\n }\n }\n}\n\nfunction createPiece() {\n const shapes = [\n { shape: [[1, 0], [1, 1], [1, 2], [1, 3]], color: colors[0] }, // I\n { shape: [[0, 0], [1, 0], [2, 0], [2, 1]], color: colors[1] }, // L\n { shape: [[0, 1], [1, 1], [2, 1], [2, 0]], color: colors[2] }, // J\n { shape: [[0, 0], [0, 1], [1, 1], [1, 0]], color: colors[3] }, // O\n { shape: [[0, 1], [1, 1], [1, 0], [2, 0]], color: colors[4] }, // T\n { shape: [[1, 0], [1, 1], [0, 1], [0, 2]], color: colors[5] }, // Z\n { shape: [[0, 0], [0, 1], [1, 1], [1, 2]], color: colors[6] }, // S\n ];\n\n const randomShape = shapes[Math.floor(Math.random() * shapes.length)];\n return { ...randomShape, x: 4, y: 0 }; // Starting position at the top center\n}\n\nfunction rotatePiece() {\n const rotatedShape = currentPiece.shape.map(([row, col]) => [-col, row]);\n const rotatedPiece = { ...currentPiece, shape: rotatedShape };\n if (isValidMove(rotatedPiece)) {\n currentPiece = rotatedPiece;\n }\n}\n\nfunction movePieceLeft() {\n currentPiece.x -= 1;\n if (!isValidMove(currentPiece)) {\n currentPiece.x += 1;\n }\n}\n\nfunction movePieceRight() {\n currentPiece.x += 1;\n if (!isValidMove(currentPiece)) {\n currentPiece.x -= 1;\n }\n}\n\ndocument.addEventListener('keydown', (e) => {\n switch (e.key) {\n case 'ArrowLeft':\n movePieceLeft();\n break;\n case 'ArrowRight':\n movePieceRight();\n break;\n case 'ArrowDown':\n movePieceDown();\n break;\n case 'ArrowUp':\n rotatePiece();\n break;\n }\n});\n\ncurrentPiece = createPiece();\n\ngameLoop();\n\ncanvas.width = canvasWidth;\n\ncanvas.height = canvasHeight;\n\nfunction gameLoop(timestamp) {\n if (!gameOver) {\n if (timestamp - lastFallTime >= fallInterval) { // Check if enough time has passed\n movePieceDown();\n lastFallTime = timestamp; // Update the time of the last drop\n }\n draw();\n requestAnimationFrame(gameLoop); // Use requestAnimationFrame for smoother animations\n }\n}\n\nrequestAnimationFrame(gameLoop);\n\nfunction movePieceDown() {\n currentPiece.y += 1;\n if (!isValidMove(currentPiece)) {\n currentPiece.y -= 1;\n placePiece(currentPiece);\n removeFullRows();\n currentPiece = nextPiece; // Set the next piece as the current piece\n nextPiece = createPiece(); // Generate a new next piece\n if (!isValidMove(currentPiece)) {\n gameOver = true;\n }\n } else {\n score += 1; // Increase score for moving the piece down\n }\n}\n\nfunction drawNextPiece() {\n nextPieceCtx.clearRect(0, 0, nextPieceCanvas.width, nextPieceCanvas.height); // Clear previous drawing\n const offsetX = 1; // Center the piece in the smaller canvas\n const offsetY = 1;\n\n nextPiece.shape.forEach(([row, col]) => {\n nextPieceCtx.fillStyle = nextPiece.color;\n nextPieceCtx.fillRect((offsetX + col) * BLOCK_SIZE, (offsetY + row) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);\n });\n}\n\n","style.css":"body {\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n background-color: #111;\n overflow: hidden;\n}\n\n#gameContainer {\n display: flex;\n align-items: flex-start;\n}\n\ncanvas {\n border: 1px solid #fff;\n background-color: #222;\n margin-top: 10px;\n}\n\n#infoContainer {\n display: flex;\n flex-direction: column;\n margin-left: 20px;\n}\n\n#score,\n#level {\n color: white;\n font-size: 20px;\n margin: 5px 0;\n}\n\n#nextPieceCanvas {\n margin-top: 10px;\n}","index.html":"\n\n\n\n \n \n Tetris Game\n \n\n\n\n\n

Score: 0

Level: 1

\n\n \n\n\n\n"},"chat_history":[{"deleted":0,"code_id":239012,"sender":"human","input_tokens":null,"id":139577,"message":"raise the floor of the game area","project_id":7750,"created_at":"2025-04-30T00:03:28.174492Z","output_tokens":null},{"deleted":0,"code_id":239012,"sender":"ai","input_tokens":4076,"id":139578,"message":"

\n# Reasoning\nRaising the floor of the game area means increasing the starting height of the grid, effectively reducing the playable space. This adjustment can make the game more challenging by giving players less room to maneuver new pieces. This is possible to implement by modifying the grid array and adjusting the `drawGrid` and `drawPiece` functions.\n

\n\n

\n# Answer: \n

\n\nRaising the floor of the game area is possible. Let's modify the code to implement this change.\n\n```javascript\n// script.js\nconst RAISED_ROWS = 4; // Number of rows to raise the floor\n```\n\n```javascript\n// script.js\nfunction drawGrid() {\n for (let row = RAISED_ROWS; row < ROWS; row++) { // Start drawing from the raised row\n for (let col = 0; col < COLUMNS; col++) {\n if (grid[row][col]) {\n ctx.fillStyle = grid[row][col];\n ctx.fillRect(col * BLOCK_SIZE, (row - RAISED_ROWS) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE); // Adjust y position\n }\n }\n }\n}\n```\n\n```javascript\n// script.js\nfunction drawPiece(piece) {\n piece.shape.forEach(([row, col]) => {\n ctx.fillStyle = piece.color;\n // Adjust y position to account for the raised floor\n ctx.fillRect((piece.x + col) * BLOCK_SIZE, (piece.y + row - RAISED_ROWS) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);\n });\n}\n```\n\n- Added a new global variable `RAISED_ROWS` to determine how much to raise the floor.\n- Adjusted the `drawGrid` function to start drawing from the raised row and adjusted the y position of each block.\n- Modified the `drawPiece` function to also account for the raised floor when drawing pieces.","project_id":7750,"created_at":"2025-04-30T00:03:28.572388Z","output_tokens":422}],"assets":[{"created_at":"2025-05-03T21:12:42.017101Z","name":"thumbnail","resource_type":"image","tags":null,"project_id":7750,"creator":null,"cloudinary_id":"zfocbspgyxn6znjgzdsi","deleted":false,"id":73264}],"messages_sent":26,"comments":[],"steps":[]}