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();

animations/victory.js

@@ -0,0 +1,66 @@
+const overlay2Canvas = document.getElementById('minesweeper-overlay2');
+const overlay2Ctx = overlay2Canvas.getContext('2d');
+
+let W = window.innerWidth,
+    H = window.innerHeight,
+    circles = [];
+
+overlay2Canvas.width = W;
+overlay2Canvas.height = H;
+
+//Random Circles creator
+function create() {
+
+    //Place the circles at the center
+
+    this.x = W/2;
+    this.y = H/2;
+
+
+    //Random radius between 2 and 6
+    this.radius = 2 + Math.random()*3;
+
+    //Random velocities
+    this.vx = -5 + Math.random()*10;
+    this.vy = -5 + Math.random()*10;
+
+    //Random colors
+    this.r = Math.round(Math.random())*255;
+    this.g = Math.round(Math.random())*255;
+    this.b = Math.round(Math.random())*255;
+}
+
+for (var i = 0; i < 500; i++) {
+    circles.push(new create());
+}
+
+function drawVictory() {
+
+    //Fill overlay2Canvas with black color
+    overlay2Ctx.globalCompositeOperation = "source-over";
+    overlay2Ctx.fillStyle = "rgba(0,0,0,0.15)";
+    overlay2Ctx.fillRect(0, 0, W, H);
+
+    //Fill the overlay2Canvas with circles
+    for(var j = 0; j < circles.length; j++){
+        var c = circles[j];
+
+        //Create the circles
+        overlay2Ctx.beginPath();
+        overlay2Ctx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
+        overlay2Ctx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
+        overlay2Ctx.fill();
+
+        c.x += c.vx;
+        c.y += c.vy;
+        c.radius -= .02;
+
+        if(c.radius < 0)
+            circles[j] = new create();
+    }
+}
+
+function animate() {
+    requestAnimFrame(animate);
+    drawVictory();
+}