HTML Tetris Game: Complete Code and Tutorial
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style>
div {
width: 40px;
height: 40px;
border: 1px solid #333;
margin: 1px;
float: left;
}
</style>
<script>
function drawBoard() {
// Create board
var board = document.getElementById('board');
for (var r = 0; r < 20; r++) {
for (var c = 0; c < 10; c++) {
var div = document.createElement('div');
div.setAttribute('id', r + '_' + c);
board.appendChild(div);
}
}
}
<pre><code>var shapes = [[0,1,0,0, 1,1,1,0, 0,0,0,0, 0,0,0,0], // T
[2,2,2,0, 0,2,0,0, 0,0,0,0, 0,0,0,0], // L
[0,3,3,0, 3,3,0,0, 0,0,0,0, 0,0,0,0], // O
[4,4,4,0, 0,0,4,0, 0,0,0,0, 0,0,0,0], // I
[0,5,5,0, 5,5,0,0, 0,0,0,0, 0,0,0,0], // S
[6,6,0,0, 0,6,6,0, 0,0,0,0, 0,0,0,0], // Z
[7,7,7,7, 0,0,0,0, 0,0,0,0, 0,0,0,0]]; // J
function drawShape(shape) {
// Create shape
for (var r = 0; r < 4; r++) {
for (var c = 0; c < 4; c++) {
var div = document.createElement('div');
div.setAttribute('id', r + '_' + c);
if (shape[r * 4 + c] !== 0) {
div.style.background = '#333';
}
board.appendChild(div);
}
}
}
var board;
var currentShape;
var currentRow;
var currentCol;
window.onload = function() {
board = document.getElementById('board');
drawBoard();
newShape();
};
function newShape() {
// Create new shape
currentShape = shapes[Math.floor(Math.random() * shapes.length)];
currentRow = 0;
currentCol = 3;
drawShape(currentShape);
}
function moveLeft() {
// Move shape left
if (!checkCollision(-1, 0, currentShape)) {
currentCol--;
drawShape(currentShape);
}
}
function moveRight() {
// Move shape right
if (!checkCollision(1, 0, currentShape)) {
currentCol++;
drawShape(currentShape);
}
}
function moveDown() {
// Move shape down
if (!checkCollision(0, 1, currentShape)) {
currentRow++;
drawShape(currentShape);
} else {
// Shape has landed
freezeShape(currentShape);
deleteFullRows();
newShape();
}
}
function freezeShape(shape) {
// Freeze shape on board
for (var r = 0; r < 4; r++) {
for (var c = 0; c < 4; c++) {
if (shape[r * 4 + c] !== 0) {
document.getElementById((currentRow + r) + '_' + (currentCol + c)).style.background = '#333';
}
}
}
}
function deleteFullRows() {
// Delete full rows
for (var r = 0; r < 20; r++) {
var full = true;
for (var c = 0; c < 10; c++) {
if (document.getElementById(r + '_' + c).style.background !== '#333') {
full = false;
break;
}
}
if (full) {
deleteRow(r);
}
}
}
function deleteRow(row) {
// Delete row
for (var r = row; r >= 0; r--) {
for (var c = 0; c < 10; c++) {
if (r === 0) {
document.getElementById(r + '_' + c).style.background = 'transparent';
} else {
document.getElementById(r + '_' + c).style.background = document.getElementById((r - 1) + '_' + c).style.background;
}
}
}
}
function checkCollision(deltaRow, deltaCol, shape) {
// Check if shape will collide
for (var r = 0; r < 4; r++) {
for (var c = 0; c < 4; c++) {
if (shape[r * 4 + c] !== 0) {
var newRow = currentRow + deltaRow + r;
var newCol = currentCol + deltaCol + c;
if (newRow >= 20 || newRow < 0 || newCol >= 10 || newCol < 0 || document.getElementById(newRow + '_' + newCol).style.background === '#333') {
return true;
}
}
}
}
return false;
}
</code></pre>
</script>
</head>
<body>
<div id='board' style='width: 400px; height: 800px; border: 1px solid #333; margin: 20px auto;'></div>
<div>
<button onclick='moveLeft()'>Left</button>
<button onclick='moveRight()'>Right</button>
<button onclick='moveDown()'>Down</button>
</div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/losB 著作权归作者所有。请勿转载和采集!