移动背景位置

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>