javascript-多个移动墙

我正在制作一个类似flappy bird的游戏，唯一的区别是，该鸟通过使用鼠标指针在画布上的任何位置移动。所以对于障碍物，我做了墙，但墙是一堆出现的。我无法在画布中按固定间隔制作墙

所需图像：-

我明白了：-

var上下文；
屏幕宽度；
屏幕高度；
var球；
var-wall=[]；
var配子状态；
var mouseX；
var mouseY；
var running=false；
var-raf；
配子化（）；
gameDraw（）；
函数球（）{
这个半径=16；
这个.x=25；
这.y=屏幕高度/2；
this.balldaw=函数（）{
context.beginPath（）；
弧（this.x，this.y，16,0,2*Math.PI）；
context.fillStyle='green'；
context.fill（）；
}
};
功能墙（）{
该厚度=10；
this.wallPositionY=屏幕高度；
this.wallPositionX=屏幕宽度；
该值为0.0；
如果（this.wallPositionY>400和&this.wallPositionY 500）{
this.spating=Math.floor（Math.random（）*（200-100）+100）；
}否则{
这个间距=45；
}
this.heightFromTheTop=Math.floor（Math.random（）*（this.wallPositionY/6-3/4*this.wallPositionY）+this.wallPositionY）；
this.heightFromTheBottom=this.wallPositionY-（this.heightFromTheTop+this.space）；
这个速度=6；
this.draw=函数（）{
context.fillStyle='yellow'；
context.fillRect（this.wallPositionX，0，this.thickness，this.heightFromTheTop）；
context.fillRect（this.wallPositionX，this.wallPositionY-this.heightFromTheBottom，this.thickness，this.heightFromTheBottom）；
}
this.update=函数（）{
this.wallPositionX=this.wallPositionX-this.speed；
}
this.offscreen=函数（）{
如果（此壁位置X<-此厚度）{
返回true；
}否则{
返回false；
}
}
this.newWall=函数（）{
如果（此.wallPositionX<屏幕宽度/2）{
返回true；
}否则{
返回false；
}
}
};
函数gameinitialize（）{
var canvass=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
screenWidth=window.innerWidth；
屏幕高度=window.innerHeight；
canvas.width=屏幕宽度；
canvas.height=屏幕高度；
球=新球（）；
推（新墙（））；
//window.addEventListener（'resize'，resizeScreen，false）；
canvas.addEventListener（'mousemove'，函数（e）{
如果（！正在运行）{
ball.x=e.clientX；
ball.y=e.clientY；
}
});
}
函数gameDraw（）{
context.fillStyle=“#aaaaaa”；
fillRect（0，0，屏幕宽度，屏幕高度）；
ball.balldaw（）；
对于（var i=wall.length-1；i>=0；i--）{
wall[i].draw（）；
wall[i].update（）；
如果（墙[i]。屏幕外（））{
墙体拼接（i，1）；
}
var test_interval=setInterval（函数（）{
推（新墙（））；
}, 5000);
}
raf=window.requestAnimationFrame（gameDraw）；
}

正文{
保证金：0px
}

赛程

您的设置间隔创建代码位于游戏循环中

这意味着您正在为每帧创建一个新的5秒间隔

把它拿出来，一切都会好起来的

修改的代码段：

var上下文；
屏幕宽度；
屏幕高度；
var球；
var-wall=[]；
var配子状态；
var mouseX；
var mouseY；
var running=false；
var-raf；
配子化（）；
gameDraw（）；
函数球（）{
这个半径=16；
这个.x=25；
这.y=屏幕高度/2；
this.balldaw=函数（）{
context.beginPath（）；
弧（this.x，this.y，16,0,2*Math.PI）；
context.fillStyle='green'；
context.fill（）；
}
};
功能墙（）{
该厚度=10；
this.wallPositionY=屏幕高度；
this.wallPositionX=屏幕宽度；
该值为0.0；
如果（this.wallPositionY>400和&this.wallPositionY 500）{
this.spating=Math.floor（Math.random（）*（200-100）+100）；
}否则{
这个间距=45；
}
this.heightFromTheTop=Math.floor（Math.random（）*（this.wallPositionY/6-3/4*this.wallPositionY）+this.wallPositionY）；
this.heightFromTheBottom=this.wallPositionY-（this.heightFromTheTop+this.space）；
这个速度=6；
this.draw=函数（）{
context.fillStyle='yellow'；
context.fillRect（this.wallPositionX，0，this.thickness，this.heightFromTheTop）；
context.fillRect（this.wallPositionX，this.wallPositionY-this.heightFromTheBottom，this.thickness，this.heightFromTheBottom）；
}
this.update=函数（）{
this.wallPositionX=this.wallPositionX-this.speed；
}
this.offscreen=函数（）{
如果（此壁位置X<-此厚度）{
返回true；
}否则{
返回false；
}
}
this.newWall=函数（）{
如果（此.wallPositionX<屏幕宽度/2）{
返回true；
}否则{
返回false；
}
}
};
函数gameinitialize（）{
var canvass=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
screenWidth=window.innerWidth；
屏幕高度=window.innerHeight；
canvas.width=屏幕宽度；
canvas.height=屏幕高度；
球=新球（）；
推（新墙（））；
//window.addEventListener（'resize'，resizeScreen，false）；
canvas.addEventListener（'mousemove'，函数（e）{
如果（！正在运行）{
ball.x=e.clientX；
ball.y=e.clientY；
}
});
}
函数gameDraw（）{
context.fillStyle=“#aaaaaa”；
fillRect（0，0，屏幕宽度，屏幕高度）；
ball.balldaw（）；
对于（var i=wall.length-1；i>=0；i--）{
wall[i].draw（）；
wall[i].update（）；
如果（墙[i]。屏幕外（））{
墙体拼接（i，1）；
}
}
raf=window.requestAnimationFrame（gameDraw）；
}
var test_interval=setInterval（函数（）{
推（新墙（））；
}, 1500);
正文{
保证金：0px
}

赛程
错误控制台中提供了代码错误。控制台中没有错误
未捕获引用错误：未定义大小屏幕<