Initial Commit (first version of Minesweeper.js)

animations/click.js

@@ -0,0 +1,159 @@
+window.requestAnimFrame = (function (callback) {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function (callback) {
+        window.setTimeout(callback, 1000 / 60);
+    }
+})();
+
+const overlayCanvas = document.getElementById('minesweeper-overlay');
+const overlayCtx = overlayCanvas.getContext('2d');
+
+const particlesPerExplosion = 50;
+const particlesMinSpeed     = 3;
+const particlesMaxSpeed     = 6;
+const particlesMinSize      = 3;
+const particlesMaxSize      = 6;
+const explosions            = [];
+
+let fps        = 60;
+const interval = 1000 / fps;
+
+let now, delta;
+let then = Date.now();
+
+// Optimization for mobile devices
+if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+    fps = 29;
+}
+
+// Draw
+function draw() {
+    // Loop
+    requestAnimationFrame(draw);
+
+    // Set NOW and DELTA
+    now   = Date.now();
+    delta = now - then;
+
+    overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
+
+    // New frame
+    if (delta > interval) {
+
+        // Update THEN
+        then = now - (delta % interval);
+
+        // Our animation
+        drawExplosion();
+
+    }
+
+}
+
+// Draw explosion(s)
+function drawExplosion() {
+
+    if (explosions.length === 0) {
+        return;
+    }
+
+    for (let i = 0; i < explosions.length; i++) {
+
+        const explosion = explosions[i];
+        const particles = explosion.particles;
+
+        if (particles.length === 0) {
+            explosions.splice(i, 1);
+            return;
+        }
+
+        const particlesAfterRemoval = particles.slice();
+        for (let ii = 0; ii < particles.length; ii++) {
+
+            const particle = particles[ii];
+
+            // Check particle size
+            // If 0, remove
+            if (particle.size <= 0) {
+                particlesAfterRemoval.splice(ii, 1);
+                continue;
+            }
+
+            overlayCtx.beginPath();
+            overlayCtx.arc(particle.x, particle.y, particle.size, Math.PI * 2, 0, false);
+            overlayCtx.closePath();
+            overlayCtx.fillStyle = 'rgb(' + particle.r + ',' + particle.g + ',' + particle.b + ')';
+            overlayCtx.fill();
+
+            // Update
+            particle.x += particle.xv;
+            particle.y += particle.yv;
+            particle.size -= .1;
+        }
+
+        explosion.particles = particlesAfterRemoval;
+
+    }
+
+}
+
+// Clicked
+function clicked(e) {
+
+    let xPos, yPos;
+
+    if (e.offsetX) {
+        xPos = e.offsetX;
+        yPos = e.offsetY;
+    } else if (e.layerX) {
+        xPos = e.layerX;
+        yPos = e.layerY;
+    }
+
+    explosions.push(
+        new explosion(xPos, yPos)
+    );
+
+}
+
+// Explosion
+function explosion(x, y) {
+
+    this.particles = [];
+
+    for (let i = 0; i < particlesPerExplosion; i++) {
+        this.particles.push(
+            new particle(x, y)
+        );
+    }
+
+}
+
+// Particle
+function particle(x, y) {
+    this.x    = x;
+    this.y    = y;
+    this.xv   = randInt(particlesMinSpeed, particlesMaxSpeed, false);
+    this.yv   = randInt(particlesMinSpeed, particlesMaxSpeed, false);
+    this.size = randInt(particlesMinSize, particlesMaxSize, true);
+    this.r    = randInt(113, 222);
+    this.g    = '00';
+    this.b    = randInt(105, 255);
+}
+
+// Returns an random integer, positive or negative
+// between the given value
+function randInt(min, max, positive) {
+
+    let num;
+    if (positive === false) {
+        num = Math.floor(Math.random() * max) - min;
+        num *= Math.floor(Math.random() * 2) === 1 ? 1 : -1;
+    } else {
+        num = Math.floor(Math.random() * max) + min;
+    }
+
+    return num;
+
+}
+
+draw();