我有以下的HTML代码:如何在移动时给我的JavaScript球滚动动画?
<img src="game_files/ball.png" id="ball" />
它包含一个球 (球的俯视图)
这场球,我可以用我的方向键和一些javacript去移动的图像的DIV左,右,下,等等等我用这个代码这样做:
var ball = function () {
var inited = false,
el,
xcheck = 50,
x = 50,
ycheck = 50,
y = 50,
xspeed = 0,
yspeed = 0,
power = 0.4,
friction = 0.99,
xwind = 0,
ywind = 0,
dead = true,
timer = function(keys) {
if (dead === true) {
return;
}
if (keys[38] === true) {
yspeed += power;
}
if (keys[40] === true) {
yspeed -= power;
}
if (keys[37] === true) {
xspeed += power;
}
if (keys[39] === true) {
xspeed -= power;
}
xspeed = xspeed * friction - xwind;
yspeed = yspeed * friction - ywind;
if (Math.abs(xspeed) < 0.004) {
xspeed = 0;
}
if (Math.abs(xspeed) < 0.004) {
xspeed = 0;
}
x -= xspeed;
y -= yspeed;
plane.move(x,y);
};
return {
init: function() {
if (inited != true) {
inited = true;
el = document.getElementById('ball');
roller.register(timer, 'time');
}
}
};
}();
这一切工作,但球没有滚动动画!图像只是向左或向右滑动如何添加?我发现这个教程:http://www.emanueleferonato.com/2007/06/10/creation-of-realistic-spheres-in-flash-with-textures-and-masking/,我认为这可以帮助我。
不幸的是,这是一个闪光球(我希望这也适用于某种类型的JS)。本教程准确显示了我想要的内容:一个带滚动动画的球(请参阅教程末尾附近的教程页面,其中包含豹皮,下面是第26-37行:如果纹理相对于球的位置。 ..)。
如何将这个应用到我的JS球?有什么想法吗?
亲切的问候和新年快乐
PS我使用/负载的jquery以及
--edit --------
创建一个小提琴: http://jsfiddle.net/mauricederegt/dhUw5/
1-打开小提琴
2-点击1
3-使用箭头键移动球,留在绿色的领域!
4-看不到滚动效果
这样的事情,更好地附上[的jsfiddle(HTTP:// jsfiddle.net/)。 – Alexander
你也可以使用css3-rotation属性并为它添加动画 –
在下面添加一个小提琴--EDIT --- – Maurice