Browse Source

Initial version

Girish Ramakrishnan 7 years ago
commit
8566cd32c3
23 changed files with 248 additions and 0 deletions
  1. 8 0
      TODO
  2. BIN
      ball.png
  3. BIN
      balloon.png
  4. BIN
      bus.png
  5. BIN
      caillou2.png
  6. BIN
      chipdale2.png
  7. BIN
      cooker2.png
  8. BIN
      dinosaur.png
  9. BIN
      dinosaur2.png
  10. BIN
      donald_duck.png
  11. BIN
      elephant.mp3
  12. BIN
      elephant.png
  13. BIN
      elephant1.png
  14. BIN
      flyingthings.png
  15. BIN
      giraffe.png
  16. 30 0
      helpers.js
  17. 88 0
      index.html
  18. BIN
      mickey_mouse.png
  19. 40 0
      shape.js
  20. 82 0
      thing.js
  21. BIN
      train.mp3
  22. BIN
      train.png
  23. BIN
      train2.png

+ 8 - 0
TODO

@@ -0,0 +1,8 @@
+Initial version
+    - DOM element mouse mapping
+    - Canvas scales with CSS
+    - Images looks too small on the tablets and move very slowly
+    - Viewport scrolls
+    - Orientation doesn't work
+    - Canavs is not an animation API
+    - Audio takes a lot of time to play

BIN
ball.png


BIN
balloon.png


BIN
bus.png


BIN
caillou2.png


BIN
chipdale2.png


BIN
cooker2.png


BIN
dinosaur.png


BIN
dinosaur2.png


BIN
donald_duck.png


BIN
elephant.mp3


BIN
elephant.png


BIN
elephant1.png


BIN
flyingthings.png


BIN
giraffe.png


+ 30 - 0
helpers.js

@@ -0,0 +1,30 @@
+function relMouseCoords(event){
+    var totalOffsetX = 0;
+    var totalOffsetY = 0;
+    var canvasX = 0;
+    var canvasY = 0;
+    var el = event.currentTarget;
+
+    do {
+        totalOffsetX += el.offsetLeft - el.scrollLeft;
+        totalOffsetY += el.offsetTop - el.scrollTop;
+    } while (el = el.offsetParent);
+
+    canvasX = event.pageX - totalOffsetX - document.body.scrollLeft;
+    canvasY = event.pageY - totalOffsetY - document.body.scrollTop;
+
+    return new Point(canvasX, canvasY);
+}
+
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating
+// shim layer with setTimeout fallback
+window.requestAnimFrame = (function(){
+    return  window.requestAnimationFrame       ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame    ||
+        window.oRequestAnimationFrame      ||
+        window.msRequestAnimationFrame     ||
+        function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+        };
+})();

