游戏分数
按下按钮移动红色方块：
计算分数
在游戏中记录分数的方法有很多种，我们将向您展示如何将分数写入画布上。
首先制作一个分数组件：
例子
var myGamePiece;
var myObstacles = [];
var 我的分数；
函数开始游戏() {
myGamePiece = 新组件（30，30，“红色”，10，160）；
myScore = 新组件（“30px”，“Consolas”，“black”，280，40，“text”）；
我的游戏区域.开始()；
}
在画布元素上写文本的语法与绘制矩形不同。因此，我们必须使用附加参数调用组件构造函数，告诉构造函数此组件的类型为“文本”。
在组件构造函数中，我们测试组件是否为“文本”类型，并使用 fillText 方法代替fillRect 方法：
例子
函数组件（宽度，高度，颜色，x，y， 类型) {
这个.类型=类型；
这个.宽度=宽度；
这个.高度=高度；
这个.speedX = 0;
这个.速度Y = 0;
这个.x = x;
这个.y = y;
this.update = 函数（）{
ctx = 我的游戏区域.context;
如果 (this.type == “文本”) {
ctx.字体 = 这个.宽度 + “ “ + 这个.高度;
ctx.填充样式 = 颜色；
ctx.填充文本（这个.文本，这个.x，这个.y）；
} 别的 {
ctx.填充样式 = 颜色；
ctx.fillRect（这个.x，这个.y，这个.width，这个.height）；
}
}
...
}
最后，我们在 updateGameArea 函数中添加一些代码，将分数写入画布。我们使用 frameNo 计算分数的属性：
例子
函数更新游戏区域（）{
var x，高度，间隙，最小高度，最大高度，最小间隙，最大间隙；
对于（i = 0; i < myObstacles.length; i + = 1）{
如果（myGamePiece.crashWith（myObstacles[i]））{
我的游戏区域.停止()；
返回;
}
}
我的游戏区域.清除()；
myGameArea.frameNo += 1;
如果 (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.宽度;
最小高度=20；
最大高度 = 200;
高度 = Math.floor(Math.random()*(最大高度-最小高度+1)+最小高度);
最小间隙=50；
最大间隙＝200；
差距 = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push（新组件（10，高度，“绿色”，x，0））；
myObstacles.push（新组件（10，x - 高度 - 间隙，“绿色”，x，高度+间隙））；
}
对于（i = 0; i < myObstacles.length; i + = 1）{
我的障碍[i].speedX = -1;
我的障碍[i].newPos()；
我的障碍[i].更新()；
}
myScore.text = "分数：" + myGameArea.frameNo;
我的分数.更新()；
myGamePiece.newPos()；
我的游戏部件.更新()；
}
亲自尝试 »
