diff --git a/README.md b/README.md index dd24e13..f11b84c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,8 @@ -

Memory Card

- -Image - +# Memory Card +![Memory Card](https://github.com/DanielXavierJob/studying-memory-game/blob/main/doc/game.gif?raw=true) +# Features +- Added button restart +![Gif of restart](https://github.com/DanielXavierJob/studying-memory-game/blob/main/doc/gif-restart.gif?raw=true) diff --git a/css/game.css b/css/game.css index 60e9ec5..fb7d2a3 100644 --- a/css/game.css +++ b/css/game.css @@ -16,13 +16,19 @@ header { justify-content: space-between; background-color: rgba(255, 255, 255, 0.8); font-size: 1.2em; - width: 100%; - max-width: 800px; + width: 80%; + max-width: 2000px; padding: 30px; margin: 0 0 30px; border-radius: 5px; } +.restart{ + cursor: pointer; +} +.restart:hover{ + color: red; +} .grid { display: grid; grid-template-columns: repeat(7, 1fr); diff --git a/doc/game.gif b/doc/game.gif new file mode 100644 index 0000000..4fac7ea Binary files /dev/null and b/doc/game.gif differ diff --git a/doc/gif-restart.gif b/doc/gif-restart.gif new file mode 100644 index 0000000..c23f093 Binary files /dev/null and b/doc/gif-restart.gif differ diff --git a/js/game.js b/js/game.js index 860aac8..4096901 100644 --- a/js/game.js +++ b/js/game.js @@ -1,7 +1,7 @@ const grid = document.querySelector('.grid'); const spanPlayer = document.querySelector('.player'); const timer = document.querySelector('.timer'); - +var loop; const characters = [ 'beth', 'jerry', @@ -100,6 +100,7 @@ const createCard = (character) => { } const loadGame = () => { + grid.innerHTML = '' const duplicateCharacters = [...characters, ...characters]; const shuffledArray = duplicateCharacters.sort(() => Math.random() - 0.5); @@ -111,14 +112,21 @@ const loadGame = () => { } const startTimer = () => { - - this.loop = setInterval(() => { + loop != null && clearInterval(this.loop) + timer.innerHTML = 0; + loop = setInterval(() => { const currentTime = +timer.innerHTML; timer.innerHTML = currentTime + 1; }, 1000); } +//restart game +document.querySelector('.restart').addEventListener('click', () =>{ + startTimer(); + loadGame(); +}) + window.onload = () => { spanPlayer.innerHTML = localStorage.getItem('player'); startTimer(); diff --git a/pages/game.html b/pages/game.html index 69da1eb..c03e514 100644 --- a/pages/game.html +++ b/pages/game.html @@ -18,6 +18,8 @@
Tempo: 00 + Restart +