Simple HTML Tetris Game: Play Now & Learn the Code
<!DOCTYPE html>
<html>
<head>
<style>
#container{
width: 300px;
height: 600px;
position: relative;
background-color: #ccc;
border: 1px solid #000;
}
.tetris{
position: absolute;
width: 30px;
height: 30px;
border: 1px solid #000;
background-color: #ccc;
}
</style>
</head>
<body>
<h1>Tetris</h1>
<div id='container'></div>
<script>
//Define the tetrominoes
var L = [
[1, 0],
[1, 0],
[1, 1]
];
var J = [
[0, 1],
[0, 1],
[1, 1]
];
var T = [
[1, 1, 1],
[0, 1, 0]
];
var O = [
[1, 1],
[1, 1]
];
var S = [
[0, 1, 1],
[1, 1, 0]
];
var Z = [
[1, 1, 0],
[0, 1, 1]
];
var I = [
[1],
[1],
[1],
[1]
];
//Define the current piece
var currentPosition = {x: 0, y: 0};
var currentPiece;
//Define the board
var board = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
//Function to draw the board
function drawBoard(){
var container = document.getElementById('container');
for(var r = 0; r < board.length; r++){
for(var c = 0; c < board[r].length; c++){
if(board[r][c] === 0){
var tetris = document.createElement('div');
tetris.setAttribute('class', 'tetris');
container.appendChild(tetris);
}
}
}
}
//Function to set the current piece
function setPiece(){
currentPiece = Math.floor(Math.random() * 7);
if(currentPiece === 0){
currentPiece = L;
}
else if(currentPiece === 1){
currentPiece = J;
}
else if(currentPiece === 2){
currentPiece = T;
}
else if(currentPiece === 3){
currentPiece = O;
}
else if(currentPiece === 4){
currentPiece = S;
}
else if(currentPiece === 5){
currentPiece = Z;
}
else if(currentPiece === 6){
currentPiece = I;
}
}
//Function to draw the current piece
function drawPiece(){
var container = document.getElementById('container');
for(var r = 0; r < currentPiece.length; r++){
for(var c = 0; c < currentPiece[r].length; c++){
if(currentPiece[r][c] === 1){
var tetris = document.createElement('div');
tetris.setAttribute('class', 'tetris');
tetris.style.top = (currentPosition.y + r) * 30 + 'px';
tetris.style.left = (currentPosition.x + c) * 30 + 'px';
container.appendChild(tetris);
}
}
}
}
//Function to move the piece down
function moveDown(){
currentPosition.y += 1;
drawBoard();
drawPiece();
}
//Function to move the piece left
function moveLeft(){
currentPosition.x -= 1;
drawBoard();
drawPiece();
}
//Function to move the piece right
function moveRight(){
currentPosition.x += 1;
drawBoard();
drawPiece();
}
//Function to rotate the piece
function rotate(){
//Rotate the current piece
var newPiece = [];
for(var c = 0; c < currentPiece[0].length; c++){
var row = [];
for(var r = currentPiece.length - 1; r >= 0; r--){
row.push(currentPiece[r][c]);
}
newPiece.push(row);
}
currentPiece = newPiece;
drawBoard();
drawPiece();
}
//Function to start the game
function startGame(){
setPiece();
drawBoard();
drawPiece();
}
//Start the game
startGame();
</script>
</body>
</html>
<h2>Instructions:</h2>
<ol>
<li>Use the arrow keys to move the pieces left, right, and down.</li>
<li>Use the up arrow key to rotate the pieces.</li>
<li>Try to create complete horizontal rows without any gaps.</li>
<li>When you complete a row it will be removed from the board.</li>
<li>The game ends when the pieces reach the top of the board.</li>
</ol>
原文地址: https://www.cveoy.top/t/topic/lmjz 著作权归作者所有。请勿转载和采集!