Как остановить мерцание экрана при перемещении моего персонажа с помощью клавиш со стрелками в JavaScript?

Question

Как остановить мерцание экрана при перемещении моего персонажа с помощью клавиш со стрелками в JavaScript?

0

Может ли кто-нибудь помочь мне с моей проблемой, пожалуйста? Мне удалось очистить полотно до перерисовки моего игрового персонажа, но мне было интересно, как остановить экран от мерцания, когда персонаж движется в 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);

}

Formula 1 17 дек. 2013, в 20:36

Источник

Теги:

javascript

html

html5

web

html5-canvas

1 ответ

Ещё вопросы

markE · Answer 1 · 2013-12-17T17-27-00.000Z

Некоторые наблюдения:

Создайте контекст один раз в верхней части кода, а не каждый раз, когда вы его используете.
Установите шрифт и textBaseline один раз вверху вашего кода, а не каждый раз, когда вы его используете.
Удалите холст только при необходимости (только в handleTick).
Нарисуйте таймер в то же время, когда вы нарисуете аватар (сохраняет 1 очистку холста).
Прикрепите функцию onload к аватару, чтобы вы знали, что изображение готово к рисованию.

Здесь измененный код - он не проверен, поэтому вам нужно его просмотреть;)

Удачи с вашим проектом!

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