javascript canvas 不会使用自定义框架呈现

Question

我正在制作一个简单的 JS 游戏框架，我正在尝试制作一个可以使用 WASD canvas 移动的图像。下面的代码应该渲染一个可移动的图像，但它什么也没做。请帮忙。

HTML

<html>
  <head>
    <title>raptorjs example</title>
    <script src="raptor.js"></script>
  </head>
  <body>
    <canvas id="canvas" width=200 height=200></canvas>
    <div style="display:none">
      <img src="player.png" alt="d" id="player">
    </div>
    <script>
      var pl = new Player("player",50,50,20,20);
      pl.Update= function(){
        var x = pl.x
        var y = pl.y
        if (Keyboard.check("w")){ y -= 1}
        if (Keyboard.check("s")){ y += 1}
        if (Keyboard.check("a")){ x -= 1}
        if (Keyboard.check("d")){ x += 1}
      }
    </script>
  </body>
</html>

JS（框架代码）


var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d")
var pressedKeys = [];
function addKey(ev){
  pressedKeys.splice(0,0,ev);
}
function minKey(ev){
  var ix = pressedKeys.indexOf(ev);
  pressedKeys.splice(ix,1);
}
document.addEventListener("keydown",addKey(e.code));
document.addEventListener("keyup",minKey(e.code));

var Keyboard = new Object();
Keyboard.check = function(k){
  if (pressedKeys.indexOf(k)!= -1){
    return true;
  } else {
    return false;
  }
}
function delObj(obj){
  for (const key in obj){
    delete obj[key]
  }
}
function Player(img,lx,ly,wid,hig){
  this.x = lx;
  this.y = ly;
  this.width = wid;
  this.height = hig;
  this.Update = function(){
    //playerid.Update = yourFunction()
  }
  this.Draw = function(){
    cv.clearRect(this.x,this.y,this.width,this.height)
    var im = document.getElementById(img)
    cv.drawImage(im,this.x,this.y,this.width,this.height)
  }
  function bothf(){
    this.Draw()
    this.Update()
  }
  setInterval(bothf(),20)
}

如有任何帮助，我们将不胜感激。我的主要重点是让图像出现，但如果键盘检查功能有任何修复也很酷！

Answer 1

我认为你把键盘交互过于复杂了，var pressedKeys = [] 只是为了稍后再读一遍......我不确定你从哪里得到的，但我建议不要那样做，我们所有人需要做的是对该事件的正确操作。

即使我们从您的代码中删除图像并用仅绘制一个没有任何显示的正方形替换它，您也应该从更简单的开始。

这样的事情怎么样：

var canvas = document.getElementById("canvas");
var cv = canvas.getContext("2d")

function Player(x, y, color) {
  this.x = x;
  this.y = y;
  this.color = color

  this.draw = function() {
    cv.beginPath()
    cv.fillStyle = this.color;
    cv.rect(this.x, this.y, 20, 20);
    cv.fill();
  }
}

var pl1 = new Player(50, 50, "red");
var pl2 = new Player(90, 5, "blue");

window.onkeydown = (e) => {
  if (e.keyCode == 87) pl1.y -= 0.5 // "w"
  if (e.keyCode == 83) pl1.y += 0.5 // "s"
  if (e.keyCode == 65) pl1.x -= 0.5 // "a"
  if (e.keyCode == 68) pl1.x += 0.5 // "d"
};

function drawGame() { 
  cv.clearRect(0, 0, canvas.width, canvas.height)
  pl1.draw() 
  pl2.draw() 
  requestAnimationFrame(drawGame);
}
drawGame()

<canvas id="canvas" width=160 height=160></canvas>

要点：

我简化了你的播放器来绘制一个矩形，你以后当然可以使用图像。
您原来的 setInterval(bothf(),20) 在播放器中，这是不正确的，setInterval 需要一个函数而不是函数的输出。我把它移到了外面，这样我们就可以绘制多个元素。
在我对 keydown 的测试中 e.code 并没有像你那样计算出一个字母，而是我使用 e.keyCode 来确定按下了哪个键
对于需要监听加载事件的图片，准备好后，查看文档示例：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#examples

如果您真的很想制作游戏，您应该考虑使用游戏引擎：
https://github.com/collections/javascript-game-engines
这将为您节省很多时间！

javascript canvas 不会使用自定义框架呈现

javascript canvas wont render with custom framework

html

javascript

frameworks

canvas

game-development