Dynamic page generator

animations/click.js

@@ -4,9 +4,6 @@ window.requestAnimFrame = (function (callback) {
     }
 })();
 
-const overlayCanvas = document.getElementById('minesweeper-overlay');
-const overlayCtx = overlayCanvas.getContext('2d');
-
 const particlesPerExplosion = 10;
 const particlesMinSpeed     = 3;
 const particlesMaxSpeed     = 5;
@@ -40,7 +37,7 @@ function drawClickAnimation() {
     now   = Date.now();
     delta = now - then;
 
-    overlayCtx.clearRect(0, 0, overlayCanvas.width, overlayCanvas.height);
+    game.layer1.clearRect(0, 0, game.width, game.height);
 
     // New frame
     if (delta > interval) {
@@ -81,11 +78,11 @@ function drawExplosion() {
                 continue;
             }
 
-            overlayCtx.beginPath();
+            game.layer1.beginPath();
-            overlayCtx.arc(particle.x, particle.y, particle.size, Math.PI * 2, 0, false);
+            game.layer1.arc(particle.x, particle.y, particle.size, Math.PI * 2, 0, false);
-            overlayCtx.closePath();
+            game.layer1.closePath();
-            overlayCtx.fillStyle = 'rgb(' + particle.r + ',' + particle.g + ',' + particle.b + ')';
+            game.layer1.fillStyle = 'rgb(' + particle.r + ',' + particle.g + ',' + particle.b + ')';
-            overlayCtx.fill();
+            game.layer1.fill();
 
             // Update
             particle.x += particle.xv;
@@ -158,5 +155,3 @@ function randInt(min, max, positive) {
     return num;
 
 }
-
-drawClickAnimation();

animations/victory.js

@@ -1,18 +1,10 @@
-const overlay2Canvas = document.getElementById('minesweeper-overlay2');
+let circles = [];
-const overlay2Ctx = overlay2Canvas.getContext('2d');
-
-let W = window.innerWidth,
-    H = window.innerHeight,
-    circles = [];
-
-overlay2Canvas.width = W;
-overlay2Canvas.height = H;
 
 //Random Circles creator
-function Create() {
+function create() {
     //Place the circles at the center
-    this.x = W/2;
+    this.x = game.width / 2;
-    this.y = H/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";
+    game.layer1.globalCompositeOperation = "source-over";
-    overlayCtx.fillStyle = "rgba(0,0,0,0.15)";
+    game.layer1.fillStyle = "rgba(0,0,0,0.15)";
-    overlayCtx.fillRect(0, 0, W, H);
+    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
+        //create the circles
-        overlayCtx.beginPath();
+        game.layer1.beginPath();
-        overlayCtx.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
+        game.layer1.arc(c.x, c.y, c.radius, 0, Math.PI*2, false);
-        overlayCtx.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
+        game.layer1.fillStyle = "rgba("+c.r+", "+c.g+", "+c.b+", 0.5)";
-        overlayCtx.fill();
+        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();
     }
 }
 

game.js

@@ -1,11 +1,35 @@
 class Game {
-    // tileSize;
-    // renderingConfig;
-    // timer;
-
     constructor() {
+        const elements = `<div id="game-stats">
+            <div class="stat-container">
+                <span id="bombs">
+                    000
+                </span>
+            </div>
+
+            <div class="stat-container right">
+                <span id="time">
+                    00:00
+                </span>
+            </div>
+        </div>
+
+        <div id="game-container">
+            <canvas id="minesweeper-game" width="100" height="100"></canvas>
+            <canvas id="minesweeper-overlay" width="100" height="100"></canvas>
+            <canvas id="minesweeper-overlay2" width="100" height="100"></canvas>
+        </div>`.toDOM();
+        document.body.appendChild(elements);
+
         this.canvas = document.getElementById('minesweeper-game');
         this.ctx = this.canvas.getContext('2d');
+
+        this.layer1Canvas = document.getElementById('minesweeper-overlay');
+        this.layer1 = this.layer1Canvas.getContext('2d');
+
+        this.layer2Canvas = document.getElementById('minesweeper-overlay2');
+        this.layer2 = this.layer2Canvas.getContext('2d');
+
         this.statsContainer = document.getElementById('game-stats');
         this.timeEl = document.getElementById('time');
         this.bombsEl = document.getElementById('bombs');
@@ -32,8 +56,6 @@ class Game {
         this.isDragging = false;
 
         this.ctx.scale(this.canvas.width / this.fieldSize.x * this.scaleFactor, this.canvas.height / this.fieldSize.y * this.scaleFactor);
-
-        this.initGame();
     }
 
     applyScaling() {
@@ -159,7 +181,7 @@ class Game {
             b: 0,
             a: 0
         });
-        animateText(overlay2Ctx, this.renderingConfig, "Game Over", this.fieldSize.x / 2 - .5, this.fieldSize.y / 2 - .5, 0, this.tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto");
+        animateText(this.layer2, this.renderingConfig, "Game Over", this.fieldSize.x / 2 - .5, this.fieldSize.y / 2 - .5, 0, this.tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto");
     }
 
     getColor(x, y) {
@@ -230,7 +252,7 @@ class Game {
     }
 
     initEventListeners() {
-        overlay2Canvas.addEventListener("click", (e) => {
+        this.layer2Canvas.addEventListener("click", (e) => {
             if (this.isDragging)
                 return;
 
@@ -249,7 +271,7 @@ class Game {
             clicked(e);
         });
 
-        overlay2Canvas.addEventListener("dblclick", (e) => {
+        this.layer2Canvas.addEventListener("dblclick", (e) => {
             if (this.isDragging)
                 return;
 
@@ -260,7 +282,7 @@ class Game {
             this.victoryEvent();
         });
 
-        overlay2Canvas.addEventListener("contextmenu", (e) => {
+        this.layer2Canvas.addEventListener("contextmenu", (e) => {
             if (this.isDragging)
                 return;
 
@@ -373,6 +395,7 @@ class Game {
 
         this.scaleCanvas();
         this.updateBombs();
+        drawClickAnimation();
 
         this.initEventListeners();
     }
@@ -401,22 +424,15 @@ class Game {
 
         this.tileSize = {x: size, y: size};
 
-        this.width = this.fieldSize.x * size;
+        this.width = this.canvas.width = this.layer1Canvas.width = this.layer2Canvas.width = this.fieldSize.x * size;
-        this.height = this.fieldSize.y * size;
+        this.height = this.canvas.height = this.layer1Canvas.height = this.layer2Canvas.height = this.fieldSize.y * size;
-
-        this.canvas.width = this.width;
-        this.canvas.height = this.height;
-        overlayCanvas.width = this.width;
-        overlayCanvas.height = this.height;
-        overlay2Canvas.width = this.width;
-        overlay2Canvas.height = this.height;
 
         this.statsContainer.style.width = this.width + "px";
 
-        initBalls();
-
         this.applyScaling();
 
+        initBalls();
+
         if (this.gameOver) {
             this.gameOverEvent();
         } else if (this.victoryCheck()) {
@@ -516,8 +532,7 @@ class Game {
                 b: 0,
                 a: 0
             });
-            animateText(overlay2Ctx, this.renderingConfig, "Victory!", this.fieldSize.x / 2 - .5, this.fieldSize.y / 2 - .5, 0, fontSize, new Date().getTime(), 300, "green", "Roboto");
+            animateText(this.layer2, this.renderingConfig, "Victory!", this.fieldSize.x / 2 - .5, this.fieldSize.y / 2 - .5, 0, fontSize, new Date().getTime(), 300, "green", "Roboto");
         }
     }
-
 }

index.html

@@ -53,26 +53,6 @@
 </head>
 <body style="margin: 0">
 
-<div id="game-stats">
-    <div class="stat-container">
-        <span id="bombs">
-            000
-        </span>
-    </div>
-
-    <div class="stat-container right">
-        <span id="time">
-            00:00
-        </span>
-    </div>
-</div>
-
-<div id="game-container">
-    <canvas id="minesweeper-game" width="100" height="100"></canvas>
-    <canvas id="minesweeper-overlay" width="100" height="100"></canvas>
-    <canvas id="minesweeper-overlay2" width="100" height="100"></canvas>
-</div>
-
 <script type="text/javascript" src="animations/click.js"></script>
 <script type="text/javascript" src="animations/victory.js"></script>
 <script type="text/javascript" src="game.js"></script>

minesweeper.js

@@ -141,4 +141,16 @@ Object.prototype.countFlagged = function (val) {
     return counter;
 };
 
-const game = new Game();
+String.prototype.toDOM=function(){
+    let d=document
+        ,i
+        ,a=d.createElement("div")
+        ,b=d.createDocumentFragment();
+    a.innerHTML=this;
+    while(i=a.firstChild)b.appendChild(i);
+    return b;
+};
+
+
+const game = new Game();
+game.initGame();