Dynamic page generator

animations/victory.js

@@ -1,18 +1,10 @@
-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;
+let circles = [];
 
 //Random Circles creator
-function Create() {
+function create() {
     //Place the circles at the center
-    this.x = W/2;
-    this.y = H/2;
+    this.x = game.width / 2;
+    this.y = game.height / 2;
 
     //Random radius between 2 and 6
     this.radius = 2 + Math.random()*3;
@@ -30,32 +22,32 @@ function Create() {
 function initBalls() {
     circles = [];
     for (let i = 0; i < 500; i++) {
-        circles.push(new Create());
+        circles.push(new create());
     }
 }
 
 function drawVictory() {
     //Fill overlay2Canvas with black color
-    overlayCtx.globalCompositeOperation = "source-over";
-    overlayCtx.fillStyle = "rgba(0,0,0,0.15)";
-    overlayCtx.fillRect(0, 0, W, H);
+    game.layer1.globalCompositeOperation = "source-over";
+    game.layer1.fillStyle = "rgba(0,0,0,0.15)";
+    game.layer1.fillRect(0, 0, game.width, game.height);
 
     //Fill the overlay2Canvas with circles
     for(let j = 0; j < circles.length; j++){
         const c = circles[j];
 
-        //Create the circles
-        overlayCtx.beginPath();
-        overlayCtx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
-        overlayCtx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
-        overlayCtx.fill();
+        //create the circles
+        game.layer1.beginPath();
+        game.layer1.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
+        game.layer1.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
+        game.layer1.fill();
 
         c.x += c.vx;
         c.y += c.vy;
         c.radius -= .02;
 
         if(c.radius < 0)
-            circles[j] = new Create();
+            circles[j] = new create();
     }
 }