+ 88 - 0
index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+<style type="text/css">
+    body { margin: 0; padding: 0; background: #000;}
+    canvas { display: block; margin: 0 auto; background: #faf8cb; }
+</style>
+<script type="text/javascript" src="shape.js"></script>
+<script type="text/javascript" src="helpers.js"></script>
+<script type="text/javascript" src="thing.js"></script>
+<script type="text/javascript">
+
+    var canvas = null;
+    var ctx = null;
+    var images = [];
+    var audios = [];
+    var things = [];
+
+    function clicked(ev) {
+        var point = relMouseCoords(ev);
+        for (var i = 0; i < things.length; i++) {
+            if (things[i].state != Thing.State.Moving)
+                continue;
+            if (things[i].rect.contains(point)) {
+                things[i].explode();
+                return;
+            }
+        }
+        var WIDTH = 120;
+        var r = Math.random();
+        console.log(r);
+        var idx = Math.round(r * (images.length-1));
+        var b = new Thing(images[idx], audios[idx], point.translated(-25, -25), new Size(WIDTH, WIDTH * images[idx].height/images[idx].width));
+        console.log(b.rect)
+        things.push(b);
+    }
+
+    function gameLoop() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        for (var i = 0; i < things.length; i++) {
+            things[i].render(ctx);
+            things[i].advance();
+        }
+        ctx.arc(100,100, 20 , 0, 6,false);
+
+        requestAnimFrame(gameLoop);
+    }
+
+    function initialize() {
+        console.log('window loaded');
+        canvas = document.getElementById("scene");
+        canvas.addEventListener('mousedown', clicked);
+        resize();
+        ctx = canvas.getContext("2d");
+        var thingNames = [
+            "cooker2", "caillou2", "elephant", "dinosaur2",
+            "balloon", "train", "bus", "donald_duck", "ball",
+            "giraffe", "mickey_mouse", "chipdale2" ];
+        for (var i = 0; i < thingNames.length; i++) {
+            var image = new Image;
+            image.src = thingNames[i] + ".png";
+            window.images.push(image);
+
+            var audio = new Audio;
+            audio.src = thingNames[i] + ".mp3";
+            window.audios.push(audio);
+        }
+        window.requestAnimFrame(gameLoop);
+    }
+
+    function resize() {
+        console.log('window resized');
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+    }
+
+    window.addEventListener("load", initialize, false /* useCapture */);
+    window.addEventListener("resize", resize, false /* useCapture */);
+
+</script>
+<head>
+    <title>What's that supposed to be</title>
+    <link rel="icon" type="image/png" href="flyingthings.png" sizes="64x64">
+</head>
+<body>
+    <canvas id="scene"></canvas>
+</body>
+</html>
+

BIN
mickey_mouse.png


+ 40 - 0
shape.js

@@ -0,0 +1,40 @@
+function Point(x, y) {
+    this.x = x;
+    this.y = y;
+}
+Point.prototype.translate = function(dx, dy) {
+    this.x += dx;
+    this.y += dy;
+    return this;
+}
+Point.prototype.translated = function(dx, dy) {
+    return new Point(this.x+dx, this.y+dy);
+}
+
+function Rect(x, y, w, h) {
+    if (arguments.length == 2) {
+        this.x = x.x;
+        this.y = x.y;
+        this.width = y.width;
+        this.height = y.height;
+    } else {
+        this.x = x;
+        this.y = y;
+        this.width = w;
+        this.height = height;
+    }
+}
+
+Rect.prototype.contains = function(p) {
+    return (this.x <= p.x) && (this.x+this.width >= p.x)
+        && (this.y <= p.y) && (this.y+this.height >= p.y);
+}
+
+Rect.prototype.center = function(p) {
+    return new Point(this.x+this.width/2, this.y+this.height/2);
+}
+
+function Size(w, h) {
+    this.width = w;
+    this.height = h;
+}

+ 82 - 0
thing.js

@@ -0,0 +1,82 @@
+function Particle(pos, radius, angle, step) {
+    this.pos = pos;
+    this.radius = radius;
+    this.angle = angle;
+    this.curStep = step;
+}
+Particle.prototype.render = function(ctx) {
+    if (this.curStep > this.radius)
+        return;
+    var x = this.pos.x + this.curStep * Math.cos(this.angle);
+    var y = this.pos.y + this.curStep * Math.sin(this.angle);
+    var oldFillStyle = ctx.fillStyle;
+    ctx.fillStyle = "rgba(200, 0, 0, 0.5)";
+    ctx.beginPath();
+    ctx.arc(x, y, 2 /* radius */, 0, 2 * Math.PI, false);
+    ctx.closePath();
+    ctx.fill();
+    ctx.fillStyle = oldFillStyle;
+}
+
+Particle.prototype.advance = function() {
+    if (this.curStep <= this.radius)
+        ++this.curStep;
+}
+
+function Thing(image, audio, point, size) {
+    this.image = image;
+    this.audio = audio;
+    if (arguments.length == 1) {
+        this.rect = point;
+    } else {
+        this.rect = new Rect(point, size);
+    }
+    this.alpha = 1.0;
+    this.visible = true;
+    this.state = Thing.State.Moving;
+    this.particles = [];
+}
+Thing.State = {
+    Exploding: 0,
+    Moving: 1
+};
+Thing.prototype.render = function(ctx) {
+    if (this.rect.y + this.rect.height >= 0 && this.alpha != 0) {
+        var oldAlpha = ctx.globalAlpha;
+        ctx.globalAlpha = this.alpha;
+        ctx.drawImage(this.image, this.rect.x, this.rect.y, this.rect.width, this.rect.height);
+        ctx.globalAlpha = oldAlpha;
+    }
+
+    if (this.state == Thing.State.Exploding) {
+        for (var i = 0; i < this.particles.length; i++) {
+            this.particles[i].render(ctx);
+        }
+    }
+}
+Thing.prototype.explode = function() {
+    this.state = Thing.State.Exploding;
+    var PARTICLE_COUNT = 40;
+    var radius = this.rect.width/2 + 10; // ## half length of diagonal really
+    var step = (360/PARTICLE_COUNT);
+    for (var i = 0; i < PARTICLE_COUNT; i++) {
+        var angle = step*i + Math.floor(Math.random() * step);
+        this.particles.push(new Particle(this.rect.center(), radius, angle, Math.floor(Math.random() * 10) + 1));
+    }
+    this.audio.play();
+}
+
+Thing.prototype.advance = function() {
+    if (this.state == Thing.State.Moving) {
+        --this.rect.y;
+    } else if (this.state == Thing.State.Exploding) {
+        if (this.alpha > 0)
+            this.alpha -= 0.04;
+        if (this.alpha < 0)
+            this.alpha = 0;
+    }
+
+    for (var i = 0; i < this.particles.length; i++) {
+        this.particles[i].advance();
+    }
+}

BIN
train.mp3


BIN
train.png


BIN
train2.png