Using transitions to animate image movement on the screen is great fun and, it works on the iPhone.
Prepare three images: the golf green, the golf ball, and the golf ball's shadow.
<div id="green"></div> <style type="text/css"> #green { margin:0 auto; background:transparent url('08_golf_green.jpg') no-repeat 0 0; width:500px; height:500px; } </style> <script type="text/javascript"> // inject the ball var ball = new Element('img',{ id: 'ball', src: '08_golf_ball.png', style: 'width:10px; position:absolute;', morph: { link:'chain', transition:'linear' } }).inject('green','top'); // inject the ball's shadow var shad = new Element('img',{ ... alert('Ready?');
We also need the movement coordinates of the ball.
// top, left, width var ballmov = [ [150, 10, 10], [ 20, 20, 10], // bounce 1 [160, 30, 10], [100, 40, 10], // bounce 2 [180, 50, 15], [140, 75, 20], // bounce 3 [220,100, 25], [200,150, 30], // bounce...