KingOfDog/minesweeper.js
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Dynamic page generator

Browse Source
This commit is contained in:
Marcel
2018-05-11 13:24:31 +02:00
parent 5b0265c1ab
commit 9875e043e9
5 changed files with 71 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
animations/click.js
View File

@@ -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();

36
animations/victory.js
View File

@@ -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();
}
}

61
game.js
View File

@@ -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.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");
}
}
}

20
index.html
View File

@@ -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>

12
minesweeper.js
View File

@@ -141,4 +141,16 @@ Object.prototype.countFlagged = function (val) {
return counter;
};
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();