Javascript 画布中的块在一帧内消失

我正在尝试使用Javascript从头开始构建Snake。但是，当我使用箭头键将它从画布的一部分移到画布的另一部分时，它会消失一帧，如何解决这个问题？您可以试穿：

var帆布；
var canvasContext；
var ball1X=12.5；
var ball1Y=12.5；
window.onload=函数（）{
canvas=document.getElementById（'snake'）；
canvasContext=canvas.getContext（'2d'）；
var framesPerSecond=60；
setInterval（函数（）{
draw（）；
move（）；
}，1000/帧每秒）；
}
函数move（）{
window.onkeydown=函数（e）{
var key=e.keyCode？e.keyCode:e.which；
如果（ball1X<12.5）{
ball1X+=395；
}否则如果（ball1X>385）{
ball1X-=395；
}
如果（键==39）{
ball1X+=10；
}否则如果（键==37）{
ball1X-=10；
}否则，如果（键==40）{
ball1Y+=10；
}否则如果（键==38）{
ball1Y-=10；
}
}
}
函数绘图（）{
canvasContext.fillStyle='green'；
canvasContext.fillRect（0,0，canvas.width，canvas.height）；
canvasContext.fillStyle='black'；
canvasContext.fillRect（ball1X，ball1Y，10,10）；
}

keyEvent处理程序中的逻辑错误 虽然问题在给定代码中的何处并不明显，但我假设这是对

keydown

处理程序中的边的测试。在开发游戏的过程中，还存在其他一些错误操作，这会带来额外的问题和困难

你的虫子 在键盘功能中，您可以测试球是否接近边缘，如果接近边缘，您可以将球移动到其他大小。看起来你把它移得太远了，所以看不见

下面是一个快速修复方法。移动球后将测试移动到，确保移动到另一侧不会使球移动太远，以便在下一个项目中再次移动

window.onkeydown = function(e) {
   var key = e.keyCode ? e.keyCode : e.which;
   if (key == 39) {
       ball1X += 10;
   }else if (key == 37) {
       ball1X -= 10;
   }else if (key == 40) {
       ball1Y += 10;
   }else if (key == 38) {
       ball1Y -= 10;
   }
   if (ball1X < 12.5) {
     ball1X += 400;
   }else if (ball1X > 400-12.5) {
     ball1X -= 400;
   }
 }

window.onkeydown = function(e) {
   var key = e.keyCode ? e.keyCode : e.which;
   if (key == 39) {
       ball1X += 10;
   }else if (key == 37) {
       ball1X -= 10;
   }else if (key == 40) {
       ball1Y += 10;
   }else if (key == 38) {
       ball1Y -= 10;
   }
   if (ball1X < 12.5) {
     ball1X += 400;
   }else if (ball1X > 400-12.5) {
     ball1X -= 400;
   }
 }