移动背景位置

Question

我写了一个小画布游戏来解释我的问题。

注意：游戏既不扩展也不完整。它仅作为示例：

let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d")
canvas.width = canvas.height = 300


let vector = {
  x: 0,
  y: 0
}
$(window).on("keydown", function(e) {
  e.preventDefault()
  if (e.key === "ArrowRight") vector.x = 1
  if (e.key === "ArrowLeft") vector.x = -1
  if (e.key === "ArrowUp") vector.y = -1
  if (e.key === "ArrowDown") vector.y = 1
}).on("keyup", function(e) {
  e.preventDefault()
  if (e.key === "ArrowRight") vector.x = 0
  if (e.key === "ArrowLeft") vector.x = 0
  if (e.key === "ArrowUp") vector.y = 0
  if (e.key === "ArrowDown") vector.y = 0
})

setInterval(update, 100)

let position = {
  x: 0,
  y: 0
}
let speed = 10
let size = 10

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  let img = new Image()
  img.src = "https://images.fineartamerica.com/images-medium-large-5/green-pixel-art-mike-taylor.jpg"
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
  position.x += speed * vector.x
  position.y += speed * vector.y

  /* player */
  ctx.fillStyle = "blue"
  ctx.fillRect(canvas.width / 2 - size / 2, canvas.height / 2 - size / 2, size, size)

  /* map */
  ctx.fillStyle = "white"
  for (let i = 0; i < 10; i++)
    ctx.fillRect(position.x - size / 2 + i * size, position.y - size / 2, size, size)
  for (let i = 8; i < 30; i++)
    ctx.fillRect(position.x - size / 2, position.y - size / 2 + i * size, size, size)

}

#canvas {
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<canvas id="canvas"></canvas>

如你所见，系统如下：

• 播放器始终位于画布中间。
• 只有“地图”在按键输入时移动（箭头）

此外，游戏有无限的背景（见图）。背景应根据其位置随着游戏移动。如何计算此背景的位置以便之后对其进行画布。

在我的情况下，x 方向就足够了。在 y 方向上，背景不必移动。

Answer 1

您应该在更新之外捕获图像
然后在更新中相应地设置图像位置。

您仍然需要处理“无限背景”，因为您必须将图像用作地图图块。

这是移动背景的代码

let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d")
canvas.width = canvas.height = 300

let vector = {x: 0, y: 0}
let position = {x: 0,y: 0}
let speed = 10
let size = 10
let img = new Image()
img.src = "https://images.fineartamerica.com/images-medium-large-5/green-pixel-art-mike-taylor.jpg"

$(window).on("keydown", function(e) {
  e.preventDefault()
  if (e.key === "ArrowRight") vector.x = 1
  if (e.key === "ArrowLeft") vector.x = -1
  if (e.key === "ArrowUp") vector.y = -1
  if (e.key === "ArrowDown") vector.y = 1
}).on("keyup", function(e) {
  e.preventDefault()
  if (e.key === "ArrowRight") vector.x = 0
  if (e.key === "ArrowLeft") vector.x = 0
  if (e.key === "ArrowUp") vector.y = 0
  if (e.key === "ArrowDown") vector.y = 0
})

setInterval(update, 100)

function update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  
  position.x += speed * vector.x
  position.y += speed * vector.y
  
  ctx.drawImage(img, position.x-img.width/2, position.y-img.height/2, img.width, img.height)
  /* player */
  ctx.fillStyle = "blue"
  ctx.fillRect(canvas.width / 2 - size / 2, canvas.height / 2 - size / 2, size, size)

  /* map */
  ctx.fillStyle = "white"
  for (let i = 0; i < 10; i++)
    ctx.fillRect(position.x - size / 2 + i * size, position.y - size / 2, size, size)
  for (let i = 8; i < 30; i++)
    ctx.fillRect(position.x - size / 2, position.y - size / 2 + i * size, size, size)

}

#canvas {
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<canvas id="canvas"></canvas>