HTML5（H5）的Canvas可以用来制作很多小游戏，其中抓方块得分小游戏就是其中一种。以下是一个简单的抓方块得分小游戏的制作方法：
准备HTML文件，在文件中引入Canvas标签：
html
<!DOCTYPE html>
<html>
<head>
<title>抓方块得分小游戏</title>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="game.js"></script>
</body>
</html>
准备JavaScript文件（game.js），编写游戏逻辑：
javascript
var canvas = document.getElementById('gameCanvas');
var ctx = canvas.getContext('2d');
var squares = []; // 存储所有方块的数组
var score = 0; // 得分
var maxSquares = 10; // 方块的最大数量
var squareSize = 50; // 方块的大小
var squareSpeed = 2; // 方块移动的速度
var squareColor = 'blue'; // 方块的颜色
// 初始化方块数组
for (var i = 0; i < maxSquares; i++) {
var square = {x: Math.random() * (canvas.width - squareSize) | 0, y: Math.random() * (canvas.height - squareSize) | 0}; // 随机生成方块的位置
squares.push(square); // 将方块添加到数组中
}
// 游戏主循环
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
ctx.fillStyle = squareColor; // 设置填充颜色为方块的颜色
for (var i = 0; i < squares.length; i++) { // 遍历所有方块
var square = squares; // 获取当前方块
ctx.fillRect(square.x, square.y, squareSize, squareSize); // 在画布上绘制方块
square.x -= squareSpeed; // 方块向左移动
if (square.x < 0) { // 如果方块移出画布的左边，重新生成一个位置并重置得分
square.x = canvas.width - squareSize; // 将方块的位置设置为画布的右边
score += Math.random() * 10 | 0; // 随机增加得分
}
}
ctx.fillStyle = 'black'; // 设置填充颜色为黑色，用于绘制得分文本
ctx.fillText('得分: ' + score, 10, 20); // 在画布上绘制得分文本
requestAnimationFrame(gameLoop); // 继续游戏循环
}
gameLoop(); // 开始游戏循环
|
