Moving character and map with canvas+js

Question

Well I have a question, I would like to know how I could use the image in normal size, but that I can navigate it with the left and right directional, example, I have a canvas of size 968 wide and 643 height, and I have an image of 643 height and 2000 width(http://imgur.com/QnBufq4), how would I move a character(Sprite) within it and move it over the map? without it exceeding the mother image limit

Answer 1

You need a camera or viewport system. Use the translate canvas, which already moves all objects drawn accordingly and we don’t need to keep calculating relative positions, and then draws everything with coordinates relative to the world (the image):

var iw = 2000; //Image width
var ih = 643; //Image height
var sw = 968; //Canvas width
var sh = 643; //Canvas height
var cw = 50; //Character width
var ch = 50; //Character height
var speed = 10; //Character speed

var img = new Image(iw, ih);
img.src = "http://i.imgur.com/QnBufq4.jpg";
var ctx = canvas.getContext("2d");
var pos = {x: 0, y: ih - 140};
var camera = {x: 0, y: 0}

function draw() {
 //Faz a esquerda da câmera começar meia tela antes do personagem, mas só se tiver imagem suficiente pra isso
 camera.x = Math.min(iw - sw, Math.max(0,pos.x - sw/2));
 //Reseta as transformações do canvas
 ctx.setTransform(1,0,0,1,0,0);
 //Limpa o canvas
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 //Desloca o mundo inteiro, simulando uma câmera
 ctx.translate(-camera.x, -camera.y);
 //Desenha o fundo
 ctx.drawImage(img, 0, 0, sw, sh, 0, 0, iw, ih);
 //Desenha o personagem
 ctx.fillRect(pos.x, pos.y, cw, ch);

 window.requestAnimationFrame(draw);
}

document.addEventListener('keydown', function(e) {
 var key = e.which || e.key || e.keyCode;
 switch(key) {
  case 37: pos.x-=speed; break;
  case 39: pos.x+=speed; break;
 }
 pos.x = Math.max(0, Math.min(iw - cw,pos.x));
});

window.requestAnimationFrame(draw);

<canvas style="border: 1px solid black;" id="canvas" width="968" height="643">
</canvas>

And here, if you like, a more in-depth tutorial: Panning and scrolling background images using the canvas element

Answer 2

Good night, my dear. I am not giving you a solution in code, but I can tell you that the solution is not to move the character but the image behind using paralax.

an example of the functioning of paralax http://tableless.com.br/parallax-simples-com-jquery-e-css/

If you see a solution to this, I will assist you in the origin of the situation.