Question

我正在尝试在画布上制作简单的游戏。我使用setTimeout（）函数为英雄制作了动画。我用功能moove（e）检查按下的键：

当我第一次按leftarrow或rightarrow时，一切工作都很好，但是英雄没有动弹。对代码的任何建议都值得赞赏。

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（event）'。

您可以在此处检查项目：https://github.com/Fabulotus/Fabu/tree/master/Canvas%20game%20-%20dodge%20and%20jump

Answer 1

第一次不起作用的原因是因为第一次通过将位置设置为其先前位置（x = image.xx），然后在绘制后更新x。您应在调用x -= 1.2

之前更新x值drawImage。

Answer 2

这是您代码的“有效”版本：

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调用一个draw函数，该函数负责绘制游戏中的所有内容，其他所有函数都应仅更新您的位置gameObjects。

Javascript画布“游戏”。英雄只有一次

2 个答案: