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