如何使用javascript创建移动的赛道？
我一直在尝试使用JavaScript和canvas创建一个经典的赛车游戏 这是JavaScript部分（car_race.js） 我能够创建一个正在移动的轨迹，但它并不像应该的那样真实。现在写下如果一个边界条完全消失，那么它只会出现在画布的顶部。我想做的是，当一个边界条从上到下穿过整个画布时，我想让它从顶部恢复到画布底部消失的身体数量。有人能帮我做这个零件吗。如何使用javascript创建移动的赛道？,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,我一直在尝试使用JavaScript和canvas创建一个经典的赛车游戏 这是JavaScript部分（car_race.js） 我能够创建一个正在移动的轨迹，但它并不像应该的那样真实。现在写下如果一个边界条完全消失，那么它只会出现在画布的顶部。我想做的是，当一个边界条从上到下穿过整个画布时，我想让它从顶部恢复到画布底部消失的身体数量。有人能帮我做这个零件吗。 var carRaceTrack=document.getElementById（'carraceCanvas'）； var carRa
var carRaceTrack=document.getElementById（'carraceCanvas'）；
var carRaceTrackContext=carRaceTrack.getContext（'2d'）；
var boundryWidth=10；
var boundryHeight=80；
var boundryTopOffSet=5；
var boundryleftofset=402；
var-boundryPadding=8；
设置间隔（绘制，0.5）；
var leftBoundry=[]；
var rightbundry=[]；
对于（x=0；x<6；x++）{
左边界[x]={
偏移量：0，
地形偏移：0，
宽度：0，
身高：0
};
}
对于（x=0；x<6；x++）{
右边界[x]={
偏移量：0，
地形偏移：0，
宽度：0，
身高：0
};
}
var x=5；
函数绘图（）{
drawCanvas（400,0，carRaceTrack.width，carRaceTrack.height，“黑色”）；
x++；
如果（x>carRaceTrack.height）{
x=边界拓扑偏移；
}
//drawBoundryandCanvas（boundryLeftOffSet，x，boundryWidth，boundryHeight，'white'）；
//drawBoundryandCanvas（boundryLeftOffSet，y，boundryWidth，boundryHeight，'white'）；
对于（i=0；icarRaceTrack.height）{
leftBoundry[i].topOffSet=boundryTopOffSet；
}
//console.log（boundry[i].topOffSet）；
drawBoundry（leftBoundry[i]，“white”）；
}
对于（i=0；icarRaceTrack.height）{
rightBoundry[i].topOffSet=boundryTopOffSet；
}
//console.log（boundry[i].topOffSet）；
drawBoundry（righboundry[i]，“white”）；
}
}
函数drawBoundry（x，elementColor）{
carRaceTrackContext.fillStyle=elementColor；
carRaceTrackContext.fillRect（x.OffSet，x.topOffSet，x.width，x.height）；
}
函数drawCanvas（posX、posY、宽度、高度、elementColor）{
carRaceTrackContext.fillStyle=elementColor；
carRaceTrackContext.fillRect（posX，posY，width，height）；
} 这是html部分。在这里，我创建画布，并使用car_race.js文件访问画布对象。
setIntervalvar carRaceTrack=document.getElementById（'carraceCanvas'）；
var carRaceTrackContext=carRaceTrack.getContext（'2d'）；
var boundaryWidth=10；
var boundaryHeight=80；
var-boundaryTopOffset=5；
变量boundaryLeftOffset=2；//出于代码片段的目的，我减少了这个。原件=402
var-boundaryPadding=8；
window.requestAnimationFrame（绘制）；//最好将其用于动画
var leftBoundary=[]；
var rightBoundary=[]；
对于（x=0；x<8；x++），我们还需要两个
左边界[x]={
偏移量：boundaryLeftOffset，
地形偏移：0，
宽度：边界宽度，
高度：边界高度
};
}
对于（x=0；x<8；x++）{
右边界[x]={
偏移量：boundaryLeftOffset-4+440，
地形偏移：0，
宽度：边界宽度，
高度：边界高度
};
}
var循环=0，
totalCycle=边界高度+边界填充；
函数绘图（）{
drawCanvas（boundaryLeftOffset-2,0，carRaceTrack.width，carRaceTrack.height，“黑色”）；
//循环完成时，使用模运算符重置为0：
循环=（循环+1）%totalCycle；
//避免代码重复：在两个边界数组上循环：
for（[leftBoundary，rightBoundary]的边界）{
对于（i=0；isetInterval