Question

有人可以帮我解决我的问题吗？在重绘我的游戏角色之前，我设法清除了画布，但是想知道当角色在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);

}

Answer 1

一些观察结果：

在代码顶部创建一次上下文，而不是每次使用它。
将字体和textBaseline设置在代码顶部，而不是每次使用时。
仅在需要时清除画布（仅在handleTick中）。
在绘制头像的同时绘制时钟计时器（保存1个画布清除）。
将onload函数附加到avatarImage，以便您知道图像已准备好drawImage

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

祝你的项目好运！

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);
}

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

1 个答案: