Moving background-position

Question

I have written a little canvas game to explain my problem.

Note : The game is neither extensive nor finished in any way. It serves only as an example:

 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> 

As you can see, the system is as follows:

• The player is always in the middle of the canvas.
• Only the "Map" moves at key-input (Arrows)

Besides, the game has a infinite background (see the image). The background should move with the game depending on its position. How can I calculate the position(s) of this background in order to canvas it afterwards.

In my case the x-direction is sufficient. In the y-direction the background does not have to move.

Answer 1

You should capture the image outside the update
Then in the update set the image position accordingly.

You still have to work on your "infinite background" for that you will have to use the image as map tiles.

Here is the code moving the background

 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>