Javascript холст "Игра".Герой движется только один раз

Question

Я пытаюсь сделать простую игру на холсте.Я сделал анимацию для героя, используя функцию setTimeout ().Я проверяю нажатые клавиши с помощью функции moove (e):

Все работает довольно хорошо, когда я нажимаю стрелку влево или вправо в первый раз, но затем герой не двигается.Приветствуются любые рекомендации к коду.

var cns = document.getElementById("can");
cns.height = 600;
cns.width = 300;
var ctx = cns.getContext("2d");
var hero = new Image();
hero.src = "images/hero.png";
hero.onload = function() {
  ctx.drawImage(hero, 120, 570);
  hero.xx = 120;
  hero.yy = 570;
};

var intervalL, intervalR, intervalLL, intervalRR;
var keys = [];

function moove(e) {
  keys[e.keyCode] = (e.type == "keydown");
  if (keys[37]) {
    clearTimeout(intervalR);
    clearTimeout(intervalRR);
    goLeft(hero);
  } else {
    clearTimeout(intervalL);
    clearTimeout(intervalLL);
  }
  if (keys[39]) {
    clearTimeout(intervalL);
    clearTimeout(intervalLL);
    goRight(hero);
  } else {
    clearTimeout(intervalR);
    clearTimeout(intervalRR);
  }
}

function goLeft(img) {
  var x = img.xx,
    y = img.yy;

  function f() {
    ctx.clearRect(img.xx, img.yy, img.width, img.height);
    ctx.drawImage(img, x, y);
    img.xx = x;
    img.yy = y;
    x -= 1.2;
    if (x < -35) {
      x = cns.width;
    }
  }
  if (!intervalL) {
    intervalL = setTimeout(function run() {
      f();
      intervalLL = setTimeout(run, 5);
    }, 5);
  }
}

Функция goRight похожа на goLeft.

Функция moove вызывается в теле тега onkeydown = 'moove (event)' onkeyup = 'moove (событие) '.

Вы можете проверить проект здесь: https://github.com/Fabulotus/Fabu/tree/master/Canvas%20game%20-%20dodge%20and%20jump

Answer 1

Вот «рабочая» версия вашего кода:

var cns = document.getElementById("can");
cns.height = 170;
cns.width = 600;
var ctx = cns.getContext("2d");
var hero = new Image();
hero.src = "http://swagger-net-test.azurewebsites.net/api/Image";
hero.onload = function() {
  ctx.drawImage(hero, cns.width-10, cns.height/2);
  hero.xx = cns.width-10;
  hero.yy = cns.height/2;
};

var intervalL, intervalR, intervalLL, intervalRR;
var keys = [];


function goLeft(img) {
  function f() {
    ctx.beginPath()
    ctx.clearRect(0, 0, cns.width, cns.height);
    ctx.drawImage(img, img.xx, img.yy);
    img.xx--;      
    if (img.xx < -img.width) {
      img.xx = cns.width;
    }
  }
  if (!intervalL) {
    intervalL = setTimeout(function run() {
      f();
      intervalLL = setTimeout(run, 5);
    }, 5);
  }
}

goLeft(hero)

<canvas id="can">

Как видите, function goLeft значительно упрощен.

Одна рекомендация: избегать множества setTimeout и clearTimeoutвместо этого используйте один setInterval для вызова функции рисования, которая заботится о рисовании всего в вашей игре, а все остальные функции должны просто обновить позицию ваших gameObjects.

Answer 2

Причина, по которой это не работает в первый раз, заключается в том, что в первый раз вы устанавливаете позицию на предыдущую позицию (x = image.xx), а затем обновляете x после рисования.Вы должны обновить значение x x -= 1.2 перед вызовом drawImage