Перемещение фоновой позиции

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>

Как видите, система выглядит следующим образом:

• Игрок всегда находится в середине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>