无法在画布上按键时更改图像 [英] Can't get image to change on keypress on canvas
问题描述
我想要这样,当我按左边,它显示图像设置为左。 (我正在做一个RPG游戏。)我不知道如何使用spritesheet,所以我最终单独加载每个图像,以使事情更容易。
I want to make it so that when I press left, it shows the image set for going left. (I'm making an RPG game.) I can't figure out how to use a spritesheet, so I ended up loading each image individually to make things easier.
这是我到目前为止:
<script>
function initCanvas(){
var canvas = document.getElementById('my_canvas')
var ctx = canvas.getContext('2d');
//Variables
var cw = canvas.width;
var ch = canvas.height;
var x = 20;
var y = 20;
var width = 40;
var height = 40;
//----------------
//Char (Spritesheet soon)
//----------------
var charup = new Image();
charup.src = "up.png";
var chardown = new Image();
chardown.src = "down.png";
var charleft = new Image();
charleft.src = "left.png";
var charright = new Image();
charright.src = "right.png";
//
draw(); //Executes the Draw Function
//
//-------------
//WASD Controls
//-------------
document.addEventListener("keydown", move, false);
function move(event){
if(event.keyCode == 87){ //w
ctx.drawImage(charup, x, y, width, height);
if(y >= 20){
y-=20;
}
else if(y < 20){
y = 460;
}
}
if(event.keyCode == 65){ //a
ctx.drawImage(charleft, x, y, width, height);
if(x >= 20){
x-=20;
}
else if(x < 20){
x = 460;
}
}
if(event.keyCode == 83){ //s
ctx.drawImage(chardown, x, y, width, height);
if(y+height <= 490){
y+=20;
}
else if(y+height > 460){
y = 0;
}
}
if(event.keyCode == 68){ //d
ctx.drawImage(charright, x, y, width, height);
if(x+width <= 490){
x+=20;
}
else if(x+width > 490){
x = 0;
}
}
draw();
//Idea for sprite: If press right it goes right and loads a gif while going right...
//And when "keyup" or keyrelease or whatever, it stops the animation
//Or loads a neutral one facing the same direction.
}
//--------------
//Draw Function
//--------------
function draw(){
//Clears rect for animation purposes
ctx.clearRect(0, 0, cw, ch);
ctx.fillStyle = "green";
//ctx.fillRect(x, y, 20, 20);
ctx.drawImage(chardown, x, y, width, height);
}
}
//------------
//Game Loop
//------------
window.addEventListener('load', function(event){
initCanvas();
});
</script>
推荐答案
问题在于draw函数,
The problem lies in the draw-function that reserts the character image on each draw.
解决方案是声明一个新的变量来存放你的角色的当前图片:
The solution would be to declare a new variable that will host the current picture for your character:
var imgPlayer = new Image();
imgPlayer.src = "down.png"; //This is your default image.
下一步是改变你的keylistener函数,以便你的播放器图像的源也在这个函数中删除你的字符的所有绘图)。像这样:
Next step is to alter your keylistener-function so that the source for your player-image is changed (also remove all drawing of your character in this function). Like so:
if(event.keyCode == 87){ //w
imgPlayer.src = charup.src;
//the rest of your code...
}
在您的绘图函数中:
ctx.drawImage(imgPlayer, x, y, width, height);
-----这里是答案,下面是一个FUN - -----
有趣的是,这是一个未完成的游戏,我开始一会儿。
http://home.niddro.com/HTML5/supergoose/SuperGoose。 html
角色的脚有3个图像,当玩家移动他的时候循环。我基于这个想法超级马里奥兄弟的概念。
For fun, here's an unfinished game I started with a while back. http://home.niddro.com/HTML5/supergoose/SuperGoose.html The character's feet have 3 images that loop as the players moves him. I based that idea on the super mario bros concept.
有趣的事实2:
在另一个游戏中,我做了一个兔子跑通过循环2个模糊的脚的图像真的很快:
Fun fact 2: In another game I made a bunny run really fast by looping 2 images of blurred feet:
这篇关于无法在画布上按键时更改图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!