Как дать моему javascript-шару подвижную анимацию, когда он движется?

у меня есть следующий 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/

7
animation javascript jquery

3 ответов

чтобы иметь тот же эффект, что и в Примере Flash, который вы связали, вам просто нужно добавить фон к элементу и переместить его соответственно.

Я заменил ваш элемент img На span и дал ему фоновое изображение через CSS и радиус границы, чтобы сделать его круглым. В вашем самолете.функцию я добавил следующую строку:

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

вуаля, тот же эффект, что и в Примере Flash:http://jsfiddle.net/dhUw5/1/

4

вы, вероятно, будете использовать HTML5 canvas. Вы бы обрезать часть изображения, используемого в качестве поверхности шара с помощью drawImage а то Маска его, чтобы получить форму круга. Затем вы можете оживить его, перерисовав холст, с положением отсечения (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 или наложив другое изображение (см. лучший способ замаскировать изображение в HTML5). Затем вы измените координаты фонового изображения (текстуры), используя

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

2

Это довольно легко, если вы используете 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/

1