From 9ec23a3460e3ff26c409162fb630e196bdc9aa51 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 9 May 2018 17:58:29 +0200 Subject: [PATCH 1/3] Some improvements to the scrolling functionality --- minesweeper.js | 86 ++++++++++++++++++++++++++++---------------------- 1 file changed, 49 insertions(+), 37 deletions(-) diff --git a/minesweeper.js b/minesweeper.js index 0e80afd..823b614 100644 --- a/minesweeper.js +++ b/minesweeper.js @@ -129,8 +129,8 @@ function applyScaling() { } function calcScaling(field = fieldSize, tile = tileSize, zoom = zoomFactor) { - const width = Math.ceil(field.x * zoom); - const height = Math.ceil(field.y * zoom); + const width = Math.ceil(field.x * zoom) + 1; + const height = Math.ceil(field.y * zoom) + 1; const offsetX = Math.floor(windowX * field.x); const offsetY = Math.floor(windowY * field.y); @@ -195,6 +195,11 @@ function drawTile(x, y, animations = true) { const virtualX = renderingConfig.offsetX + x; const virtualY = renderingConfig.offsetY + y; + console.log(x, y); + + if(virtualX >= fieldSize.x || virtualY >= fieldSize.y) + return; + const content = field[virtualX][virtualY]; const width = .8 * renderingConfig.sizeX; @@ -219,13 +224,11 @@ function drawTile(x, y, animations = true) { if (content.tileValue !== 0) { text = content.tileValue; textColor = colors[content.tileValue]; - // animateText(content.tileValue, (x + .5) * tileSize.x, y * tileSize.y, 0, fontSize, new Date().getTime(), duration, colors[content.tileValue]); } } else if (content.flagged) { color = "#ff0000"; fontFamily = "FontAwesome"; text = ""; - // animateText("", (x + .5) * tileSize.x, y * tileSize.y, 0, fontSize, new Date().getTime(), duration, "white", "FontAwesome"); } animateTile(drawX, drawY, 0, 0, width, height, 0, radius, new Date().getTime(), duration, color); @@ -263,12 +266,14 @@ function getPosition(e) { const fieldX = Math.floor(x * fieldSize.x); const fieldY = Math.floor(y * fieldSize.y); + console.log(fieldX, fieldY); + return {x: fieldX, y: fieldY}; } function getSurroundingTiles(x, y) { const tiles = {}; - if (x > 0) { + if (x > 1) { tiles["left"] = {tileValue: field[x - 1][y], x: x - 1, y: y}; if (y > 0) { tiles["left-top"] = {tileValue: field[x - 1][y - 1], x: x - 1, y: y - 1}; @@ -360,6 +365,7 @@ function scaleCanvas() { function tileClickEvent(x, y) { if (gameOver) return; + console.log(x, y); uncoverTile(x, y); if (!field[x][y].flagged && field[x][y].tileValue === true) { gameOver = true; @@ -383,6 +389,9 @@ function tileFlag(x, y) { field[x][y].flagged = !field[x][y].flagged; field[x][y].clicked = field[x][y].flagged; + x -= renderingConfig.offsetX; + y -= renderingConfig.offsetY; + const drawX = (x - renderingConfig.tiltX) * renderingConfig.sizeX; const drawY = (y - renderingConfig.tiltY) * renderingConfig.sizeY; @@ -404,7 +413,7 @@ function uncoverTile(x, y) { return; } field[x][y].clicked = true; - drawTile(x, y, ); + drawTile(x - renderingConfig.offsetX, y - renderingConfig.offsetY); if (field[x][y].tileValue === true) { gameOverEvent(); } @@ -456,6 +465,9 @@ Object.prototype.countFlagged = function (val) { }; overlay2Canvas.addEventListener("click", (e) => { + if(isDragging) + return; + const pos = getPosition(e); if (isFirstClick) { @@ -471,6 +483,9 @@ overlay2Canvas.addEventListener("click", (e) => { }); overlay2Canvas.addEventListener("dblclick", (e) => { + if(isDragging) + return; + const pos = getPosition(e); tileDoubleClick(pos.x, pos.y); @@ -479,6 +494,9 @@ overlay2Canvas.addEventListener("dblclick", (e) => { }); overlay2Canvas.addEventListener("contextmenu", (e) => { + if(isDragging) + return; + e.preventDefault(); const pos = getPosition(e); @@ -516,57 +534,51 @@ window.addEventListener("keyup", (e) => { applyScaling(); }); -// let startClientX = 0; -// let startClientY = 0; -// -// let isDragging = false; +let startClientX = 0; +let startClientY = 0; +let startWindowX = 0; +let startWindowY = 0; -/*document.addEventListener("mousedown", (e) => { +let hasClicked = false; +let isDragging = false; + +document.addEventListener("mousedown", (e) => { if(e.button === 0) { - isDragging = true; + hasClicked = true; startClientX = e.clientX; startClientY = e.clientY; + startWindowX = windowX; + startWindowY = windowY; } }); -document.addEventListener("mouseup", (e) => { - isDragging = false; +document.addEventListener("mouseup", () => { + hasClicked = false; + if(isDragging) { + setTimeout(() => { + isDragging = false; + }, 10); + } }); document.addEventListener("mousemove", (e) => { - if(isDragging) { + if(hasClicked) { + isDragging = true; + const deltaX = e.clientX - startClientX; const deltaY = e.clientY - startClientY; - startClientX = e.clientX; - startClientY = e.clientY; - windowX -= 1 / deltaX / 10; - windowY -= 1 / deltaY / 10; + + windowX = startWindowX - deltaX / W; + windowY = startWindowY - deltaY / H; windowX = Math.min(windowX, 1 - zoomFactor); windowY = Math.min(windowY, 1 - zoomFactor); windowX = Math.max(windowX, 0); windowY = Math.max(windowY, 0); - console.log(windowX, windowY); - - // console.log(e, e.clientX - startClientX, e.clientY - startClientY); - // offsetX += (e.clientX - startClientX); - // offsetY += (e.clientY - startClientY); - // startClientX = e.clientX; - // startClientY = e.clientY; applyScaling(); } -});*/ - -// document.addEventListener("dragstart", (e) => { -// console.log(e); -// startClientX = e.clientX; -// startClientY = e.clientY; -// }); -// -// overlay2Canvas.addEventListener("drag", (e) => { -// console.log(startClientX - e.clientX); -// }); +}); window.addEventListener("resize", () => { scaleCanvas(); From a18439f1f0649b77ad2045d92b08f372348e8f1d Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 10 May 2018 10:08:41 +0200 Subject: [PATCH 2/3] Add bomb icon and fix game over screen --- minesweeper.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/minesweeper.js b/minesweeper.js index 823b614..304d7ed 100644 --- a/minesweeper.js +++ b/minesweeper.js @@ -195,8 +195,6 @@ function drawTile(x, y, animations = true) { const virtualX = renderingConfig.offsetX + x; const virtualY = renderingConfig.offsetY + y; - console.log(x, y); - if(virtualX >= fieldSize.x || virtualY >= fieldSize.y) return; @@ -221,7 +219,12 @@ function drawTile(x, y, animations = true) { if (!content.flagged && content.clicked) { color = "#ddd"; - if (content.tileValue !== 0) { + if(content.tileValue === true) { + text = ""; + fontFamily = "FontAwesome"; + textColor = "#aa2211"; + color = "#333"; + } else if (content.tileValue !== 0) { text = content.tileValue; textColor = colors[content.tileValue]; } @@ -256,8 +259,9 @@ function easeInOutCubic(t, b, c, d) { function gameOverEvent() { console.log("Game Over"); + play = false; animateBackground(0, 0, canvas.width, canvas.height, 0, .75, new Date().getTime(), 200, {r: 0, g: 0, b: 0, a: 0}); - animateText("Game Over", canvas.width / 2, canvas.height / 2, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx); + animateText("Game Over", fieldSize.x / 2, fieldSize.y / 2, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx); } function getPosition(e) { @@ -273,7 +277,7 @@ function getPosition(e) { function getSurroundingTiles(x, y) { const tiles = {}; - if (x > 1) { + if (x > 0) { tiles["left"] = {tileValue: field[x - 1][y], x: x - 1, y: y}; if (y > 0) { tiles["left-top"] = {tileValue: field[x - 1][y - 1], x: x - 1, y: y - 1}; From 0717443f65b9255295a67b93f726fd4b41b95055 Mon Sep 17 00:00:00 2001 From: Marcel Date: Thu, 10 May 2018 10:30:20 +0200 Subject: [PATCH 3/3] Improve victory animation --- .gitignore | 1 + animations/click.js | 22 +++++++++++----------- animations/victory.js | 4 ++-- minesweeper.js | 20 +++++++++----------- 4 files changed, 23 insertions(+), 24 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..bc8a670 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/* \ No newline at end of file diff --git a/animations/click.js b/animations/click.js index 9b7a030..ab85805 100644 --- a/animations/click.js +++ b/animations/click.js @@ -7,9 +7,9 @@ window.requestAnimFrame = (function (callback) { const overlayCanvas = document.getElementById('minesweeper-overlay'); const overlayCtx = overlayCanvas.getContext('2d'); -const particlesPerExplosion = 20; +const particlesPerExplosion = 10; const particlesMinSpeed = 3; -const particlesMaxSpeed = 6; +const particlesMaxSpeed = 5; const particlesMinSize = 3; const particlesMaxSize = 6; const explosions = []; @@ -28,10 +28,13 @@ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(naviga let play = true; // Draw -function draw() { +function drawClickAnimation() { // Loop if(play) - requestAnimationFrame(draw); + requestAnimationFrame(drawClickAnimation); + + if(explosions.length === 0) + return; // Set NOW and DELTA now = Date.now(); @@ -47,14 +50,11 @@ function draw() { // Our animation drawExplosion(); - } - } // Draw explosion(s) function drawExplosion() { - if (explosions.length === 0) { return; } @@ -138,9 +138,9 @@ function particle(x, y) { this.xv = randInt(particlesMinSpeed, particlesMaxSpeed, false); this.yv = randInt(particlesMinSpeed, particlesMaxSpeed, false); this.size = randInt(particlesMinSize, particlesMaxSize, true); - this.r = randInt(113, 222); - this.g = '00'; - this.b = randInt(105, 255); + this.r = randInt(2, 36); + this.g = randInt(135, 150); + this.b = randInt(190, 255); } // Returns an random integer, positive or negative @@ -159,4 +159,4 @@ function randInt(min, max, positive) { } -draw(); \ No newline at end of file +drawClickAnimation(); \ No newline at end of file diff --git a/animations/victory.js b/animations/victory.js index 23252a1..b3545d3 100644 --- a/animations/victory.js +++ b/animations/victory.js @@ -59,7 +59,7 @@ function drawVictory() { } } -function animate() { - requestAnimFrame(animate); +function animateVictory() { + requestAnimFrame(animateVictory); drawVictory(); } diff --git a/minesweeper.js b/minesweeper.js index 304d7ed..61e3b37 100644 --- a/minesweeper.js +++ b/minesweeper.js @@ -80,8 +80,6 @@ function animateTile(x, y, curWidth, curHeight, finalWidth, finalHeight, curRadi else 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); requestAnimFrame(() => { @@ -258,10 +256,9 @@ function easeInOutCubic(t, b, c, d) { } function gameOverEvent() { - console.log("Game Over"); play = false; 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) { @@ -367,7 +364,7 @@ function scaleCanvas() { } function tileClickEvent(x, y) { - if (gameOver) + if (gameOver || victory) return; console.log(x, y); uncoverTile(x, y); @@ -436,12 +433,13 @@ function victoryCheck() { } function victoryEvent() { - console.log("Win!"); - animate(); - play = false; - 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}); - animateText("Victory!", W / 2, H / 2 - fontSize / 2, 0, fontSize, new Date().getTime(), 200, "green", "Roboto", overlay2Ctx); + if(victory) { + animateVictory(); + play = false; + 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}); + animateText("Victory!", fieldSize.x / 2 - .5, fieldSize.y / 2 - .5, 0, fontSize, new Date().getTime(), 300, "green", "Roboto", overlay2Ctx); + } } Object.prototype.count = function (val) {