如何在移动时给我的javascript球滚动动画？

Question

我有以下HTML代码:

<img src="game_files/ball.png" id="ball" /> 这是一个包含球形图像的div(球的顶视图)

这个球我可以用我的箭头键和一些javacript移动上,左,右,下等等.我用这段代码做这个:

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

- 编辑 - - - -

创造了一个小提琴:http: //jsfiddle.net/mauricederegt/dhUw5/

1-打开小提琴

2-单击1

3-使用箭头键移动球,留在绿色的田野!

4-看,没有滚动效果

Answer 1

要获得与链接的 Flash 示例中相同的效果，您只需向元素添加背景并相应地移动它。

\n\n

我用 span 替换了你的 img 元素，并通过 CSS 给它背景图像和边框半径以使其变圆。\n在你的plane.move函数中我添加了以下行：

\n\n

document.getElementById(\'ball\').style.backgroundPosition = x + \'px \' + y +\'px\';\n

\n\n

Voil\xc3\xa1，与Flash示例中的效果相同： http: //jsfiddle.net/dhUw5/1/

\n