[英]How would I animate my sprite, but with human-like movements?
我正在用html5和javascript制作游戏，此图片会移动。 我可以轻松地移动它，这就是我想要它以人文特征移动的任何简单的恐惧。 就像我按向右一样，它的腿开始来回移动并走路，而不仅仅是整个图像在移动。 指向精灵的链接是： http : //i1057.photobucket.com/albums/t384/Kenny00K/16_zps739f55b8.jpg
我的源代码在这里：var canvas; var ctx; var gameLoop; var img = new Image（）; 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>
执行代码后，如果按向右箭头，图像将向右移动。 但是，您如何使腿也来回运动，使其看起来更像人类，更真实。
如何使用此代码在 JavaScript 的屏幕上为 flash 2 个不同的 colors 设置精灵的动画？ 或者更确切地说，我将如何解决它？
[英]How would I animate a sprite to flash 2 different colors on screen in JavaScript, with this code? Or rather how would I fix it?
实现 JavaScript 函数 areDifferent(oldValue, newValue) 比较空虚的类人风格
[英]Implementing JavaScript function areDifferent(oldValue, newValue) to compare emptiness human-like style
如何使用d3.js为gif中的svg元素顶部设置动画？
[英]How can I animate the top of my svg element like in this gif using d3.js?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.