diff --git a/css/style.css b/css/style.css index 10acc9b..34c60aa 100644 --- a/css/style.css +++ b/css/style.css @@ -49,11 +49,25 @@ body { } } +.start-container.slideUp { + animation: slideUp .5s ease-in-out forwards; +} + +@keyframes slideUp { + 0% { + top: 100% + } + + 100% { + top: 50%; + } +} + .start-container h3 { font-weight: lighter; } -.start-container button { +button { border: none; border-radius: 10px; box-shadow: none; @@ -66,14 +80,26 @@ body { -o-transition: all .2s; transition: all .2s; cursor: pointer; + transform: translateY(0); } -.start-container button:hover { - box-shadow: 0 10px 20px rgba(0,0,0,.18); +.game-stats button { + font-size: 2vh; + padding: 1.25vh 2vw; +} + +.game-stats .restart { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +button:hover { + box-shadow: 0 5px 0 #3562c1, 0 10px 20px rgba(0, 0, 0, .18); transform: translateY(-5px); } -.start-container button:active { +button:active { background-color: #1e64cd; } @@ -133,4 +159,28 @@ body { to { top: 0; } +} + +.popAway { + animation: popAway .5s forwards; + -webkit-transform-origin: 50%; + -moz-transform-origin: 50%; + -ms-transform-origin: 50%; + -o-transform-origin: 50%; + transform-origin: 50%; + top: 0; +} + +@keyframes popAway { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.1); + } + + 100% { + transform: scale(0); + } } \ No newline at end of file diff --git a/game.js b/game.js index 530726d..dcc76d3 100644 --- a/game.js +++ b/game.js @@ -8,6 +8,10 @@ class Game { 000 + +
+ +
@@ -24,6 +28,8 @@ class Game {
`.toDOM(); document.body.appendChild(elements); + this.container = document.getElementsByClassName('main-container')[0]; + this.canvas = document.getElementById('minesweeper-game'); this.ctx = this.canvas.getContext('2d'); @@ -36,6 +42,7 @@ class Game { this.statsContainer = document.getElementById('game-stats'); this.timeEl = document.getElementById('time'); this.bombsEl = document.getElementById('bombs'); + this.restartButton = document.getElementById('restart-btn'); this.fieldSize = {x: 16, y: 12}; this.bombCount = 25; @@ -67,6 +74,10 @@ class Game { this.drawGrid(false); } + cancelGame() { + this.container.classList.add('popAway'); + } + calcScaling() { const width = Math.ceil(this.fieldSize.x * this.zoomFactor) + 1; const height = Math.ceil(this.fieldSize.y * this.zoomFactor) + 1; @@ -117,6 +128,10 @@ class Game { return count; } + destroy() { + this.container.remove(); + } + drawGrid(animations = true) { this.ctx.clearRect(0, 0, this.width, this.height); @@ -383,6 +398,10 @@ class Game { window.addEventListener("resize", () => { this.scaleCanvas(); }); + + this.restartButton.addEventListener('click', () => { + restartGame(); + }); } /** @@ -414,10 +433,6 @@ class Game { }, 1000); } - restartGame() { - - } - scaleCanvas() { let size = window.innerWidth / this.fieldSize.x * .9; diff --git a/minesweeper.js b/minesweeper.js index c514cc0..0baadd7 100644 --- a/minesweeper.js +++ b/minesweeper.js @@ -157,11 +157,24 @@ const startContainer = document.getElementsByClassName('start-container')[0]; const startBackground = document.getElementsByClassName('start-background')[0]; const startButton = document.getElementById('startgame'); startButton.addEventListener('click', () => { + startGame(); +}); + +function startGame() { + startContainer.classList.remove('slideUp'); startContainer.classList.add('slideDown'); startBackground.classList.add('transparent'); game = new Game(); game.initGame(); -}); +} -// const game = new Game(); -// game.initGame(); \ No newline at end of file +function restartGame() { + game.cancelGame(); + setTimeout(() => { + startContainer.classList.remove('slideDown'); + startContainer.classList.add('slideUp'); + startBackground.classList.remove('transparent'); + game.destroy(); + game = null; + }, 500); +} \ No newline at end of file