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>

移动背景位置

1 个答案: