Make a tetris with html and javascript.テトリスを1分で作ってみた

エル先生

Building a Tetris game using HTML and JavaScript is a bit more complex than the previous examples. Here's a simplified version of Tetris that you can start with:

<!DOCTYPE html> <html> <head> <title>Tetris</title> <style> #game -board { display: grid; grid-template-columns: repeat(10, 30px); grid-template-rows: repeat(20, 30px); width: 300px; height: 600px; border: 1px solid #000 ; background-color: #f0f0f0 ; } .cell { width: 100%; height: 100%; border: 1px solid #ccc ; background-color: #fff ; } </style> </head> <body> <h1>Tetris</h1> <div id="game-board"></div> <script> // Game Variables const boardWidth = 10; const boardHeight = 20; const cellSize = 30; const gameBoard = document.getElementById('game-board'); const board = createBoard(); let currentPiece = getRandomPiece(); let interval; // Create the game board function createBoard() { const board = []; for (let row = 0; row < boardHeight; row++) { board[row] = []; for (let col = 0; col < boardWidth; col++) { board[row][col] = 0; } } return board; } // Render the game board function renderBoard() { gameBoard.innerHTML = ''; board.forEach((row, rowIndex) => { row.forEach((cell, colIndex) => { const div = document.createElement('div'); div.className = cell === 1 ? 'cell filled' : 'cell'; div.style.top = rowIndex * cellSize + 'px'; div.style.left = colIndex * cellSize + 'px'; gameBoard.appendChild(div); }); }); } // Move the current piece down function moveDown() { if (isValidMove(1, 0)) { currentPiece.row++; } else { mergePiece(); clearLines(); currentPiece = getRandomPiece(); if (!isValidMove(0, 0)) { // Game over clearInterval(interval); alert('Game over!'); } } renderBoard(); } // Move the current piece left function moveLeft() { if (isValidMove(0, -1)) { currentPiece.col--; renderBoard(); } } // Move the current piece right function moveRight() { if (isValidMove(0, 1)) { currentPiece.col++; renderBoard(); } } // Rotate the current piece function rotatePiece() { const rotatedPiece = []; for (let row = 0; row < currentPiece.piece.length; row++) { rotatedPiece[row] = []; for (let col = 0; col < currentPiece.piece[row].length; col++) { rotatedPiece[row][col] = currentPiece.piece[col][row]; } } currentPiece.piece = rotatedPiece; if (!isValidMove(0, 0)) { // Revert the rotation const previousPiece = currentPiece.piece; currentPiece.piece = rotatedPiece; if (currentPiece.col + currentPiece.piece[0].length > boardWidth) { currentPiece

currentPiece.col = boardWidth - currentPiece.piece[0].length; } else if (currentPiece.col < 0) { currentPiece.col = 0; } } renderBoard(); } // Check if a move is valid function isValidMove(rowOffset, colOffset) { for (let row = 0; row < currentPiece.piece.length; row++) { for (let col = 0; col < currentPiece.piece[row].length; col++) { if ( currentPiece.piece[row][col] && (board[currentPiece.row + row + rowOffset] === undefined || board[currentPiece.row + row + rowOffset][currentPiece.col + col + colOffset] === undefined || board[currentPiece.row + row + rowOffset][currentPiece.col + col + colOffset]) ) { return false; } } } return true; } // Merge the current piece into the game board function mergePiece() { for (let row = 0; row < currentPiece.piece.length; row++) { for (let col = 0; col < currentPiece.piece[row].length; col++) { if (currentPiece.piece[row][col]) { board[currentPiece.row + row][currentPiece.col + col] = 1; } } } } // Clear completed lines function clearLines() { for (let row = boardHeight - 1; row >= 0; row--) { if (board[row].every(cell => cell === 1)) { board.splice(row, 1); board.unshift(new Array(boardWidth).fill(0)); } } } // Generate a random Tetris piece function getRandomPiece() { const pieces = [ [[1, 1, 1, 1]], // I [[1, 1], [1, 1]], // O [[1, 1, 0], [0, 1, 1]], // S [[0, 1, 1], [1, 1, 0]], // Z [[1, 1, 1], [0, 1, 0]], // T [[1, 1, 1], [0, 0, 1]], // L [[1, 1, 1], [1, 0, 0]], // J ]; const piece = pieces[Math.floor(Math.random() * pieces.length)]; const col = Math.floor((boardWidth - piece[0].length) / 2); return { piece, row: 0, col }; } // Event listeners for user input document.addEventListener('keydown', event => { switch (event.code) { case 'ArrowDown': moveDown(); break; case 'ArrowLeft': moveLeft(); break; case 'ArrowRight': moveRight(); break; case 'ArrowUp': rotatePiece(); break; } }); // Start the game interval = setInterval(moveDown, 1000); </script> </body> </html>

最後にこんなことが書かれてあった。

This is a simplified version of Tetris using basic HTML and JavaScript. It provides the basic functionality of moving and rotating pieces, merging them into the game board, clearing completed lines, and checking for game over conditions. You can further enhance the game by adding score tracking, level progression, and more complex gameplay mechanics.

Please note that this version of Tetris is not optimized

だってさ。

この記事が気に入ったらサポートをしてみませんか？