2

矢印を使って単純な動くボールを作りたかったので、次のようにしました。

<canvas id="canvas" width="300" height="300" ></canvas>

<script>
var x=120;
var y=120;
var key,pos=0;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function()
{
    ctx.drawImage(img,x,y);
}
img.src="http://www.infogridpacific.com/blog/i/ball_online.png";

document.onkeydown=function(e)
{
    pos=1;
    key=window.event?e.keyCode:e.which;
}
document.onkeyup=function(e){pos=0;}

setInterval(function()
{
    if(pos==0)return;
    if(key==37)x-=2;
    if(key==38)y-=2;
    if(key==39)x+=2;
    if(key==40)y+=2;
    canvas.width=canvas.width;
    ctx.drawImage(img,x,y);
},5);
</script>

http://jsfiddle.net/mageek/ny3uz/6/

しかし、左から右にすると、ボールは 1 秒間停止してから反対方向に動き始めます。これを修正する方法はありますか？

4

2 に答える 2

1

キーの押下/リリースをカウントするだけです。この方法では、2 つのキーを押しても停止しません。

var x=120;
var y=120;
var key,pos=0;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
ctx.drawImage(img,x,y);
}
img.src="http://www.infogridpacific.com/blog/i/ball_online.png";

document.onkeydown=function(e){
pos++;
key=window.event?e.keyCode:e.which;
}
document.onkeyup=function(e){pos--}

setInterval(function(){
if(pos==0)return;
if(key==37)x-=2;
if(key==38)y-=2;
if(key==39)x+=2;
if(key==40)y+=2;
canvas.width=canvas.width;
ctx.drawImage(img,x,y);
},5);

http://jsfiddle.net/stMh9/

于 2013-06-27T21:04:47.183 に答える