index.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html>
  2. <html>
  3. <style type="text/css">
  4. body { margin: 0; padding: 0; background: #000;}
  5. canvas { display: block; margin: 0 auto; background: #faf8cb; }
  6. </style>
  7. <script type="text/javascript" src="shape.js"></script>
  8. <script type="text/javascript" src="helpers.js"></script>
  9. <script type="text/javascript" src="thing.js"></script>
  10. <script type="text/javascript">
  11. var canvas = null;
  12. var ctx = null;
  13. var images = [];
  14. var audios = [];
  15. var things = [];
  16. function clicked(ev) {
  17. var point = relMouseCoords(ev);
  18. for (var i = 0; i < things.length; i++) {
  19. if (things[i].state != Thing.State.Moving)
  20. continue;
  21. if (things[i].rect.contains(point)) {
  22. things[i].explode();
  23. return;
  24. }
  25. }
  26. var WIDTH = 120;
  27. var r = Math.random();
  28. console.log(r);
  29. var idx = Math.round(r * (images.length-1));
  30. var b = new Thing(images[idx], audios[idx], point.translated(-25, -25), new Size(WIDTH, WIDTH * images[idx].height/images[idx].width));
  31. console.log(b.rect)
  32. things.push(b);
  33. }
  34. function gameLoop() {
  35. ctx.clearRect(0, 0, canvas.width, canvas.height);
  36. for (var i = 0; i < things.length; i++) {
  37. things[i].render(ctx);
  38. things[i].advance();
  39. }
  40. ctx.arc(100,100, 20 , 0, 6,false);
  41. requestAnimFrame(gameLoop);
  42. }
  43. function initialize() {
  44. console.log('window loaded');
  45. canvas = document.getElementById("scene");
  46. canvas.addEventListener('mousedown', clicked);
  47. resize();
  48. ctx = canvas.getContext("2d");
  49. var thingNames = [
  50. "cooker2", "caillou2", "elephant", "dinosaur2",
  51. "balloon", "train", "bus", "donald_duck", "ball",
  52. "giraffe", "mickey_mouse", "chipdale2" ];
  53. for (var i = 0; i < thingNames.length; i++) {
  54. var image = new Image;
  55. image.src = thingNames[i] + ".png";
  56. window.images.push(image);
  57. var audio = new Audio;
  58. audio.src = thingNames[i] + ".mp3";
  59. window.audios.push(audio);
  60. }
  61. window.requestAnimFrame(gameLoop);
  62. }
  63. function resize() {
  64. console.log('window resized');
  65. canvas.width = window.innerWidth;
  66. canvas.height = window.innerHeight;
  67. }
  68. window.addEventListener("load", initialize, false /* useCapture */);
  69. window.addEventListener("resize", resize, false /* useCapture */);
  70. </script>
  71. <head>
  72. <title>Flying things</title>
  73. <link rel="icon" type="image/png" href="flyingthings.png" sizes="64x64">
  74. </head>
  75. <body>
  76. <canvas id="scene"></canvas>
  77. </body>
  78. </html>