HTML Tetris Game - Play Online - Free
<!DOCTYPE HTML>
<html>
<head>
<style>
div{
width:20px;
height:20px;
background-color: #000;
position: absolute;
}
.empty {
background-color: #eee;
}
.filled {
background-color: #000;
}
.current {
background-color: #f00;
}
.next {
background-color: #0f0;
}
#board {
position: relative;
width: 200px;
height: 400px;
border: 4px solid #000;
margin: 20px auto;
}
#next {
position: relative;
width: 80px;
height: 80px;
border: 4px solid #000;
margin: 20px auto;
}
#score {
margin: 20px auto;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div id='board'></div>
<div id='next'></div>
<div id='score'>0</div>
<script>
// Constants
const ROWS = 20;
const COLS = 10;
const BLOCK_SIZE = 20;
const TICK_INTERVAL = 1000;
<pre><code> // Variables
let board;
let shape;
let shape_x;
let shape_y;
let shape_index;
let next_shape;
let next_shape_index;
let score;
let lines;
// Restart Game
function restartGame() {
board = [];
for (let y = 0; y < ROWS; y++) {
board[y] = [];
for (let x = 0; x < COLS; x++) {
board[y][x] = 0;
}
}
score = 0;
lines = 0;
newShape();
}
// New Shape
function newShape() {
let shapes = [
[[1, 1, 1, 1]],
[[1, 1], [1, 1]],
[[1, 1, 0], [0, 1, 1]],
[[0, 1, 1], [1, 1, 0]],
[[1, 0, 0], [1, 1, 1]],
[[0, 0, 1], [1, 1, 1]],
[[1, 1, 1], [0, 0, 1]]
];
let random_shape = Math.floor(Math.random() * shapes.length);
shape = shapes[random_shape];
shape_index = random_shape;
shape_x = Math.floor(COLS / 2) - Math.floor(shape[0].length / 2);
shape_y = 0;
if (
!valid(0, 0, shape) ||
!valid(shape_x, shape_y, shape)
) {
alert('Game Over');
restartGame();
}
next_shape_index = Math.floor(Math.random() * shapes.length);
next_shape = shapes[next_shape_index];
drawNextShape();
}
// Valid
function valid(x, y, shape) {
for (let row = 0; row < shape.length; row++) {
for (let col = 0; col < shape[row].length; col++) {
if (shape[row][col] == 1) {
if (
y + row >= ROWS ||
x + col >= COLS ||
x + col < 0 ||
board[y + row][x + col] == 1
) {
return false;
}
}
}
}
return true;
}
// Rotate Shape
function rotate(dir) {
let new_shape = [];
for (let col = 0; col < shape[0].length; col++) {
new_shape[col] = [];
for (let row = 0; row < shape.length; row++) {
new_shape[col][row] = shape[shape.length - 1 - row][col];
}
}
if (dir == 'right') {
new_shape.reverse();
}
if (valid(shape_x, shape_y, new_shape)) {
shape = new_shape;
}
}
// Move Shape
function move(dir) {
if (dir == 'left' && valid(shape_x - 1, shape_y, shape)) {
shape_x--;
}
if (dir == 'right' && valid(shape_x + 1, shape_y, shape)) {
shape_x++;
}
if (dir == 'down' && valid(shape_x, shape_y + 1, shape)) {
shape_y++;
}
}
// Drop Shape
function drop() {
if (valid(shape_x, shape_y + 1, shape)) {
shape_y++;
} else {
merge();
newShape();
}
drawBoard();
}
// Merge
function merge() {
for (let row = 0; row < shape.length; row++) {
for (let col = 0; col < shape[row].length; col++) {
if (shape[row][col] == 1) {
board[shape_y + row][shape_x + col] = 1;
}
}
}
clearLines();
}
// Clear Lines
function clearLines() {
let line_count = 0;
for (let row = 0; row < ROWS; row++) {
let is_full = true;
for (let col = 0; col < COLS; col++) {
if (board[row][col] == 0) {
is_full = false;
break;
}
}
if (is_full) {
for (let r = row; r > 0; r--) {
for (let c = 0; c < COLS; c++) {
board[r][c] = board[r - 1][c];
}
}
line_count++;
}
}
if (line_count > 0) {
score += line_count * 10;
lines += line_count;
}
drawScore();
}
// Tick
function tick() {
if (valid(shape_x, shape_y + 1, shape)) {
shape_y++;
} else {
merge();
newShape();
}
drawBoard();
}
// Draw Board
function drawBoard() {
let html = '';
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
if (board[row][col] == 0) {
html += '<div class='empty' style='top:' + (row * BLOCK_SIZE) + 'px; left:' + (col * BLOCK_SIZE) + 'px;'></div>';
} else {
html += '<div class='filled' style='top:' + (row * BLOCK_SIZE) + 'px; left:' + (col * BLOCK_SIZE) + 'px;'></div>';
}
}
}
for (let row = 0; row < shape.length; row++) {
for (let col = 0; col < shape[row].length; col++) {
if (shape[row][col] == 1) {
html += '<div class='current' style='top:' + ((shape_y + row) * BLOCK_SIZE) + 'px; left:' + ((shape_x + col) * BLOCK_SIZE) + 'px;'></div>';
}
}
}
document.getElementById('board').innerHTML = html;
}
// Draw Next Shape
function drawNextShape() {
let html = '';
for (let row = 0; row < next_shape.length; row++) {
for (let col = 0; col < next_shape[row].length; col++) {
if (next_shape[row][col] == 1) {
html += '<div class='next' style='top:' + (row * BLOCK_SIZE) + 'px; left:' + (col * BLOCK_SIZE) + 'px;'></div>';
}
}
}
document.getElementById('next').innerHTML = html;
}
// Draw Score
function drawScore() {
document.getElementById('score').innerHTML = score;
}
// Controls
document.onkeydown = function (e) {
if (e.keyCode == 37) {
move('left');
}
if (e.keyCode == 38) {
rotate('right');
}
if (e.keyCode == 39) {
move('right');
}
if (e.keyCode == 40) {
move('down');
}
if (e.keyCode == 32) {
drop();
}
};
// Start Game
restartGame();
setInterval(tick, TICK_INTERVAL);
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lmuY 著作权归作者所有。请勿转载和采集!