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

How do I stop the screen flickering when moving my character by pressing the arrow keys in JavaScript?

本文关键字：移动 角色 闪烁 屏幕 JavaScript      更新时间：2023-09-26

有人可以帮助我解决问题吗？在重绘游戏角色之前，我已经设法清除了画布，但想知道如何阻止屏幕在 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);
}

一些观察：

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

  • 在代码顶部设置一次字体和 textBaseline，而不是每次使用它时。

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

    • 在绘制

  • 头像的同时绘制时钟计时器（节省 1 个画布清理）。

  • 将加载函数附加到头像图像，以便您知道图像已准备好绘制图像

这是修改后的代码 - 它未经测试，因此您需要查看它;)

祝你的项目好运！ 

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);
}
相关文章：