[英]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 . 我想将第二张图片“ g_fighter.png”移到背景上。 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>
` `
look a fiddle i set up: 看我设置的小提琴:
http://jsfiddle.net/7fsw81mp/14/ 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. 首先,我看不到您在哪里调用start函数。
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参数作为一个外部变量,所以我不需要传递所有的requestAnimationFrame,我不确定是否将其作为参数
Then the speed was very slow, 1 pixel per second, means that it barely moved 然后速度非常慢,每秒1像素,这意味着它几乎没有移动
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.