Tetris Game HTML Example Code: Learn and Play
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style>
canvas {
background-color: #000000;
border: 1px solid #000000;
margin: 10px;
padding: 10px;
display: block;
}
</style>
</head>
<body>
<canvas id='tetris' width='200' height='400'></canvas>
<script>
//Constants
const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');
<pre><code> //Variables
let score = 0;
let gameOver = false;
let dropCounter = 0;
let dropInterval = 1000;
let lastTime = 0;
// Pieces
const pieces = [
[Z, 'red'],
[S, 'green'],
[T, 'yellow'],
[O, 'blue'],
[L, 'purple'],
[I, 'cyan'],
[J, 'orange']
];
// Tetrominoes
const Z = [
[1, 1, 0],
[0, 1, 1],
[0, 0, 0]
];
const S = [
[0, 2, 2],
[2, 2, 0],
[0, 0, 0]
];
const T = [
[0, 3, 0],
[3, 3, 3],
[0, 0, 0]
];
const O = [
[4, 4],
[4, 4]
];
const L = [
[0, 5, 0],
[0, 5, 0],
[0, 5, 5]
];
const I = [
[0, 6, 0, 0],
[0, 6, 0, 0],
[0, 6, 0, 0],
[0, 6, 0, 0]
];
const J = [
[0, 7, 0],
[0, 7, 0],
[7, 7, 0]
];
// Player
const player = {
pos: {x: 0, y: 0},
matrix: null,
score: 0
};
//Board
const board = createMatrix(12,20);
// Drop piece
function dropPiece(){
player.pos.y++;
if(collide(board, player)){
player.pos.y--;
merge(board, player);
playerReset();
clearLines();
updateScore();
}
dropCounter = 0;
}
//Player reset
function playerReset(){
const pieces = 'ILJOTSZ';
player.matrix = createPiece(pieces[pieces.length * Math.random() | 0]);
player.pos.y = 0;
player.pos.x = (board[0].length / 2 | 0) - (player.matrix[0].length / 2 | 0);
}
// Clear Lines
function clearLines(){
let rowCount = 1;
outer: for(let y = board.length -1; y > 0; y--){
for(let x = 0; x < board[y].length; x++){
if(board[y][x] === 0){
continue outer;
}
}
const row = board.splice(y, 1)[0].fill(0);
board.unshift(row);
y++;
player.score += rowCount * 10;
rowCount *= 2;
}
}
// Update Score
function updateScore(){
document.getElementById('score').innerText = player.score;
}
// Create Piece
function createPiece(type){
if (type === 'T') {
return T;
} else if(type === 'Z') {
return Z;
}else if(type === 'O') {
return O;
}else if(type === 'S') {
return S;
}else if(type === 'L') {
return L;
}else if(type === 'I') {
return I;
}else if(type === 'J') {
return J;
}
}
// Create Matrix
function createMatrix(w, h){
const matrix = [];
while(h--){
matrix.push(new Array(w).fill(0));
}
return matrix;
}
// Draw Matrix
function drawMatrix(matrix, offset){
matrix.forEach((row, y) => {
row.forEach((value, x) => {
if(value !== 0){
context.fillStyle = pieces[value - 1][1];
context.fillRect(x + offset.x, y + offset.y, 1, 1);
}
});
});
}
// Merge
function merge(board, player){
player.matrix.forEach((row, y) => {
row.forEach((value, x) => {
if(value !== 0){
board[y + player.pos.y][x + player.pos.x] = value;
}
});
});
}
// Collide
function collide(board, player){
const m = player.matrix;
const o = player.pos;
for(let y = 0; y < m.length; y++){
for(let x = 0; x < m[y].length; x++){
if(m[y][x] !== 0 &&
(board[y + o.y] &&
board[y + o.y][x + o.x]) !== 0){
return true;
}
}
}
return false;
}
// Update
function update(time = 0){
const deltaTime = time - lastTime;
lastTime = time;
dropCounter += deltaTime;
if(dropCounter > dropInterval){
dropPiece();
}
draw();
if(gameOver){
alert('Game Over');
}
requestAnimationFrame(update);
}
// Move Left
function moveLeft(){
player.pos.x--;
if(collide(board, player)){
player.pos.x++;
}
}
// Move Right
function moveRight(){
player.pos.x++;
if(collide(board, player)){
player.pos.x--;
}
}
// Move Down
function moveDown(){
player.pos.y++;
if(collide(board, player)){
player.pos.y--;
merge(board, player);
playerReset();
clearLines();
updateScore();
}
}
// Rotate
function rotate(matrix, dir){
for(let y = 0; y < matrix.length; y++){
for(let x = 0; x < y; x++){
[
matrix[x][y],
matrix[y][x],
] = [
matrix[y][x],
matrix[x][y],
];
}
}
if(dir > 0){
matrix.forEach(row => row.reverse());
} else {
matrix.reverse();
}
}
// Rotate Piece
function rotatePiece(){
const pos = player.pos.x;
let offset = 1;
rotate(player.matrix, 1);
while(collide(board, player)){
player.pos.x += offset;
offset = -(offset + (offset > 0 ? 1 : -1));
if(offset > player.matrix[0].length){
rotate(player.matrix, -1);
player.pos.x = pos;
return;
}
}
}
// Draw
function draw(){
context.fillStyle = '#000000';
context.fillRect(0, 0, canvas.width, canvas.height);
drawMatrix(board, {x: 0, y: 0});
drawMatrix
</code></pre>
原文地址: https://www.cveoy.top/t/topic/losK 著作权归作者所有。请勿转载和采集!