7

我有以下 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-看，没有滚动效果

4

3 回答 3

4

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

我用跨度替换了您的 img 元素，并通过 CSS 和边框半径为其提供了背景图像以使其圆形。在您的 plane.move 函数中，我添加了以下行：

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

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

于 2012-12-29T18:48:24.303 回答
2

您可能会使用 HTML5 画布。您将使用剪裁部分用作球表面的图像drawImage，然后对其进行遮罩以获得圆形。然后，您可以通过重新绘制画布为其设置动画，并以与您链接到的 flash 示例类似的方式更改剪辑位置（sx、sy）。（以下内容未经测试；如果您想尝试，请使用您的原始代码制作一个 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 或通过覆盖另一个图像对其进行遮罩以制作圆形（请参阅HTML5 中遮罩图像的最佳方法）。然后您将使用更改背景图像（纹理）的坐标

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

于 2012-12-29T15:48:37.810 回答
1

如果您使用 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/

于 2012-12-29T18:30:41.667 回答