Improve victory animation

.gitignore

@@ -0,0 +1 @@
+.idea/*

animations/click.js

@@ -7,9 +7,9 @@ window.requestAnimFrame = (function (callback) {
 const overlayCanvas = document.getElementById('minesweeper-overlay');
 const overlayCtx = overlayCanvas.getContext('2d');
 
-const particlesPerExplosion = 20;
+const particlesPerExplosion = 10;
 const particlesMinSpeed     = 3;
-const particlesMaxSpeed     = 6;
+const particlesMaxSpeed     = 5;
 const particlesMinSize      = 3;
 const particlesMaxSize      = 6;
 const explosions            = [];
@@ -28,10 +28,13 @@ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(naviga
 let play = true;
 
 // Draw
-function draw() {
+function drawClickAnimation() {
     // Loop
     if(play)
-        requestAnimationFrame(draw);
+        requestAnimationFrame(drawClickAnimation);
+
+    if(explosions.length === 0)
+        return;
 
     // Set NOW and DELTA
     now   = Date.now();
@@ -47,14 +50,11 @@ function draw() {
 
         // Our animation
         drawExplosion();
-
     }
-
 }
 
 // Draw explosion(s)
 function drawExplosion() {
-
     if (explosions.length === 0) {
         return;
     }
@@ -138,9 +138,9 @@ function particle(x, 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);
+    this.r    = randInt(2, 36);
+    this.g    = randInt(135, 150);
+    this.b    = randInt(190, 255);
 }
 
 // Returns an random integer, positive or negative
@@ -159,4 +159,4 @@ function randInt(min, max, positive) {
 
 }
 
-draw();
+drawClickAnimation();

animations/victory.js

@@ -59,7 +59,7 @@ function drawVictory() {
     }
 }
 
-function animate() {
-    requestAnimFrame(animate);
+function animateVictory() {
+    requestAnimFrame(animateVictory);
     drawVictory();
 }

minesweeper.js

@@ -80,8 +80,6 @@ function animateTile(x, y, curWidth, curHeight, finalWidth, finalHeight, curRadi
     else
         curRadius = finalRadius;
 
-    // drawRoundedRect(ctx, x + 1, y + 1, finalWidth - 2, finalHeight - 2, finalRadius, getColor(x, y));
-
     drawRoundedRect(ctx, x + (finalWidth - curWidth) / 2, y + (finalHeight - curHeight) / 2, curWidth, curHeight, curRadius, color);
 
     requestAnimFrame(() => {
@@ -258,10 +256,9 @@ function easeInOutCubic(t, b, c, d) {
 }
 
 function gameOverEvent() {
-    console.log("Game Over");
     play = false;
     animateBackground(0, 0, canvas.width, canvas.height, 0, .75, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0});
-    animateText("Game Over", fieldSize.x / 2, fieldSize.y / 2, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx);
+    animateText("Game Over", fieldSize.x / 2 - .5, fieldSize.y / 2 - .5, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx);
 }
 
 function getPosition(e) {
@@ -367,7 +364,7 @@ function scaleCanvas() {
 }
 
 function tileClickEvent(x, y) {
-    if (gameOver)
+    if (gameOver || victory)
         return;
     console.log(x, y);
     uncoverTile(x, y);
@@ -436,12 +433,13 @@ function victoryCheck() {
 }
 
 function victoryEvent() {
-    console.log("Win!");
-    animate();
+    if(victory) {
+        animateVictory();
         play = false;
         const fontSize = tileSize.y * 1.33;
         animateBackground(0, 0, canvas.width, canvas.height, 0, .01, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0});
-    animateText("Victory!", W / 2, H / 2 - fontSize / 2, 0, fontSize, new Date().getTime(), 200, "green", "Roboto", overlay2Ctx);
+        animateText("Victory!", fieldSize.x / 2 - .5, fieldSize.y / 2 - .5, 0, fontSize, new Date().getTime(), 300, "green", "Roboto", overlay2Ctx);
+    }
 }
 
 Object.prototype.count = function (val) {