如何通过在JavaScript中按箭头键来停止移动角色时屏幕闪烁？

有人能帮我解决我的问题吗？在重新绘制游戏角色之前，我已经设法清除了画布，但我想知道如何阻止屏幕在角色在JavaScript中移动时闪烁。谢谢你的帮助。非常感谢你的帮助。这是我的密码

var avatarX = 0;
var avatarY = 267;
var avatarImage;
var counter = 1;
var XWIDTH = 0;
var WIDTH = 400;
var dx = 5;
var tt;

window.addEventListener('keydown', KeyDown);

function setUpGame() { //This is the function that is called from the html document.
var gameCanvas = document.getElementById("gameCanvas"); //Declare a new variable & assigns it the id of the CANVAS from the html document.
avatarImage = new Image(); //Declaring a new variable. This is so that we can store the image at a later date.

avatarImage.src = "img/avatar.png"; //Ditto from above.


gameCanvas.getContext("2d").drawImage(avatarImage, Math.random() * 100, avatarY);
var tt = setInterval(function(){counTer()},1000);
setInterval(handleTick, 25);

}

function KeyDown(evt) {
  switch (evt.keyCode) {
  case 39: /*Arrow to the right*/
      if(avatarX + dx <WIDTH && avatarX + dx >XWIDTH) {
         avatarX += dx;
         gameCanvas.width = gameCanvas.width;
      }
    break;
   case 37: /*Arrow to the left*/
      if(avatarX - dx >XWIDTH) {
         avatarX -= dx;
         gameCanvas.width = gameCanvas.width;
      }
    break;
  }
}

function counTer() {
  if(counter == 60) {
    clearInterval(tt);
  } else {
    counter++;
    gameCanvas.width = 400;
    gameCanvas.getContext("2d").font = "18px Iceland";
    gameCanvas.getContext("2d").textBaseline = "top";
    gameCanvas.getContext("2d").fillText("Seconds: " + counter, 5, 5);
  }
}

function handleTick() {

    gameCanvas.getContext("2d").drawImage(avatarImage, avatarX, avatarY);

}

var-avatarX=0；
var-avatarY=267；
Rimage；
var计数器=1；
var XWIDTH=0；
var宽度=400；
var-dx=5；
var-tt；
window.addEventListener（'keydown'，keydown）；
函数setUpGame（）{//这是从html文档调用的函数。
var gameCanvas=document.getElementById（“gameCanvas”）；//声明一个新变量并从html文档中为其分配画布的id。
avatarImage=new Image（）；//声明一个新变量。这样我们可以在以后存储图像。
avatarImage.src=“img/avatar.png”；//同上。
gameCanvas.getContext（“2d”）.drawImage（avatarImage，Math.random（）*100，avatarY）；
var tt=setInterval（函数（）{counTer（）}，1000）；
设置间隔（handleTick，25）；
}
功能键控（evt）{
开关（evt.keyCode）{
第39种情况：/*向右箭头*/
中频（avatarX+dx XWIDTH）{
avatarX+=dx；
gameCanvas.width=gameCanvas.width；
}
打破
案例37:/*向左箭头*/
中频（阿凡达接收-dx>XWIDTH）{
avatarX-=dx；
gameCanvas.width=gameCanvas.width；
}
打破
}
}
函数计数器（）{
如果（计数器==60）{
净间隔（tt）；
}否则{
计数器++；
gameCanvas.width=400；
gameCanvas.getContext（“2d”）.font=“18px冰岛”；
gameCanvas.getContext（“2d”）.textBaseline=“top”；
gameCanvas.getContext（“2d”）.fillText（“秒：”+计数器，5,5）；
}
}
函数handleTick（）{
gameCanvas.getContext（“2d”）.drawImage（avatarImage、avatarX、avatarY）；
}
一些观察结果：

• 在代码顶部创建一次上下文，而不是每次使用它

• 在代码顶部设置字体和文本基线一次，而不是每次使用它

• 仅在需要时清除画布（仅在handleTick中）

• 在绘制化身的同时绘制时钟计时器（保存1个画布清除）

• 在avatarImage上附加一个加载功能，这样您就知道图像已准备好绘制图像

这是经过修改的代码——它未经测试，因此您需要对其进行检查；）

祝你的项目好运

var-avatarX=0；
var-avatarY=267；
Rimage；
var计数器=1；
var XWIDTH=0；
var宽度=400；
var-dx=5；
var-tt；
var游戏画布；
var语境；
window.addEventListener（'keydown'，keydown）；
函数setUpGame（）{//这是从html文档调用的函数。
gameCanvas=document.getElementById（“gameCanvas”）；//声明一个新变量并从html文档中为其分配画布的id。
context=gameCanvas.getContext（“2d”）；
context.font=“18px冰岛”；
context.textbrealine=“top”；
avatarImage=new Image（）；//声明一个新变量。这样我们可以在以后存储图像。
avatarImage.onload=函数（）{
//avatarImage现在已完全加载并准备好绘制图像
context.drawImage（avatarImage，Math.random（）*100，avatarY）；
//启动计时器
tt=setInterval（函数（）{counTer（）}，1000）；
设置间隔（handleTick，25）；
}
avatarImage.src=“img/avatar.png”；//同上。
}
功能键控（evt）{
开关（evt.keyCode）{
第39种情况：/*向右箭头*/
中频（avatarX+dx XWIDTH）{
avatarX+=dx；
}
打破
案例37:/*向左箭头*/
中频（阿凡达接收-dx>XWIDTH）{
avatarX-=dx；
}
打破
}
}
函数计数器（）{
如果（计数器==60）{
净间隔（tt）；
}否则{
计数器++；
}
}
函数handleTick（）{
clearRect（0,0，canvas.width，canvas.height）；
背景。drawImage（avatarImage、avatarX、avatarY）；
填充文本（“秒：+计数器，5，5）；
}

var avatarX = 0;
var avatarY = 267;
var avatarImage;
var counter = 1;
var XWIDTH = 0;
var WIDTH = 400;
var dx = 5;
var tt;
var gameCanvas;
var context;


window.addEventListener('keydown', KeyDown);

function setUpGame() { //This is the function that is called from the html document.

    gameCanvas = document.getElementById("gameCanvas"); //Declare a new variable & assigns it the id of the CANVAS from the html document.
    context=gameCanvas.getContext("2d");
    context.font = "18px Iceland";
    context.textBaseline = "top";

    avatarImage = new Image(); //Declaring a new variable. This is so that we can store the image at a later date.
    avatarImage.onload=function(){

        // avatarImage is now fully loaded and ready to drawImage
        context.drawImage(avatarImage, Math.random() * 100, avatarY);

        // start the timer
        tt = setInterval(function(){counTer()},1000);
        setInterval(handleTick, 25);

    }
    avatarImage.src = "img/avatar.png"; //Ditto from above.

}

function KeyDown(evt) {
  switch (evt.keyCode) {
  case 39: /*Arrow to the right*/
      if(avatarX + dx <WIDTH && avatarX + dx >XWIDTH) {
         avatarX += dx;
      }
    break;
   case 37: /*Arrow to the left*/
      if(avatarX - dx >XWIDTH) {
         avatarX -= dx;
      }
    break;
  }
}

function counTer() {
  if(counter == 60) {
    clearInterval(tt);
  } else {
    counter++;
  }
}

function handleTick() {
    context.clearRect(0,0,canvas.width,canvas.height);
    context.drawImage(avatarImage, avatarX, avatarY);
    context.fillText("Seconds: " + counter, 5, 5);
}