请检查一下这段代码的错误并进行修改至顺利运行。以下为代码：!DOCTYPE htmlhtmlhead title俄罗斯方块游戏title style #game-board width 250px; height 500px; border 1px solid black; posi
<p>该代码没有明显的错误，但可以进行以下修改：</p>
<ol>
<li>将所有变量声明放在函数中，避免全局变量污染。</li>
<li>将创建方块的代码封装成一个函数。</li>
<li>将绘制已完成的行的代码封装成一个函数。</li>
<li>将判断方块能否移动的代码封装成一个函数。</li>
<li>将处理键盘事件的代码封装成一个函数。</li>
<li>将初始化游戏面板和开始游戏的代码封装成一个函数。</li>
</ol>
<p>以下为修改后的代码：</p>
<!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
原文地址: http://www.cveoy.top/t/topic/cPaC 著作权归作者所有。请勿转载和采集!