diff --git a/.gitignore b/.gitignore deleted file mode 100644 index bc8a670..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.idea/* \ No newline at end of file diff --git a/animations/click.js b/animations/click.js index ab85805..9b7a030 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 = 10; +const particlesPerExplosion = 20; const particlesMinSpeed = 3; -const particlesMaxSpeed = 5; +const particlesMaxSpeed = 6; const particlesMinSize = 3; const particlesMaxSize = 6; const explosions = []; @@ -28,13 +28,10 @@ if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(naviga let play = true; // Draw -function drawClickAnimation() { +function draw() { // Loop if(play) - requestAnimationFrame(drawClickAnimation); - - if(explosions.length === 0) - return; + requestAnimationFrame(draw); // Set NOW and DELTA now = Date.now(); @@ -50,11 +47,14 @@ function drawClickAnimation() { // 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(2, 36); - this.g = randInt(135, 150); - this.b = randInt(190, 255); + this.r = randInt(113, 222); + this.g = '00'; + this.b = randInt(105, 255); } // Returns an random integer, positive or negative @@ -159,4 +159,4 @@ function randInt(min, max, positive) { } -drawClickAnimation(); \ No newline at end of file +draw(); \ No newline at end of file diff --git a/animations/victory.js b/animations/victory.js index b3545d3..23252a1 100644 --- a/animations/victory.js +++ b/animations/victory.js @@ -59,7 +59,7 @@ function drawVictory() { } } -function animateVictory() { - requestAnimFrame(animateVictory); +function animate() { + requestAnimFrame(animate); drawVictory(); } diff --git a/minesweeper.js b/minesweeper.js index 61e3b37..0e80afd 100644 --- a/minesweeper.js +++ b/minesweeper.js @@ -80,6 +80,8 @@ 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(() => { @@ -127,8 +129,8 @@ function applyScaling() { } function calcScaling(field = fieldSize, tile = tileSize, zoom = zoomFactor) { - const width = Math.ceil(field.x * zoom) + 1; - const height = Math.ceil(field.y * zoom) + 1; + const width = Math.ceil(field.x * zoom); + const height = Math.ceil(field.y * zoom); const offsetX = Math.floor(windowX * field.x); const offsetY = Math.floor(windowY * field.y); @@ -193,9 +195,6 @@ function drawTile(x, y, animations = true) { const virtualX = renderingConfig.offsetX + x; const virtualY = renderingConfig.offsetY + y; - if(virtualX >= fieldSize.x || virtualY >= fieldSize.y) - return; - const content = field[virtualX][virtualY]; const width = .8 * renderingConfig.sizeX; @@ -217,19 +216,16 @@ function drawTile(x, y, animations = true) { if (!content.flagged && content.clicked) { color = "#ddd"; - if(content.tileValue === true) { - text = ""; - fontFamily = "FontAwesome"; - textColor = "#aa2211"; - color = "#333"; - } else if (content.tileValue !== 0) { + 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); @@ -256,9 +252,9 @@ function easeInOutCubic(t, b, c, d) { } function gameOverEvent() { - play = false; + console.log("Game Over"); 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 - .5, fieldSize.y / 2 - .5, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx); + animateText("Game Over", canvas.width / 2, canvas.height / 2, 0, tileSize.y * 1.33, new Date().getTime(), 200, "orange", "Roboto", overlay2Ctx); } function getPosition(e) { @@ -267,8 +263,6 @@ 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}; } @@ -364,9 +358,8 @@ function scaleCanvas() { } function tileClickEvent(x, y) { - if (gameOver || victory) + if (gameOver) return; - console.log(x, y); uncoverTile(x, y); if (!field[x][y].flagged && field[x][y].tileValue === true) { gameOver = true; @@ -390,9 +383,6 @@ 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; @@ -414,7 +404,7 @@ function uncoverTile(x, y) { return; } field[x][y].clicked = true; - drawTile(x - renderingConfig.offsetX, y - renderingConfig.offsetY); + drawTile(x, y, ); if (field[x][y].tileValue === true) { gameOverEvent(); } @@ -433,13 +423,12 @@ function victoryCheck() { } function victoryEvent() { - 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); - } + 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); } Object.prototype.count = function (val) { @@ -467,9 +456,6 @@ Object.prototype.countFlagged = function (val) { }; overlay2Canvas.addEventListener("click", (e) => { - if(isDragging) - return; - const pos = getPosition(e); if (isFirstClick) { @@ -485,9 +471,6 @@ overlay2Canvas.addEventListener("click", (e) => { }); overlay2Canvas.addEventListener("dblclick", (e) => { - if(isDragging) - return; - const pos = getPosition(e); tileDoubleClick(pos.x, pos.y); @@ -496,9 +479,6 @@ overlay2Canvas.addEventListener("dblclick", (e) => { }); overlay2Canvas.addEventListener("contextmenu", (e) => { - if(isDragging) - return; - e.preventDefault(); const pos = getPosition(e); @@ -536,51 +516,57 @@ window.addEventListener("keyup", (e) => { applyScaling(); }); -let startClientX = 0; -let startClientY = 0; -let startWindowX = 0; -let startWindowY = 0; +// let startClientX = 0; +// let startClientY = 0; +// +// let isDragging = false; -let hasClicked = false; -let isDragging = false; - -document.addEventListener("mousedown", (e) => { +/*document.addEventListener("mousedown", (e) => { if(e.button === 0) { - hasClicked = true; + isDragging = true; startClientX = e.clientX; startClientY = e.clientY; - startWindowX = windowX; - startWindowY = windowY; } }); -document.addEventListener("mouseup", () => { - hasClicked = false; - if(isDragging) { - setTimeout(() => { - isDragging = false; - }, 10); - } +document.addEventListener("mouseup", (e) => { + isDragging = false; }); document.addEventListener("mousemove", (e) => { - if(hasClicked) { - isDragging = true; - + if(isDragging) { const deltaX = e.clientX - startClientX; const deltaY = e.clientY - startClientY; - - windowX = startWindowX - deltaX / W; - windowY = startWindowY - deltaY / H; + startClientX = e.clientX; + startClientY = e.clientY; + windowX -= 1 / deltaX / 10; + windowY -= 1 / deltaY / 10; 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();