From 9875e043e94ea5ffc306ef9fcaec7cc8c34b2d6b Mon Sep 17 00:00:00 2001 From: Marcel Date: Fri, 11 May 2018 13:24:31 +0200 Subject: [PATCH] Dynamic page generator --- animations/click.js | 17 +++++------- animations/victory.js | 36 ++++++++++--------------- game.js | 61 +++++++++++++++++++++++++++---------------- index.html | 20 -------------- minesweeper.js | 14 +++++++++- 5 files changed, 71 insertions(+), 77 deletions(-) diff --git a/animations/click.js b/animations/click.js index b33c1d2..1efdb76 100644 --- a/animations/click.js +++ b/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(); - 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(); + game.layer1.beginPath(); + game.layer1.arc(particle.x, particle.y, particle.size, Math.PI * 2, 0, false); + game.layer1.closePath(); + game.layer1.fillStyle = 'rgb(' + particle.r + ',' + particle.g + ',' + particle.b + ')'; + game.layer1.fill(); // Update particle.x += particle.xv; @@ -158,5 +155,3 @@ function randInt(min, max, positive) { return num; } - -drawClickAnimation(); diff --git a/animations/victory.js b/animations/victory.js index b3545d3..ef14800 100644 --- a/animations/victory.js +++ b/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(); } } diff --git a/game.js b/game.js index 6549ad4..50a7170 100644 --- a/game.js +++ b/game.js @@ -1,11 +1,35 @@ class Game { - // tileSize; - // renderingConfig; - // timer; - constructor() { + const elements = `
+
+ + 000 + +
+ +
+ + 00:00 + +
+
+ +
+ + + +
`.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.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.width = this.canvas.width = this.layer1Canvas.width = this.layer2Canvas.width = this.fieldSize.x * size; + this.height = this.canvas.height = this.layer1Canvas.height = this.layer2Canvas.height = this.fieldSize.y * size; 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"); } } - } \ No newline at end of file diff --git a/index.html b/index.html index 919a017..fcbe655 100644 --- a/index.html +++ b/index.html @@ -53,26 +53,6 @@ -
-
- - 000 - -
- -
- - 00:00 - -
-
- -
- - - -
- diff --git a/minesweeper.js b/minesweeper.js index 0c883ff..60235a8 100644 --- a/minesweeper.js +++ b/minesweeper.js @@ -141,4 +141,16 @@ Object.prototype.countFlagged = function (val) { return counter; }; -const game = new Game(); \ No newline at end of file +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(); \ No newline at end of file