游戏障碍
按下按钮移动红色方块：
添加一些障碍
现在我们想在游戏中添加一些障碍。
向游戏区域添加一个新组件。将其设为绿色，宽 10px，高 200px，并将其放置在右侧 300px 和下方 120px 处。
并在每一帧中更新障碍物组件：
例子
var myGamePiece;
var 我的障碍；
函数开始游戏() {
myGamePiece = 新组件（30，30，“红色”，10，120）；
myObstacle = 新组件（10，200，“绿色”，300，120）；
我的游戏区域.开始()；
}
函数更新游戏区域（）{
我的游戏区域.清除()；
我的障碍.更新()；
myGamePiece.newPos()；
我的游戏部件.更新()；
}
亲自尝试 »
击中障碍物 = 游戏结束
在上面的例子中，当你撞到障碍物时什么也没有发生。在游戏中，这并不令人满意。
我们如何知道我们的红色方块是否撞到了障碍物？
在组件构造函数中创建一个新方法，用于检查组件是否与另一个组件发生冲突。每次帧更新时都应调用此方法，每秒 50 次。
另外添加 stop() 方法myGameArea 对象，清除 20 毫秒间隔。
例子
var 我的游戏区域 = {
画布：document.createElement（“画布”），
开始：函数（）{
这.画布.宽度 = 480;
这个.画布.高度 = 270;
这个.上下文 = 这个.画布.getContext(“2d”);
document.body.insertBefore(this.canvas， document.body.childNodes[0]);
这个.间隔 = 设置间隔 (updateGameArea， 20);
},
清除：函数（）{
这个.上下文.clearRect（0，0，这个.画布.宽度，这个.画布.高度）；
},
停止：函数（）{
清除间隔（这个.间隔）；
}
}
函数组件（宽度，高度，颜色，x，y）{
这个.宽度=宽度；
这个.高度=高度；
这个.speedX = 0;
这个.速度Y = 0;
这个.x = x;
这个.y = y;
this.update = 函数（）{
ctx = 我的游戏区域.context;
ctx.填充样式 = 颜色；
ctx.fillRect（这个.x，这个.y，这个.width，这个.height）；
}
this.newPos = 函数（）{
这个.x +=这个.速度X；
这个.y +=这个.速度Y；
}
this.crashWith = 函数（otherobj）{
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var 崩溃 = true;
如果（（mybottom < othertop）||
（我的顶部 > 其他底部）||
（我的右<其他左）||
(我的左 > 其他右)) {
崩溃=错误；
}
返回崩溃；
}
}
函数更新游戏区域（）{
如果（myGamePiece.crashWith（myObstacle））{
我的游戏区域.停止()；
} 别的 {
我的游戏区域.清除()；
我的障碍.更新()；
myGamePiece.newPos()；
我的游戏部件.更新()；
}
}
亲自尝试 »
移動障礙物
障碍物静止时不具有危险性，因此我们希望它移动。
更改属性值 myObstacle.x 每次更新时：
例子
函数更新游戏区域（）{
如果（myGamePiece.crashWith（myObstacle））{
我的游戏区域.停止()；
} 别的 {
我的游戏区域.清除()；
我的障碍.x += -1;
我的障碍.更新()；
myGamePiece.newPos()；
我的游戏部件.更新()；
}
}
亲自尝试 »
多重障碍
添加多个障碍物怎么样？
为此，我们需要一个用于计算帧数的属性，以及一个以给定的帧速率执行某些操作的方法。
例子
var 我的游戏区域 = {
画布：document.createElement（“画布”），
开始：函数（）{
这.画布.宽度 = 480;
这个.画布.高度 = 270;
这个.上下文 = 这个.画布.getContext(“2d”);
document.body.insertBefore(this.canvas， document.body.childNodes[0]);
这个.frameNo = 0;
这个.间隔 = 设置间隔 (updateGameArea， 20);
},
清除：函数（）{
这个.上下文.clearRect（0，0，这个.画布.宽度，这个.画布.高度）；
},
停止：函数（）{
清除间隔（这个.间隔）；
}
}
函数 everyinterval(n) {
如果 ((myGameArea.frameNo / n) % 1 == 0) {返回 true;}
返回 false；
}
如果当前帧号与给定的间隔相对应，则 everyinterval 函数返回 true。
要定义多个障碍物，首先将障碍物变量声明为一个数组。
其次，我们需要在updateGameArea函数中做一些修改。
例子
var myGamePiece;
var myObstacles = [];
函数更新游戏区域（）{
变量 x，y；
对于（i = 0; i < myObstacles.length; i + = 1）{
如果（myGamePiece.crashWith（myObstacles[i]））{
我的游戏区域.停止()；
返回;
}
}
我的游戏区域.清除()；
myGameArea.frameNo += 1;
如果 (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.宽度;
y = myGameArea.canvas.高度 - 200
myObstacles.push（新组件（10，200，“绿色”，x，y））；
}
对于（i = 0; i < myObstacles.length; i + = 1）{
我的障碍[i].x += -1;
我的障碍[i].更新()；
}
myGamePiece.newPos()；
我的游戏部件.更新()；
}
亲自尝试 »
在里面 updateGameArea 函数中我们必须循环遍历每个障碍物，以查看是否发生碰撞。如果发生碰撞，updateGameArea 功能将停止，并且不再进行绘图。
这 updateGameArea 函数计算帧数，每 150 帧添加一个障碍物。
随机大小的障碍
为了让游戏更困难、更有趣，我们将设置随机大小的障碍物，这样红色方块必须上下移动才不会崩溃。
例子
函数更新游戏区域（）{
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].x += -1;
我的障碍[i].更新()；
}
myGamePiece.newPos()；
我的游戏部件.更新()；
}
亲自尝试 »
