HTML Tetris Game: Play Classic Tetris Online
<html>
<head>
<title>Tetris</title>
</head>
<body>
<div>
<canvas width="480" height="480" id="tetris">
Your browser does not support HTML5 canvas.
</canvas>
</div>
<script>
var c = document.getElementById('tetris');
var ctx = c.getContext('2d');
<pre><code> ctx.fillStyle = '#000000';
ctx.fillRect(0, 0, 480, 480);
var PIECES = [
[Z, 'red'],
[S, 'green'],
[T, 'yellow'],
[O, 'blue'],
[L, 'purple'],
[I, 'cyan'],
[J, 'orange']
];
// create the pieces and their colors
var currentPiece = randomPiece();
// draw a single square at (x, y)
function drawSquare(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * 30, y * 30, 30, 30);
ctx.strokeStyle = 'black';
ctx.strokeRect(x * 30, y * 30, 30, 30);
}
// draws the current piece
function draw() {
currentPiece.forEach(function(index) {
drawSquare(index.x, index.y, index.color);
});
}
// generates random pieces
function randomPiece() {
var r = PIECES[(Math.random() * PIECES.length) | 0];
return new Piece(r[0], r[1]);
}
// The Piece constructor
function Piece(tetromino, color) {
this.tetromino = tetromino;
this.color = color;
this.tetrominoN = 0;
this.activeTetromino = this.tetromino[this.tetrominoN];
// we need to control the pieces
this.x = 3;
this.y = -2;
}
// fill function
Piece.prototype.fill = function(color) {
for (var i = 0; i < this.activeTetromino.length; i++) {
for (var j = 0; j < this.activeTetromino.length; j++) {
// we draw only occupied squares
if (this.activeTetromino[i][j]) {
drawSquare(this.x + j, this.y + i, color);
}
}
}
}
// draw a piece to the board
Piece.prototype.draw = function() {
this.fill(this.color);
}
// undraw a piece
Piece.prototype.unDraw = function() {
this.fill(VACANT);
}
// move Down the piece
Piece.prototype.moveDown = function() {
if (!this.collision(0, 1, this.activeTetromino)) {
this.unDraw();
this.y++;
this.draw();
} else {
// we lock the piece and generate a new one
this.lock();
currentPiece = randomPiece();
}
}
// move Right the piece
Piece.prototype.moveRight = function() {
if (!this.collision(1, 0, this.activeTetromino)) {
this.unDraw();
this.x++;
this.draw();
}
}
// move Left the piece
Piece.prototype.moveLeft = function() {
if (!this.collision(-1, 0, this.activeTetromino)) {
this.unDraw();
this.x--;
this.draw();
}
}
// rotate the piece
Piece.prototype.rotate = function() {
var nextPattern = this.tetromino[
(this.tetrominoN + 1) % this.tetromino.length
];
var kick = 0;
if (this.collision(0, 0, nextPattern)) {
if (this.x > COL / 2) {
// it's the right wall
kick = -1; // we need to move the piece to the left
} else {
// it's the left wall
kick = 1; // we need to move the piece to the right
}
}
if (!this.collision(kick, 0, nextPattern)) {
this.unDraw();
this.x += kick;
this.tetrominoN = (this.tetrominoN + 1) % this.tetromino.length;
this.activeTetromino = this.tetromino[this.tetrominoN];
this.draw();
}
}
// lock the piece
Piece.prototype.lock = function() {
for (var i = 0; i < this.activeTetromino.length; i++) {
for (var j = 0; j < this.activeTetromino.length; j++) {
// we skip the vacant squares
if (!this.activeTetromino[i][j]) {
continue;
}
// pieces to lock on top = game over
if (this.y + i < 0) {
alert('Game Over');
// stop request animation frame
gameOver = true;
break;
}
// we lock the piece
board[this.y + i][this.x + j] = this.color;
}
}
}
// collision fucntion
Piece.prototype.collision = function(x, y, piece) {
for (var i = 0; i < piece.length; i++) {
for (var j = 0; j < piece.length; j++) {
// if the square is empty, we skip it
if (!piece[i][j]) {
continue;
}
// coordinates of the piece after movement
var newX = this.x + j + x;
var newY = this.y + i + y;
// conditions
if (newX < 0 || newX >= COL || newY >= ROW) {
return true;
}
// skip newY < 0; board[-1] will crush our game
if (newY < 0) {
continue;
}
// check if there is a locked piece alrady in place
if (board[newY][newX] != VACANT) {
return true;
}
}
}
return false;
}
// CONTROL the piece
document.addEventListener('keydown', CONTROL);
function CONTROL(event) {
if (event.keyCode == 37) {
currentPiece.moveLeft();
dropStart = Date.now();
} else if (event.keyCode == 38) {
currentPiece.rotate();
dropStart = Date.now();
} else if (event.keyCode == 39) {
currentPiece.moveRight();
dropStart = Date.now();
} else if (event.keyCode == 40) {
currentPiece.moveDown();
}
}
// drop the piece every 1sec
var dropStart = Date.now();
var gameOver = false;
function drop() {
var now = Date.now();
var delta = now - dropStart;
if (delta > 1000) {
currentPiece.moveDown();
dropStart = Date.now();
}
if (!gameOver) requestAnimationFrame(drop);
}
drop();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmeL 著作权归作者所有。请勿转载和采集!