diff --git a/.gitignore b/.gitignore index 1c2d52b..65881ab 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ .idea/* +icons/Minesweeper Icon.ai +icons/icon.svg diff --git a/css/style.css b/css/style.css index 54ebe57..7ff8aee 100644 --- a/css/style.css +++ b/css/style.css @@ -1,18 +1,37 @@ @font-face { font-family: "Roboto"; - src: url("/fonts/Roboto-Regular.ttf"); + font-weight: 500; + src: url("../fonts/Roboto-Regular.ttf"); +} + +@font-face { + font-family: "Roboto Bold"; + font-weight: bold; + src: url("../fonts/Roboto-Bold.ttf"); +} + +@font-face { + font-family: "Roboto Black"; + font-weight: bold; + src: url("../fonts/Roboto-Black.ttf"); +} + +@font-face { + font-family: "Roboto Light"; + font-weight: 100; + src: url("../fonts/Roboto-Light.ttf"); } @font-face { font-family: "SF Digital Readout"; - src: url("/fonts/SFDigitalReadout-Heavy.ttf"); + src: url("../fonts/SFDigitalReadout-Medium.ttf"); } html { overflow: hidden; } -body { +html, body, p, button, h1, h2 { margin: 0; font-family: Roboto, Helvetica, Arial, sans-serif; font-size: 1.4em; @@ -74,7 +93,9 @@ body { } .start-container h3 { - font-weight: lighter; + font-size: .8em; + font-family: "Roboto Light", Roboto, Helvetica, sans-serif; + font-weight: 100; } button { @@ -121,9 +142,9 @@ button:active { .game-container { position: absolute; - bottom: 2.5%; + top: 52.5vh; left: 50%; - transform: translateX(-50%); + transform: translate(-50%, -50%); } .game-stats { diff --git a/fonts/Roboto-Black.ttf b/fonts/Roboto-Black.ttf new file mode 100644 index 0000000..fbde625 Binary files /dev/null and b/fonts/Roboto-Black.ttf differ diff --git a/fonts/Roboto-Bold.ttf b/fonts/Roboto-Bold.ttf new file mode 100644 index 0000000..a355c27 Binary files /dev/null and b/fonts/Roboto-Bold.ttf differ diff --git a/fonts/Roboto-Light.ttf b/fonts/Roboto-Light.ttf new file mode 100644 index 0000000..94c6bcc Binary files /dev/null and b/fonts/Roboto-Light.ttf differ diff --git a/fonts/SFDigitalReadout-Heavy.ttf b/fonts/SFDigitalReadout-Heavy.ttf deleted file mode 100644 index 3efe6e2..0000000 Binary files a/fonts/SFDigitalReadout-Heavy.ttf and /dev/null differ diff --git a/fonts/SFDigitalReadout-Medium.ttf b/fonts/SFDigitalReadout-Medium.ttf new file mode 100644 index 0000000..ef937e6 Binary files /dev/null and b/fonts/SFDigitalReadout-Medium.ttf differ diff --git a/game.js b/game.js index dcc76d3..48988a6 100644 --- a/game.js +++ b/game.js @@ -45,7 +45,7 @@ class Game { this.restartButton = document.getElementById('restart-btn'); this.fieldSize = {x: 16, y: 12}; - this.bombCount = 25; + this.bombCount = this.fieldSize.x * this.fieldSize.y * .25; this.field = []; this.gameOver = false; this.scaleFactor = .5; @@ -159,7 +159,7 @@ class Game { let color = this.getColor(virtualX, virtualY); const fontSize = this.renderingConfig.sizeY * .5; - let fontFamily = "Roboto"; + let fontFamily = "Roboto Bold"; let textColor = "white"; let text = ""; @@ -193,13 +193,13 @@ class Game { gameOverEvent() { play = false; - animateBackground(0, 0, this.width, this.height, 0, .75, new Date().getTime(), 200, { + animateBackground(this.layer2, 0, 0, this.width, this.height, 0, .75, new Date().getTime(), 200, { r: 0, g: 0, b: 0, a: 0 }); - 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"); + 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 Black"); } getColor(x, y) { @@ -544,13 +544,13 @@ class Game { animateVictory(); play = false; const fontSize = this.tileSize.y * 1.33; - animateBackground(0, 0, this.canvas.width, this.canvas.height, 0, .01, new Date().getTime(), 300, { + animateBackground(this.layer2, 0, 0, this.canvas.width, this.canvas.height, 0, .01, new Date().getTime(), 300, { r: 0, g: 0, b: 0, a: 0 }); - animateText(this.layer2, 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 Black"); } } } \ No newline at end of file diff --git a/minesweeper.js b/minesweeper.js index 0baadd7..a1dc0df 100644 --- a/minesweeper.js +++ b/minesweeper.js @@ -11,7 +11,7 @@ const colors = { 6: "pink" }; -function animateBackground(x, y, width, height, curOpacity, finalOpacity, startTime, duration, color) { +function animateBackground(ctx, x, y, width, height, curOpacity, finalOpacity, startTime, duration, color) { const time = (new Date()).getTime() - startTime; if (curOpacity >= finalOpacity) @@ -26,12 +26,12 @@ function animateBackground(x, y, width, height, curOpacity, finalOpacity, startT color.a = curOpacity; - overlay2Ctx.clearRect(x, y, width, height); - overlay2Ctx.fillStyle = "rgba(" + color.r + "," + color.g + "," + color.b + "," + color.a + ")"; - overlay2Ctx.fillRect(x, y, width, height); + ctx.clearRect(x, y, width, height); + ctx.fillStyle = "rgba(" + color.r + "," + color.g + "," + color.b + "," + color.a + ")"; + ctx.fillRect(x, y, width, height); requestAnimFrame(function () { - animateBackground(x, y, width, height, curOpacity, finalOpacity, startTime, duration, color); + animateBackground(ctx, x, y, width, height, curOpacity, finalOpacity, startTime, duration, color); }); } @@ -85,7 +85,7 @@ function animateText(ctx, renderingConfig, text, x, y, curFontSize, finalFontSiz const textDrawY = (y + .5 - renderingConfig.tiltY) * renderingConfig.sizeY + curFontSize * .33; if (font === undefined) - font = "Roboto"; + font = "Roboto Bold"; ctx.fillStyle = color; ctx.font = "bold " + curFontSize + "px " + font;