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

Improve victory animation

Browse Source
This commit is contained in:
Marcel
2018-05-10 10:30:20 +02:00
parent a18439f1f0
commit 0717443f65
4 changed files with 23 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.idea/*

22
animations/click.js
View File

@@ -7,9 +7,9 @@ window.requestAnimFrame = (function (callback) {
const overlayCanvas = document.getElementById('minesweeper-overlay'); const overlayCanvas = document.getElementById('minesweeper-overlay');
const overlayCtx = overlayCanvas.getContext('2d'); const overlayCtx = overlayCanvas.getContext('2d');
const particlesPerExplosion = 20; const particlesPerExplosion = 10;
const particlesMinSpeed = 3; const particlesMinSpeed = 3;
const particlesMaxSpeed = 6; const particlesMaxSpeed = 5;
const particlesMinSize = 3; const particlesMinSize = 3;
const particlesMaxSize = 6; const particlesMaxSize = 6;
const explosions = []; const explosions = [];
@@ -28,10 +28,13 @@ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(naviga
let play = true; let play = true;
// Draw // Draw
function draw() { function drawClickAnimation() {
// Loop // Loop
if(play) if(play)
requestAnimationFrame(draw); requestAnimationFrame(drawClickAnimation);
if(explosions.length === 0)
return;
// Set NOW and DELTA // Set NOW and DELTA
now = Date.now(); now = Date.now();
@@ -47,14 +50,11 @@ function draw() {
// Our animation // Our animation
drawExplosion(); drawExplosion();
} }
} }
// Draw explosion(s) // Draw explosion(s)
function drawExplosion() { function drawExplosion() {
if (explosions.length === 0) { if (explosions.length === 0) {
return; return;
} }
@@ -138,9 +138,9 @@ function particle(x, y) {
this.xv = randInt(particlesMinSpeed, particlesMaxSpeed, false); this.xv = randInt(particlesMinSpeed, particlesMaxSpeed, false);
this.yv = randInt(particlesMinSpeed, particlesMaxSpeed, false); this.yv = randInt(particlesMinSpeed, particlesMaxSpeed, false);
this.size = randInt(particlesMinSize, particlesMaxSize, true); this.size = randInt(particlesMinSize, particlesMaxSize, true);
this.r = randInt(113, 222); this.r = randInt(2, 36);
this.g = '00'; this.g = randInt(135, 150);
this.b = randInt(105, 255); this.b = randInt(190, 255);
} }
// Returns an random integer, positive or negative // Returns an random integer, positive or negative
@@ -159,4 +159,4 @@ function randInt(min, max, positive) {
} }
draw(); drawClickAnimation();

4
animations/victory.js
View File

@@ -59,7 +59,7 @@ function drawVictory() {
} }
} }
function animate() { function animateVictory() {
requestAnimFrame(animate); requestAnimFrame(animateVictory);
drawVictory(); drawVictory();
} }

20
minesweeper.js
View File

@@ -80,8 +80,6 @@ function animateTile(x, y, curWidth, curHeight, finalWidth, finalHeight, curRadi
else else
curRadius = finalRadius; curRadius = finalRadius;
// drawRoundedRect(ctx, x + 1, y + 1, finalWidth - 2, finalHeight - 2, finalRadius, getColor(x, y));
drawRoundedRect(ctx, x + (finalWidth - curWidth) / 2, y + (finalHeight - curHeight) / 2, curWidth, curHeight, curRadius, color); drawRoundedRect(ctx, x + (finalWidth - curWidth) / 2, y + (finalHeight - curHeight) / 2, curWidth, curHeight, curRadius, color);
requestAnimFrame(() => { requestAnimFrame(() => {
@@ -258,10 +256,9 @@ function easeInOutCubic(t, b, c, d) {
} }
function gameOverEvent() { function gameOverEvent() {
console.log("Game Over");
play = false; play = false;
animateBackground(0, 0, canvas.width, canvas.height, 0, .75, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0}); animateBackground(0, 0, canvas.width, canvas.height, 0, .75, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0});
animateText("Game Over", fieldSize.x / 2, fieldSize.y / 2, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx); animateText("Game Over", fieldSize.x / 2 - .5, fieldSize.y / 2 - .5, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx);
} }
function getPosition(e) { function getPosition(e) {
@@ -367,7 +364,7 @@ function scaleCanvas() {
} }
function tileClickEvent(x, y) { function tileClickEvent(x, y) {
if (gameOver) if (gameOver || victory)
return; return;
console.log(x, y); console.log(x, y);
uncoverTile(x, y); uncoverTile(x, y);
@@ -436,12 +433,13 @@ function victoryCheck() {
} }
function victoryEvent() { function victoryEvent() {
console.log("Win!"); if(victory) {
animate(); animateVictory();
play = false; play = false;
const fontSize = tileSize.y * 1.33; const fontSize = tileSize.y * 1.33;
animateBackground(0, 0, canvas.width, canvas.height, 0, .01, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0}); animateBackground(0, 0, canvas.width, canvas.height, 0, .01, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0});
animateText("Victory!", W / 2, H / 2 - fontSize / 2, 0, fontSize, new Date().getTime(), 200, "green", "Roboto", overlay2Ctx); animateText("Victory!", fieldSize.x / 2 - .5, fieldSize.y / 2 - .5, 0, fontSize, new Date().getTime(), 300, "green", "Roboto", overlay2Ctx);
}
} }
Object.prototype.count = function (val) { Object.prototype.count = function (val) {