CODEWITHSUNDEEP
javascripthtmlcanvas
Erick Adhikari
Erick Adhikari

Reputation: 15

how to move an image on canvas html5 with arrow key press?

I saw many peps with same question but none of the solution helped me ..so i post the question. I want to move my second pic "g_fighter.png" over the background . so i wrote the codes now its draw the images over the canvas but on keypress the pic dont move ! It will be very helpfull if anyone can find the flaw in my code `

<html>
<body onload=start()>
<center>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">Your browser does not support canvas tag.</canvas>
</center>
<script>
//Background Image 
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function(){
    bgReady = true;
}
bgImage.src="img/heic0706a.jpg";

//Friend Image
var fReady = false; 
var fImage = new Image();
fImage.onload = function(){
      fReady = true;
}
fImage.src="img/g_fighter.png";

//Game objects
var hero = {
     speed:1,
     x:200,
     y:390
};

var keysDown = {};
addEventListener("keydown", function(e){
        keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function(e){
        delete keysDown[e.keyCode];
}, false);


function update(modifier){

    if(38 in keysDown){
        hero.y -= hero.speed * modifier;
    }
    if(40 in keysDown){
        hero.y += hero.speed * modifier;
    }
    if(37 in keysDown){
        hero.x -= hero.speed * modifier;
    }
    if(39 in keysDown){
        hero.x += hero.speed * modifier;
    }
}

function render(c){
    if(bgReady == true){
        c.drawImage(bgImage,0,0);
    }
    if(fReady == true){
        c.drawImage(fImage,hero.x,hero.y,100,100);
    }
}
function setImage(then){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var now = Date.now();
    var delta = now-then;

    update(delta/1000);
    render(ctx);

    then = now;

    requestAnimationFrame(setImage);
}
    var w = window;
    requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

function start(){
    var Then = Date.now();
    setImage(Then);
}

</script>
</body>
</html>

`

Upvotes: 1

Views: 3441

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

look a fiddle i set up:

http://jsfiddle.net/7fsw81mp/14/

function render(c){
    c.clearRect(0,0,600,600)
    if(fReady == true){
        c.drawImage(fImage,hero.x,hero.y,100,100);
    }
}

First of all I cannot see where were you calling the start function.

I put the then parameter as an external var, so i do not need to pass trought every requestAnimationFrame, i'm not sure if it goes as a parameter otherwise

Then the speed was very slow, 1 pixel per second, means that it barely moved

Also you have to clear the canvas every render, otherwise your hero will leave a trail behind him.

full snippet:

//Friend Image
var fReady = false; 
var fImage = new Image();
fImage.onload = function(){
      fReady = true;
}
fImage.src="http://vignette1.wikia.nocookie.net/finalfantasy/images/0/0a/FFTS_Fighter_Sprite.png";
var then = 0;
//Game objects
var hero = {
     speed:10,
     x:200,
     y:390
};

var keysDown = {};
addEventListener("keydown", function(e){
        keysDown[e.keyCode] = true;
    e.preventDefault();
}, false);
addEventListener("keyup", function(e){
        delete keysDown[e.keyCode];
         e.preventDefault();
}, false);


function update(modifier){

    if(38 in keysDown){
        hero.y -= hero.speed * modifier;
    }
    if(40 in keysDown){
        hero.y += hero.speed * modifier;
    }
    if(37 in keysDown){
        hero.x -= hero.speed * modifier;
    }
    if(39 in keysDown){
        hero.x += hero.speed * modifier;
    }
}

function render(c){
    c.clearRect(0,0,600,600)
    if(fReady == true){
        c.drawImage(fImage,hero.x,hero.y,100,100);
    }
}
function setImage(){
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var now = Date.now();
    var delta = now-then;

    update(delta/1000);
    render(ctx);

    then = now;

    requestAnimationFrame(setImage);
}
    var w = window;
    requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

function start(){
    console.log('starting');
    then = Date.now();
    setImage();
}

start();
<canvas id="myCanvas" width="600" height="600"></canvas>

Upvotes: 1

Related Questions