HTML Tetris Game Example Code: Play Tetris in Your Browser
<!DOCTYPE html>
<html>
<head>
<script>
var canvas;
var ctx;
// declare blocks here
var block = [
[1,1,1,1],
[1,1,1,0,
1],
[1,1,1,0,
0,0,1],
[1,1,0,0,
1,1],
[1,1,0,0,
0,1,1],
[0,1,1,0,
1,1],
[0,1,0,0,
1,1,1]
];
// declare block colors here
var colors = [
'orange',
'blue',
'yellow',
'green',
'purple',
'red',
'#3f3f3f'
];
// game variables
var board = [];
var score = 0;
var level = 0;
var lines = 0;
var nextBlock = [];
var gameStarted = false;
var gameOver = false;
var interval;
var currentX = 5;
var currentY = 0;
var currentBlock = 0;
<pre><code> // main function, called when page is loaded
function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
// create empty board
for (var i=0; i<20; i++) {
board[i] = [];
for (var j=0; j<10; j++) {
board[i][j] = 0;
}
}
// draw the board
drawBoard();
// draw next block
drawNextBlock();
// generate a new block
generateNewBlock();
// start the game
interval = setInterval(tick, 1000);
}
// draw the board
function drawBoard() {
for (var i=0; i<20; i++) {
for (var j=0; j<10; j++) {
if (board[i][j] == 0) {
ctx.fillStyle = '#1f1f1f';
} else {
ctx.fillStyle = colors[board[i][j]-1];
}
ctx.fillRect(j*30,i*30,30,30);
}
}
}
// draw the next block
function drawNextBlock() {
for (var i=0; i<4; i++) {
for (var j=0; j<4; j++) {
if (block[nextBlock[0]][i*4+j] == 1) {
ctx.fillStyle = colors[nextBlock[0]];
ctx.fillRect(j*30+310,i*30+20,30,30);
}
}
}
}
// generate a new block
function generateNewBlock() {
// randomly pick a block
currentBlock = nextBlock[0];
nextBlock[0] = Math.floor(Math.random() * 7);
// reset current position
currentX = 5;
currentY = 0;
}
// tick function, called every second
function tick() {
if (gameStarted && !gameOver) {
// clear the current block
clearBlock(currentX, currentY, block[currentBlock]);
// move down
currentY += 1;
// if it collides
if (collides(currentX, currentY, block[currentBlock])) {
// move it back up
currentY -= 1;
// add it to the board
addBlock(currentX, currentY, block[currentBlock]);
// check for lines
checkLines();
// generate a new block
generateNewBlock();
// if it collides, game is over
if (collides(currentX, currentY, block[currentBlock])) {
gameOver = true;
}
}
// draw the current block
drawBlock(currentX, currentY, block[currentBlock]);
}
}
// check for lines
function checkLines() {
for (var i=0; i<20; i++) {
var line = true;
for (var j=0; j<10; j++) {
if (board[i][j] == 0) {
line = false;
}
}
if (line) {
// remove the line
for (var j=0; j<10; j++) {
board[i][j] = 0;
}
// move the lines down
for (var y=i; y>0; y--) {
for (var j=0; j<10; j++) {
board[y][j] = board[y-1][j];
}
}
// add points
score += 10;
lines += 1;
// increase level
level = Math.floor(lines/10);
// update the board
drawBoard();
// update score
document.getElementById('score').innerHTML = score;
document.getElementById('level').innerHTML = level;
}
}
}
// clear the block from the board
function clearBlock(x, y, block) {
for (var i=0; i<4; i++) {
for (var j=0; j<4; j++) {
if (block[i*4+j] == 1) {
board[y+i][x+j] = 0;
}
}
}
drawBoard();
}
// draw the block onto the board
function drawBlock(x, y, block) {
for (var i=0; i<4; i++) {
for (var j=0; j<4; j++) {
if (block[i*4+j] == 1) {
board[y+i][x+j] = currentBlock+1;
}
}
}
drawBoard();
}
// add the block to the board
function addBlock(x, y, block) {
for (var i=0; i<4; i++) {
for (var j=0; j<4; j++) {
if (block[i*4+j] == 1) {
board[y+i][x+j] = currentBlock+1;
}
}
}
drawBoard();
}
// check if the block collides
function collides(x, y, block) {
for (var i=0; i<4; i++) {
for (var j=0; j<4; j++) {
if (block[i*4+j] == 1) {
if (y+i > 19 || x+j > 9 || board[y+i][x+j] > 0) {
return true;
}
}
}
}
return false;
}
// start the game
function startGame() {
gameStarted = true;
}
// control the block
document.onkeydown = function(e) {
if (gameStarted && !gameOver) {
// clear the current block
clearBlock(currentX, currentY, block[currentBlock]);
if (e.keyCode == 37) { // left
currentX -= 1;
if (collides(currentX, currentY, block[currentBlock])) {
currentX += 1;
}
} else if (e.keyCode == 38) { // up
rotateBlock();
if (collides(currentX, currentY, block[currentBlock])) {
rotateBlockBack();
}
} else if (e.keyCode == 39) { // right
currentX += 1;
if (collides(currentX, currentY, block[currentBlock])) {
currentX -= 1;
}
} else if (e.keyCode == 40) { // down
currentY += 1;
if (collides(currentX, currentY, block[currentBlock])) {
currentY -= 1;
}
}
// draw the current block
drawBlock(
currentX,
currentY,
block[currentBlock]
);
}
};
// rotate the block
function rotateBlock() {
var newBlock = [];
for (var i=0; i<4; i++) {
for (var j=0; j<4; j++) {
newBlock[i*4+j] = block[currentBlock][(3-j)*4+i];
}
}
block[currentBlock] = newBlock;
}
// rotate the block back
function rotateBlockBack() {
var newBlock = [];
for (var i=0; i<4; i++) {
for (var j=0; j<4; j++) {
newBlock[i*4+j] = block[currentBlock][j*4+(3-i)];
}
}
block[currentBlock] = newBlock;
}
// game over
function gameOver() {
clearInterval(interval);
alert('Game Over!');
}
</script>
</code></pre>
</head>
<body onload='init()'>
<h1>Tetris</h1>
<canvas id='canvas' width='300' height='600'></canvas>
<div>
<p>Score: <span id='score'>0</span></p>
<p>Level: <span id='level'>0</span></p>
<button onclick='startGame()'>Start Game</button>
</div>
</body>
</htm
原文地址: https://www.cveoy.top/t/topic/losN 著作权归作者所有。请勿转载和采集!