HTML Tetris Game: Build a Classic Puzzle Game
<!DOCTYPE html>/n<html>/n<head>/n <title>Tetris</title>/n <style>/n body {/n font-family: sans-serif;/n font-size: 0.9em;/n }/n #game {/n margin: auto;/n width: 400px;/n height: 600px;/n border: 1px solid #CCC;/n }/n #game td {/n width: 20px;/n height: 20px;/n background-color: #FFF;/n border: 1px solid #CCC;/n }/n #game td.filled {/n background-color: #00F;/n }/n #status {/n margin: auto;/n width: 400px;/n text-align: center;/n }/n </style>/n <script>/n var game;/n var score = 0;/n var level = 1;/n var tetrominoes = [/n [[1,1], [1,1]],/n [[1,1,1], [0,1,0]],/n [[1,1,1], [1,0,0]],/n [[1,1,1], [0,0,1]],/n [[0,1,1], [1,1,0]],/n [[1,0,0], [1,1,1]],/n [[0,0,1], [1,1,1]]/n ];/n var currentTetromino;/n var currentPosition;/n // Run once the page is loaded/n window.onload = function() {/n game = document.getElementById('game');/n newGame();/n }/n // Start a new game/n function newGame() {/n score = 0;/n level = 1;/n currentTetromino = randomTetromino();/n currentPosition = {x: 4, y: 0};/n drawGame();/n }/n // Get a random tetromino/n function randomTetromino() {/n var r = Math.floor(Math.random() * tetrominoes.length);/n return tetrominoes[r];/n }/n // Draw the game/n function drawGame() {/n // Clear the board/n game.innerHTML = '';/n // Draw the board/n for (var y=0; y<20; y++) {/n var row = document.createElement('tr');/n for (var x=0; x<10; x++) {/n var cell = document.createElement('td');/n row.appendChild(cell);/n if (gameArray[y][x] == 1) {/n cell.className = 'filled';/n }/n }/n game.appendChild(row);/n }/n // Draw the tetromino/n for (var y=0; y<currentTetromino.length; y++) {/n for (var x=0; x<currentTetromino[y].length; x++) {/n if (currentTetromino[y][x]) {/n game.childNodes[currentPosition.y + y].childNodes[currentPosition.x + x].className = 'filled';/n }/n }/n }/n // Update the status/n document.getElementById('status').innerHTML = 'Score: ' + score + ' | Level: ' + level;/n }/n // Move the tetromino/n function move(dx, dy) {/n if (canMove(dx, dy)) {/n currentPosition.x += dx;/n currentPosition.y += dy;/n }/n drawGame();/n }/n // Check if the tetromino can move/n function canMove(dx, dy) {/n for (var y=0; y<currentTetromino.length; y++) {/n for (var x=0; x<currentTetromino[y].length; x++) {/n if (currentTetromino[y][x]) {/n var newX = currentPosition.x + x + dx;/n var newY = currentPosition.y + y + dy;/n if (newX < 0 || newX >= 10 || newY >= 20 || gameArray[newY][newX] == 1) {/n return false;/n }/n }/n }/n }/n return true;/n }/n // Rotate the tetromino/n function rotate() {/n var newTetromino = [];/n for (var y=0; y<currentTetromino.length; y++) {/n newTetromino[y] = [];/n for (var x=0; x<currentTetromino[y].length; x++) {/n newTetromino[y][x] = currentTetromino[currentTetromino[y].length - x - 1][y];/n }/n }/n if (canRotate(newTetromino)) {/n currentTetromino = newTetromino;/n }/n drawGame();/n }/n // Check if the tetromino can rotate/n function canRotate(newTetromino) {/n for (var y=0; y<newTetromino.length; y++) {/n for (var x=0; x<newTetromino[y].length; x++) {/n if (newTetromino[y][x]) {/n var newX = currentPosition.x + x;/n var newY = currentPosition.y + y;/n if (newX < 0 || newX >= 10 || newY >= 20 || gameArray[newY][newX] == 1) {/n return false;/n }/n }/n }/n }/n return true;/n }/n // Drop the tetromino/n function drop() {/n while(canMove(0, 1)) {/n move(0, 1);/n }/n addToBoard();/n checkLines();/n currentTetromino = randomTetromino();/n currentPosition = {x: 4, y: 0};/n if (!canMove(0, 0)) {/n endGame();/n }/n drawGame();/n }/n // Add the tetromino to the board/n function addToBoard() {/n for (var y=0; y<currentTetromino.length; y++) {/n for (var x=0; x<currentTetromino[y].length; x++) {/n if (currentTetromino[y][x]) {/n gameArray[currentPosition.y + y][currentPosition.x + x] = 1;/n }/n }/n }/n }/n // Check if there are any full lines/n function checkLines() {/n for (var y=0; y<20; y++) {/n var rowFilled = true;/n for (var x=0; x<10; x++) {/n if (gameArray[y][x] == 0) {/n rowFilled = false;/n break;/n }/n }/n if (rowFilled) {/n removeLine(y);/n score += 10;/n if (score % 100 == 0) {/n level++;/n }/n }/n }/n }/n // Remove a line/n function removeLine(line) {/n for (var y=line; y>0; y--) {/n for (var x=0; x<10; x++) {/n gameArray[y][x] = gameArray[y-1][x];/n }/n }/n }/n // End the game/n function endGame() {/n alert('Game Over!/nScore: ' + score + '/nLevel: ' + level);/n newGame();/n }/n // Create an empty game array/n var gameArray = [];/n for (var y=0; y<20; y++) {/n gameArray[y] = [];/n for (var x=0; x<10; x++) {/n gameArray[y][x] = 0;/n }/n }/n </script>/n</head>/n<body>/n <table id=/'game/'></table>/n <div id=/'status/'></div>/n <div>/n <input type=/'button/' value=/'New Game/' onclick=/'newGame()/' />/n <input type=/'button/' value=/'▲/' onclick=/'rotate()/' />/n <input type=/'button/' value=/'←/' onclick=/'move(-1, 0)/' />/n <input type=/'button/' value=/
原文地址: https://www.cveoy.top/t/topic/lmka 著作权归作者所有。请勿转载和采集!