Simple HTML Tetris Game: Build and Play Now
Simple HTML Tetris Game
This is a straightforward Tetris game built with HTML, CSS, and JavaScript. You can play it directly from your browser. Below is the source code.
<!DOCTYPE html>
<html>
<head>
<title>Tetris Game</title>
<style>
body {
margin: 0;
padding: 0;
}
#game-board {
border: 1px solid black;
height: 400px;
width: 200px;
margin: 15px auto;
position: relative;
}
#score {
text-align: center;
font-size: 36px;
margin-top: 15px;
}
.block {
height: 20px;
width: 20px;
position: absolute;
border: 1px solid black;
background-color: blue;
}
</style>
</head>
<body>
<div id="game-board"></div>
<div id="score">0</div>
<script>
var board = document.getElementById("game-board");
var score = document.getElementById("score");
var scoreValue = 0;
var interval;
var shapes = [
[
[1, 1],
[1, 1]
],
[
[0, 2, 0],
[2, 2, 2]
],
[
[0, 3, 3],
[3, 3, 0]
],
[
[4, 4, 0],
[0, 4, 4]
],
[
[0, 5, 0],
[5, 5, 5]
],
[
[6, 0, 0],
[6, 6, 6]
],
[
[0, 0, 7],
[7, 7, 7]
]
];
function createBlock(x, y, shape) {
var block = document.createElement("div");
block.className = "block";
block.style.top = y * 20 + "px";
block.style.left = x * 20 + "px";
block.style.backgroundColor = getColor(shape);
board.appendChild(block);
}
function getColor(shape) {
switch (shape) {
case 1:
return "blue";
case 2:
return "orange";
case 3:
return "green";
case 4:
return "purple";
case 5:
return "red";
case 6:
return "yellow";
case 7:
return "pink";
}
}
function startGame() {
var currentShape = getRandomShape();
var x = 0;
var y = 0;
var gameBoard = createGameBoard();
drawShape(currentShape, x, y);
interval = setInterval(function() {
y++;
if (checkCollision(gameBoard, currentShape, x, y)) {
y--;
clearInterval(interval);
currentShape = getRandomShape();
x = 0;
y = 0;
drawShape(currentShape, x, y);
gameBoard = createGameBoard();
updateScore();
} else {
removeShape(currentShape, x, y - 1);
drawShape(currentShape, x, y);
}
}, 500);
}
function createGameBoard() {
var gameBoard = new Array(20);
for (var i = 0; i < 20; i++) {
gameBoard[i] = new Array(10);
for (var j = 0; j < 10; j++) {
gameBoard[i][j] = 0;
}
}
return gameBoard;
}
function drawShape(shape, x, y) {
for (var i = 0; i < shape.length; i++) {
for (var j = 0; j < shape[i].length; j++) {
if (shape[i][j] > 0) {
createBlock(j + x, i + y, shape[i][j]);
}
}
}
}
function removeShape(shape, x, y) {
for (var i = 0; i < shape.length; i++) {
for (var j = 0; j < shape[i].length; j++) {
if (shape[i][j] > 0) {
removeBlock(j + x, i + y);
}
}
}
}
function removeBlock(x, y) {
var blocks = board.getElementsByClassName("block");
for (var i = 0; i < blocks.length; i++) {
if (blocks[i].style.top === y * 20 + "px" && blocks[i].style.left === x * 20 + "px") {
board.removeChild(blocks[i]);
}
}
}
function checkCollision(gameBoard, shape, x, y) {
for (var i = 0; i < shape.length; i++) {
for (var j = 0; j < shape[i].length; j++) {
if (shape[i][j] > 0) {
if (y + i >= 20 || x + j < 0 || x + j >= 10 || gameBoard[y + i][x + j] > 0) {
return true;
}
}
}
}
return false;
}
function getRandomShape() {
var randomIndex = Math.floor(Math.random() * shapes.length);
return shapes[randomIndex];
}
function updateScore() {
scoreValue += 10;
score.innerHTML = scoreValue;
}
document.addEventListener("keydown", function(event) {
if (event.key === "ArrowLeft") {
moveLeft();
} else if (event.key === "ArrowRight") {
moveRight();
} else if (event.key === "ArrowDown") {
moveDown();
} else if (event.key === "ArrowUp") {
rotate();
}
});
function moveLeft() {
var currentBlocks = board.getElementsByClassName("block");
var canMove = true;
for (var i = 0; i < currentBlocks.length; i++) {
var left = parseInt(currentBlocks[i].style.left);
if (left === 0) {
canMove = false;
} else {
var top = parseInt(currentBlocks[i].style.top);
if (gameBoard[top / 20][left / 20 - 1] > 0) {
canMove = false;
}
}
}
if (canMove) {
for (var i = 0; i < currentBlocks.length; i++) {
var left = parseInt(currentBlocks[i].style.left);
currentBlocks[i].style.left = left - 20 + "px";
}
}
}
function moveRight() {
var currentBlocks = board.getElementsByClassName("block");
var canMove = true;
for (var i = 0; i < currentBlocks.length; i++) {
var left = parseInt(currentBlocks[i].style.left);
if (left === 180) {
canMove = false;
} else {
var top = parseInt(currentBlocks[i].style.top);
if (gameBoard[top / 20][left / 20 + 1] > 0) {
canMove = false;
}
}
}
if (canMove) {
for (var i = 0; i < currentBlocks.length; i++) {
var left = parseInt(currentBlocks[i].style.left);
currentBlocks[i].style.left = left + 20 + "px";
}
}
}
function moveDown() {
clearInterval(interval);
var currentShape = getCurrentShape();
var x = getCurrentX();
var y = getCurrentY();
while (!checkCollision(gameBoard, currentShape, x, y + 1)) {
y++;
}
drawShape(currentShape, x, y);
interval = setInterval(function() {
y++;
if (checkCollision(gameBoard, currentShape, x, y)) {
y--;
clearInterval(interval);
currentShape = getRandomShape();
x = 0;
y = 0;
drawShape(currentShape, x, y);
gameBoard = createGameBoard();
updateScore();
startGame();
} else {
removeShape(currentShape, x, y - 1);
drawShape(currentShape, x, y);
}
}, 500);
}
function getCurrentShape() {
var currentBlocks = board.getElementsByClassName("block");
var shape = new Array(2);
for (var i = 0; i < shape.length; i++) {
shape[i] = new Array(2);
for (var j = 0; j < shape[i].length; j++) {
shape[i][j] = 0;
}
}
for (var i = 0; i < currentBlocks.length; i++) {
var left = parseInt(currentBlocks[i].style.left);
var top = parseInt(currentBlocks[i].style.top);
shape[top / 20][left / 20] = getColorValue(currentBlocks[i].style.backgroundColor);
}
return shape;
}
function getCurrentX() {
var currentBlocks = board.getElementsByClassName("block");
var minX = 10;
for (var i = 0; i < currentBlocks.length; i++) {
var left = parseInt(currentBlocks[i].style.left);
if (left < minX) {
minX = left;
}
}
return minX / 20;
}
function getCurrentY() {
var currentBlocks = board.getElementsByClassName("block");
var maxY = 0;
for (var i = 0; i < currentBlocks.length; i++) {
var top = parseInt(currentBlocks[i].style.top);
if (top > maxY) {
maxY = top;
}
}
return maxY / 20;
}
function getColorValue(color) {
switch (color) {
case "blue":
return 1;
case "orange":
return 2;
case "green":
return 3;
case "purple":
return 4;
case "red":
return 5;
case "yellow":
return 6;
case "pink":
return 7;
}
}
function rotate() {
var currentShape = getCurrentShape();
var rotatedShape = rotateShape(currentShape);
var x = getCurrentX();
var y = getCurrentY();
if (!checkCollision(gameBoard, rotatedShape, x, y)) {
removeShape(currentShape, x, y);
drawShape(rotatedShape, x, y);
}
}
function rotateShape(shape) {
var rotatedShape = new Array(shape[0].length);
for (var i = 0; i < rotatedShape.length; i++) {
rotatedShape[i] = new Array(shape.length);
for (var j = 0; j < rotatedShape[i].length; j++) {
rotatedShape[i][j] = shape[shape.length - j - 1][i];
}
}
return rotatedShape;
}
startGame();
</script>
</body>
</html>
To play the game, simply open the HTML file in a web browser. Use the arrow keys to move the Tetrominoes and try to create complete lines to score points. Have fun!
原文地址: https://www.cveoy.top/t/topic/lmo2 著作权归作者所有。请勿转载和采集!