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

- EDIT --------

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

1-打开小提琴

2-单击1

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

4-看，没有滚动效应

Answer 1

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

我用一个span替换了你的img元素，并通过CSS和border-radius给它提供了背景图像，使其成为圆形。在你的plane.move函数中，我添加了以下行：

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

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

Answer 2

您可能会使用HTML5画布。您可以使用drawImage然后使用mask it to get a circle shape剪切用作球表面的部分图像。然后，您可以通过重绘画布来对其进行动画处理，剪裁位置（sx，sy）的更改方式与您链接到的flash示例类似。（以下未经过测试;如果您想尝试，请使用原始代码制作一个jsfiddle。）

// ... when the user moves
this.sy += yspeed;
this.sx += xspeed;
if (this.sx > textureSize) {
    this.sx -= textureSize;
}
else if (this.sx < 0) {
    this.sx += textureSize;
}
if (this.sy > textureSize) {
    this.sy -= textureSize;
}
else if (this.sy < 0) {
    this.sy += textureSize;
}

// ... redraw the ball once every frame
context.clearRect(0, 0, canvasWidth, canvasHeight); // clear the canvas
context.save();
context.beginPath();
context.arc(this.x, this.y, ballRadius, Math.PI * 2, false);
context.clip();    
context.drawImage(ballImage, this.sx, this.sy, 
                  ballDiameter, ballDiameter, 
                  this.x, this.y,
                  ballDiameter, ballDiameter);      // redraw the ball      
context.restore();

或者你可以使用纹理作为背景图像的div，并使用CSS3或通过覆盖另一个图像来掩盖它以形成一个圆（参见Best way to mask an image in HTML5）。然后，您将使用

更改背景图像（纹理）的坐标

ballElement.style.backgroundPosition = this.sx + 'px ' + this.sy + 'px';

Answer 3

如果使用CSS转换，这很容易。在这个例子中，旋转速度是根据球当前行进速度的标量值确定的：

    var increment = Math.round(Math.sqrt(Math.pow(xspeed, 2) + Math.pow(yspeed, 2)));
    if (!isNaN(increment)) {
        currangle = currangle + ((xspeed < 0 ? 1 : -1) * increment);
    }

    $('#ball').css({
        '-webkit-transform': 'rotate(' + currangle + 'deg)'
    });

    $('#ball').css({
        '-moz-transform': 'rotate(' + currangle + 'deg)'
    });

此代码位于move中的plane方法中。以下是演示：http://jsfiddle.net/BahnU/show/

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

3 个答案: