Move the character in the canvas and change image

Asked

Viewed 1,350 times

9

Well, I would like to know how I could implement a Sprite on my canvas, I am very lay with canvas, the idea is, when pressing arrow -> he runs Sprite 1.png, when pressing arrow <- he runs Sprite 2.png, and when you click with the left mouse button it runs the sprite3.png but when n is pressing not one it is in the default Sprite. So the idea would be, run right and left and attack with the mouse button.

my canvas is as follows https://jsfiddle.net/jL09wvup/ as I would add there?

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

var img = new Image(iw, ih);
var character = new Image(iw, ih);

img.src = "http://i.imgur.com/QnBufq4.jpg";
character.src = "http://i.imgur.com/QnBufq4.jpg";


var ctx = canvas.getContext("2d");
var pos = {x: 0, y: ih - 160};
var camera = {x: 0, y: 0}

function draw() {
 //Faz a esquerda da camera comecar meia tela antes do personagem, mas so se tiver imagem suficiente pra isso
 camera.x = Math.min(iw - sw, Math.max(0,pos.x - sw/2));
 //Reseta as transformacoes 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 camera
 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 id="canvas" width="968" height="643" style="border;background:rgb(233,233,233)">
            O seu navegador não suporta o canvas
            </canvas>

Sprite exemplo

jquery html5 canvas
  • 1

    What you’ve already tried?

  • 1

    Hi Carlos. I think your question is a little broad, since you have several questions there and an answer essentially would do all the work for you. I suggest editing the question to focus on some aspect (for example, "How to animate an Sprite (changing frames)?". As you mention being "lay on canvas", I would suggest using some help library. The Createjs is, in my opinion, fantastic, and you find an example of how to create a spritesheet with her here: http://answall.com/a/6550/73

  • Well, in css3 I am good, if there is some way your summon a Sprite already drawn in css and sent to each event as mentioned above, it would advance the work

  • anyone help? I still don’t know how to solve

  • What do you want to do? Use the spritesheet frames?

  • I want to insert a spritesheet as a character in place of that square..

Show 1 more comment

1 answer

1


Browser other questions tagged jquery html5 canvas

You are not signed in. Login or sign up in order to post.