Complete HTML Tetris Game Code: Build Your Own Classic
<!DOCTYPE html>
<html>
<head>
<title>Tetris Game</title>
<style>
#canvas{
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h1>Tetris</h1>
<canvas id='canvas' width='400' height='600'></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var score = 0;
var lines = 0;
var level = 1;
var interval;
<pre><code> // The pieces and their colors
var PIECES = [
[Z, 'red'],
[S, 'green'],
[T, 'yellow'],
[O, 'blue'],
[L, 'purple'],
[I, 'cyan'],
[J, 'orange']
];
// Initialize the game
function init() {
drawBoard();
newPiece();
interval = setInterval(drop, 1000);
}
// Draw the board
function drawBoard() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = '#fff';
ctx.strokeRect(1, 1, canvas.width - 2, canvas.height - 2);
}
// Generate a new piece
function newPiece() {
// Get a random piece
var r = randomPiece();
current = new Piece(PIECES[r][0], PIECES[r][1]);
current.draw();
}
// Move the piece
function move(dir) {
current.clear();
current.x += dir;
current.draw();
}
// Rotate the piece
function rotate() {
current.clear();
current.rotate();
current.draw();
}
// Drop the piece
function drop() {
current.clear();
current.y++;
current.draw();
}
// Piece constructor
function Piece(tetromino, color) {
this.tetromino = tetromino;
this.color = color;
// Starting position
this.x = 3;
this.y = -2;
// Rotation
this.activeTetromino = 0;
}
// Draw the piece
Piece.prototype.draw = function() {
for (var r = 0; r < this.tetromino[this.activeTetromino].length; r++) {
for (var c = 0; c < this.tetromino[this.activeTetromino][r].length; c++) {
// Draw the squares
if (this.tetromino[this.activeTetromino][r][c]) {
ctx.fillStyle = this.color;
ctx.fillRect(this.x + c, this.y + r, 1, 1);
}
}
}
}
// Clear the piece
Piece.prototype.clear = function() {
for (var r = 0; r < this.tetromino[this.activeTetromino].length; r++) {
for (var c = 0; c < this.tetromino[this.activeTetromino][r].length; c++) {
// Clear the squares
if (this.tetromino[this.activeTetromino][r][c]) {
ctx.clearRect(this.x + c, this.y + r, 1, 1);
}
}
}
}
// Rotate the piece
Piece.prototype.rotate = function() {
this.activeTetromino = (this.activeTetromino + 1) % this.tetromino.length;
}
// Get a random piece
function randomPiece() {
return Math.floor(Math.random() * PIECES.length);
}
// Control the piece
document.addEventListener('keydown', CONTROL);
function CONTROL(event) {
if (event.keyCode == 37) {
move(-1);
} else if (event.keyCode == 39) {
move(1);
} else if (event.keyCode == 40) {
drop();
} else if (event.keyCode == 38) {
rotate();
}
}
// Start the game
init();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/losy 著作权归作者所有。请勿转载和采集!