俄罗斯方块游戏代码优化：提高代码可读性和可维护性
<!DOCTYPE html>
<html>
<head>
<title>俄罗斯方块游戏</title>
<style>
#game-board {
width: 250px;
height: 500px;
border: 1px solid black;
position: relative;
margin: 0 auto;
}
<pre><code> .block {
width: 25px;
height: 25px;
background-color: gray;
border: 1px solid black;
position: absolute;
}
.block.active {
background-color: red;
}
#score {
margin-top: 10px;
text-align: center;
}
</style>
</code></pre>
</head>
<body>
<div id='game-board'></div>
<div id='score'>得分：0</div>
<pre><code><script>
function init() {
var board = document.getElementById('game-board');
var scoreDisplay = document.getElementById('score');
var boardWidth = 10;
var boardHeight = 20;
var blockWidth = 25;
var blockHeight = 25;
var blocks = [];
var activeBlock = null;
var intervalId = null;
var score = 0;
// 初始化游戏面板
function initBoard() {
board.style.width = boardWidth * blockWidth + 'px';
board.style.height = boardHeight * blockHeight + 'px';
for (var y = 0; y < boardHeight; y++) {
blocks[y] = [];
for (var x = 0; x < boardWidth; x++) {
var block = document.createElement('div');
block.classList.add('block');
block.style.left = x * blockWidth + 'px';
block.style.top = y * blockHeight + 'px';
board.appendChild(block);
blocks[y][x] = block;
}
}
}
// 创建一个新的方块
function createBlock() {
var types = [
[{x: 0, y: 0}, {x: 1, y: 0}, {x: 0, y: 1}, {x: 1, y: 1}], // 正方形
[{x: 0, y: 0}, {x: 1, y: 0}, {x: 2, y: 0}, {x: 3, y: 0}], // 一字形
[{x: 0, y: 0}, {x: 1, y: 0}, {x: 2, y: 0}, {x: 1, y: 1}], // T字形
[{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 2, y: 0}], // L字形
[{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 0, y: 0}], // 反L字形
[{x: 0, y: 1}, {x: 1, y: 1}, {x: 1, y: 0}, {x: 2, y: 0}], // Z字形
[{x: 1, y: 1}, {x: 2, y: 1}, {x: 0, y: 0}, {x: 1, y: 0}] // 反Z字形
];
var type = types[Math.floor(Math.random() * types.length)];
var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
var block = {type: type, color: color, x: 4, y: 0};
if (canMove(block, 0, 0)) {
activeBlock = block;
} else {
gameOver();
}
}
// 绘制游戏面板
function draw() {
// 清空画布
for (var y = 0; y < boardHeight; y++) {
for (var x = 0; x < boardWidth; x++) {
blocks[y][x].style.backgroundColor = '';
}
}
// 绘制方块
activeBlock.type.forEach(function(block) {
var x = activeBlock.x + block.x;
var y = activeBlock.y + block.y;
blocks[y][x].style.backgroundColor = activeBlock.color;
});
// 绘制已完成的行
for (var y = 0; y < boardHeight; y++) {
if (isRowComplete(y)) {
score++;
scoreDisplay.innerHTML = '得分：' + score;
removeRow(y);
y--;
}
}
}
// 移动方块
function moveBlock(dx, dy) {
if (canMove(activeBlock, dx, dy)) {
activeBlock.x += dx;
activeBlock.y += dy;
}
}
// 旋转方块
function rotateBlock() {
var rotatedType = [];
activeBlock.type.forEach(function(block) {
var x = block.x;
var y = block.y;
rotatedType.push({x: -y, y: x});
});
var rotatedBlock = {type: rotatedType, color: activeBlock.color, x: activeBlock.x, y: activeBlock.y};
if (canMove(rotatedBlock, 0, 0)) {
activeBlock.type = rotatedType;
}
}
// 判断方块能否移动
function canMove(block, dx, dy) {
for (var i = 0; i < block.type.length; i++) {
var x = block.x + block.type[i].x + dx;
var y = block.y + block.type[i].y + dy;
if (x < 0 || x >= boardWidth || y < 0 || y >= boardHeight || blocks[y][x].style.backgroundColor !== '') {
return false;
}
}
return true;
}
// 处理键盘事件
function handleKeyDown(event) {
if (event.keyCode === 37) { // 左箭头
moveBlock(-1, 0);
} else if (event.keyCode === 38) { // 上箭头
rotateBlock();
} else if (event.keyCode === 39) { // 右箭头
moveBlock(1, 0);
} else if (event.keyCode === 40) { // 下箭头
moveBlock(0, 1);
}
}
// 判断一行是否已完成
function isRowComplete(row) {
for (var x = 0; x < boardWidth; x++) {
if (blocks[row][x].style.backgroundColor === '') {
return false;
}
}
return true;
}
// 移除一行
function removeRow(row) {
for (var i = row; i > 0; i--) {
for (var j = 0; j < boardWidth; j++) {
blocks[i][j].style.backgroundColor = blocks[i - 1][j].style.backgroundColor;
}
}
for (var j = 0; j < boardWidth; j++) {
blocks[0][j].style.backgroundColor = '';
}
}
// 游戏结束
function gameOver() {
clearInterval(intervalId);
alert('游戏结束！得分：' + score);
}
// 开始游戏
function startGame() {
initBoard();
createBlock();
intervalId = setInterval(function() {
moveBlock(0, 1);
draw();
}, 500);
document.addEventListener('keydown', handleKeyDown);
}
startGame();
}
init();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/nz4J 著作权归作者所有。请勿转载和采集!