Membuat animasi bola yang membentur dinding secara acak dengan javascript canvas seperti gambar di bawah ini :
 | |
| Ball animation with javascript canvas |
1. <html lang="en">
2. <head>
3. <title>Ball Animation With Javascript Canvas</title>
4. <style type="text/css">
5. canvas {
6. border: 4px solid blue;
7. background-color:#33CCFF;
8. }
9. </style>
10. <script type="text/javascript" >
11. var cv;
12. var div;
13. var x = 10;
14. var y = 10;
15. var dx = 20;
16. var dy = 20;
17. var w = 400;
18. var h = 300;
19. function create(a,x,y,r) {
20. a.clearRect(0,0,w,h);
21. a.beginPath();
22. a.arc(x,y,r,0,Math.PI*2,true);
23. a.fillStyle='purple';
24. a.fill();
25. a.strokeStyle='black';
26. a.stroke();
27. a.closePath();
28. }
29. function move() {
30. y += dy;
31. x += dx;
32. if (y > h || y < 0 || x > w || x < 0) {
33. if (y > h || y < 0) dy = -dy;
34. if (x > w || x < 0) dx = -dx;
35. div = document.createElement('div');
36. div.innerHTML = '<audio src="ball-sound.wav" autoplay autobuffer></audio>';
37. document.getElementById('sound').appendChild(div);
38. }
39. }
40. function animation() {
41. create(cv,x,y,12);
42. move();
43. }
44. function animate() {
45. cv = document.getElementById('canvas').getContext('2d');
46. if (cv == 'undefined') alert('canvas failed');
47. return setInterval (animation,100);
48. }
49. </script>
50. </head>
51. <body onLoad="animate();">
52. <div id="sound"><canvas id="canvas" width="400" height="300"></canvas></div>
53. </body>
54. </html>
1 comment
The Star Casino: Get a £50 Bonus + 10 Free Spins
Read more about The Star Casino: Get a £50 Bonus + luckyclub 10 Free Spins
Posting Komentar