How to give my javascript ball a moving animation when it moves?

Question

I have the following HTML code:

<img src="game_files/ball.png" id="ball" /> This is a div containing the image of the ball (top view of the ball)

This ball, which I can move with the arrow keys, and some javacript to go up, left, right, down, etc. I am doing this with this code:

 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'); } } }; }(); 

It all works, but the ball has no moving animation! The image just slides left or right. How can i add this? I found this tutorial: http://www.emanueleferonato.com/2007/06/10/creation-of-realistic-spheres-in-flash-with-textures-and-masking/ , which I thought could help to me.

Unfortunately, this is for a flash ball (I was hoping this would apply to JS too). This tutorial shows exactly what I want: a ball with moving animation (see the training page at the end of the tutorial on a ball with leopard skin, just below: Lines 26-37: If the position of the texture is relative to the ball ...).

How can I apply this to a JS ball? Any thoughts?

Best wishes and happy new year

ps I am using / load jquery as well

- EDIT --------

Created a fiddle: http://jsfiddle.net/mauricederegt/dhUw5/

1- open the violin

2- click 1

3 - use the arrow keys to move the ball, stay on the green field!

4 cm, rolling effect

Answer 1

To have the same effect as the Flash example above, you just need to add a background to the element and move it accordingly.

I replaced your img element with span and gave it a background image via CSS and a border radius to make it round. In your plane.move function, I added the following line:

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

Voilá, the same effect as in the Flash example: http://jsfiddle.net/dhUw5/1/

Answer 2

Perhaps you would use an HTML5 canvas. You copied part of the image used as the surface of the ball using drawImage , and then mask it to get the shape of a circle . Then you can animate it by redrawing the canvas, with the clipping position (sx, sy), changed similar to the one you are associated with. (After this is not checked, do jsfiddle with the source code if you want to try.)

 // ... 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(); 

Alternatively, you can use a div with a texture as a background image and mask it to create a circle using CSS3 or by overlaying another image (see Best way to mask an image in HTML5 ). Then you change the coordinates of the background image (texture) with

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

Answer 3

This is pretty simple if you use CSS transforms. In this example, the rotation speed is determined in accordance with the scalar value of the speed at which the ball is currently passing:

  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)' }); 

This code is in the move method in plane . Here is a demo: http://jsfiddle.net/BahnU/show/