Fix rendering issues when resizing window

animations/victory.js

@@ -9,7 +9,7 @@ overlay2Canvas.width = W;
 overlay2Canvas.height = H;
 
 //Random Circles creator
-function create() {
+function Create() {
     //Place the circles at the center
     this.x = W/2;
     this.y = H/2;
@@ -28,8 +28,9 @@ function create() {
 }
 
 function initBalls() {
+    circles = [];
     for (let i = 0; i < 500; i++) {
-        circles.push(new create());
+        circles.push(new Create());
     }
 }
 
@@ -54,7 +55,7 @@ function drawVictory() {
         c.radius -= .02;
 
         if(c.radius < 0)
-            circles[j] = new create();
+            circles[j] = new Create();
     }
 }
 

minesweeper.js

@@ -136,11 +136,11 @@ function countFlaggedBombs(x, y) {
     return tiles.countFlagged(true);
 }
 
-function drawGrid() {
+function drawGrid(animations = true) {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     for (let x = 0; x < fieldSize.x; x++) {
         for (let y = 0; y < fieldSize.y; y++) {
-            drawTile(x, y);
+            drawTile(x, y, animations);
         }
     }
 }
@@ -159,32 +159,30 @@ function drawRoundedRect(context, x, y, w, h, r, color) {
     context.fill();
 }
 
-function drawTile(x, y) {
+function drawTile(x, y, animations = true) {
     const fontSize = tileSize.y * scaleFactor;
     ctx.textAlign = "center";
+    let duration = 150;
+    if (!animations)
+        duration = 0;
+    console.log(animations);
     if (!field[x][y].flagged && field[x][y].clicked) {
         animateTile(x * tileSize.x + .1 * tileSize.x, y * tileSize.y + .1 * tileSize.y,
             0, 0,
             tileSize.x - (.2 * tileSize.x), tileSize.y - (.2 * tileSize.y),
             0, tileSize.x * .1,
-            new Date().getTime(), 150, "#ddd");
-        setTimeout(() => {
-
-        }, 151);
+            new Date().getTime(), duration, "#ddd");
         if (field[x][y].tileValue !== 0) {
-            animateText(field[x][y].tileValue, (x + .5) * tileSize.x, y * tileSize.y, 0, fontSize, new Date().getTime(), 150, colors[field[x][y].tileValue]);
-            setTimeout(() => {
-                animateText(field[x][y].tileValue, (x + .5) * tileSize.x, y * tileSize.y, fontSize, fontSize, new Date().getTime(), 1, colors[field[x][y].tileValue]);
-            }, 151);
+            animateText(field[x][y].tileValue, (x + .5) * tileSize.x, y * tileSize.y, 0, fontSize, new Date().getTime(), duration, colors[field[x][y].tileValue]);
         }
     } else if (field[x][y].flagged) {
         animateTile(x * tileSize.x + .1 * tileSize.x, y * tileSize.y + .1 * tileSize.y,
             0, 0,
             tileSize.x - (.2 * tileSize.x), tileSize.y - (.2 * tileSize.y),
             0, tileSize.x * .1,
-            new Date().getTime(), 150, "#ff0000");
+            new Date().getTime(), duration, "#ff0000");
 
-        animateText("", (x + .5) * tileSize.x, y * tileSize.y, 0, fontSize, new Date().getTime(), 150, "white", "FontAwesome");
+        animateText("", (x + .5) * tileSize.x, y * tileSize.y, 0, fontSize, new Date().getTime(), duration, "white", "FontAwesome");
     } else {
         drawRoundedRect(ctx, x * tileSize.x + (.1 * tileSize.x), y * tileSize.y + (.1 * tileSize.y), tileSize.x - (.2 * tileSize.x), tileSize.y - (.2 * tileSize.y), tileSize.x * .1, "#2e8cdd");
     }
@@ -248,7 +246,6 @@ function initGame() {
     }
 
     scaleCanvas();
-    initBalls();
 }
 
 function initBombs(startX, startY) {
@@ -286,9 +283,13 @@ function scaleCanvas() {
     overlay2Canvas.width = W;
     overlay2Canvas.height = H;
 
-    drawGrid();
+    initBalls();
+
+    drawGrid(false);
     if (gameOver) {
         gameOverEvent();
+    } else if (victory) {
+        victoryEvent();
     }
 }