Question

因此，我是使用JS制作游戏的新手，我一直在遵循书籍说明和本网站上的一些问题。我设法制作了一个带有小方块的简单html画布站点。我有广场不能离开边界。

但是我的问题是，经过一些测试后，我的方块提高了速度，因此它从按右箭头8次变为从左向右4次。我一直在搜索google，试图找到无济于事的答案。

Here is my JS Fiddle（我见过人们在这里使用它，所以我想也是）；

正方形没有出现在小提琴中（idk为什么），但是当我将其粘贴在网络风暴中时，加载到Google chrome中似乎可以正常工作。

谢谢。

它说我需要将jsfille的内容与一些代码一起使用，所以这是我的jsfiddle的开始。

var Game = {
    canvas : undefined,
    canvasContext : undefined,
    rectanglePositionX : 50,
    rectanglePositionY: 50,

};

Answer 1

在Game.update()函数中可以找到正方形不规则响应的原因。由于您要在每秒调用60次的函数中添加侦听器，因此每次都会添加该侦听器，这就是为什么您将位置更改为仅实际距离的1/1000的原因，好像您想平方移动。可以通过在游戏循环之外仅设置一次事件监听器来解决此问题，因为该事件监听器会被反复调用。

这是您的提琴演奏中的代码片段（不确定什么不起作用），在这里我完全放下了Game.update()函数，并将其中的所有逻辑放入了事件监听器中。现在，矩形位置仅在按下箭头键时设置一次，尽管该功能将在每次按下任何键时运行。由于游戏循环不断重新渲染画布，因此每次都会显示更改。

或者，您也可以在事件侦听器中渲染和绘制画布（我在其中编写它们并注释掉它们），而不是在递归setTimeout中重建它，但是我不确定您使用的其他游戏逻辑是什么想要实施，也许您需要它。但是出于演示目的，请尝试注释掉Game.mainLoop()中的Game.start()调用，然后取消注释掉keydown侦听器底部的方法。

希望这对您有所帮助。

var Game = {
  canvas: undefined,
  canvasContext: undefined,
  rectanglePositionX: 50,
  rectanglePositionY: 50,
};

Game.start = function() {
  Game.canvas = document.getElementById("myCanvas");
  Game.canvasContext = Game.canvas.getContext("2d");
  // comment this out to instead invoke the clearCanvas and draw methods inside the listener:
  Game.mainLoop();
};

Game.clearCanvas = function() {
  Game.canvasContext.clearRect(0, 0, Game.canvas.width,   Game.canvas.height);
};

Game.mainLoop = function() {
  Game.clearCanvas();
  Game.draw();
  window.setTimeout(Game.mainLoop, 1000 / 60);
};

Game.draw = function() {
  Game.canvasContext.fillStyle = "blue";
  Game.canvasContext.fillRect(Game.rectanglePositionX, Game.rectanglePositionY, 10, 10);
};

document.addEventListener('DOMContentLoaded', Game.start);

document.addEventListener("keydown", function() {
  var d = new Date();
  console.log(Game.rectanglePositionX, Game.rectanglePositionY, d);
  const key = event.key;
  if (key == "ArrowUp") {
    if (Game.rectanglePositionY > 1) {
      Game.rectanglePositionY -= 10;
    } else {
      Game.rectanglePositionY += 10;
    }
  }

  if (key == "ArrowDown") {
    if (Game.rectanglePositionY < 470) {
      Game.rectanglePositionY += 10;
    } else {
      Game.rectanglePositionY -= 10;
    }
  }

  if (key == "ArrowLeft") {
    if (Game.rectanglePositionX > 1) {
      Game.rectanglePositionX -= 10;
    } else {
      Game.rectanglePositionX += 10
    }
  }

  if (key == "ArrowRight") {
    if (Game.rectanglePositionX < 790) {
      Game.rectanglePositionX += 10;
    } else {
      Game.rectanglePositionX -= 10;
    }
  }
  // Game.clearCanvas(); 
  // Game.draw();
});

canvas {
  background-color: chartreuse;
  border: solid 10px gold;
}

<html>

  <head>
    <title>MovingSquare</title>
    <script src="BasicGame.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="gameArea">
      <canvas id="myCanvas" width="800" height="480"></canvas>
    </div>
  </body>

</html>

干杯！

平方随着时间变化的速度

1 个答案: