このスプライトが動くゲームをhtml5とjavascriptで作っています。簡単に動かせる、それは簡単な恐怖です。人間の特性で動かしてもらいたいです。右を押すと、画像全体が動くだけでなく、足が前後に動き始め、歩き始めます。スプライトへのリンクは次のとおりです: http://i1057.photobucket.com/albums/t384/Kenny00K/16_zps739f55b8.jpg
私のソースコードはここにあります: var canvas; var ctx; var gameLoop; var img=新しい画像(); var whatLoop;
//The Map Of the game
var mapx=0;
var mapy=0;
var mapw=600;
var maph=400;
//Platform 1
var x1=0;
var x2=85;
var x3=350;
var x4=5;
//Platform 2
var y1=330;
var y2=150;
var y3=265;
var y4=5
//Platform 3
var z1=100;
var z2=200;
var z3=265;
var z4=5;
//Platform 4
var w1=335;
var w2=275;
var w3=265;
var w4=5;
//Platform 5
var a1=100;
var a2=335;
var a3=265;
var a4=5;
//Good Guy
x=0;
y=35;
xy=5;
var frames=4;
var currentFrame=0;
function game()
{
canvas=document.getElementById("myc");
if(canvas.getContext)
{
ctx=canvas.getContext("2d");
img.src="http://i1057.photobucket.com/…
gameLoop=setInterval(gamec,25);
whatLoop=setInterval(whatkey,1);
window.addEventListener("keydown", whatkey);
}
}
function gamec()
{
ctx.fillStyle="black";
ctx.beginPath();
ctx.rect(mapx,mapy,mapw,maph);
ctx.closePath();
ctx.fill();
ctx.fillStyle="blue";
ctx.beginPath();
ctx.rect(x1,x2,x3,x4);
ctx.closePath();
ctx.fill();
ctx.fillStyle="green";
ctx.beginPath();
ctx.rect(y1,y2,y3,y4);
ctx.closePath();
ctx.fill();
ctx.fillStyle="#680000 ";
ctx.beginPath();
ctx.rect(z1,z2,z3,z4);
ctx.closePath();
ctx.fill();
ctx.fillStyle="yellow";
ctx.beginPath();
ctx.rect(w1,w2,w3,w4);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.drawImage(img,x,y,100,100);
ctx.closePath();
ctx.fill();
ctx.fillStyle="red";
ctx.beginPath();
ctx.rect(a1,a2,a3,a4);
ctx.closePath();
ctx.fill();
}
function whatkey(evt)
{
if(evt.ketCode==39)
{
x+=xy;
}
}
</script>
</head>
<body onLoad="game()">
<canvas id="myc" width="800" height="900"></canvas
</body>
</html>
右矢印を押すとコードを実行すると、画像が右に移動します。ただし、足を前後に動かすにはどうすればよいでしょうか。より人間らしくリアルに見えるようにするにはどうすればよいでしょうか。