diff --git a/.DS_Store b/.DS_Store index b1a60a5..cebc685 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/flower-icon.png b/flower-icon.png deleted file mode 100644 index eaafc1b..0000000 Binary files a/flower-icon.png and /dev/null differ diff --git a/forest-with-birds.ogg b/forest-with-birds.ogg new file mode 100644 index 0000000..6808707 Binary files /dev/null and b/forest-with-birds.ogg differ diff --git a/game-over.ogg b/game-over.ogg new file mode 100644 index 0000000..0a9833d Binary files /dev/null and b/game-over.ogg differ diff --git a/img/watering can.png b/img/watering can.png new file mode 100644 index 0000000..4a866ed Binary files /dev/null and b/img/watering can.png differ diff --git a/index.html b/index.html index 8fc89f7..77a9a2b 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@ href="https://fonts.googleapis.com/css2?family=Odibee+Sans&family=Press+Start+2P&display=swap" rel="stylesheet" /> +
@@ -19,13 +20,13 @@

Speed Game

Your score is: 0

-
1
-
2
-
3
-
4
+
🌻
+
🌻
+
🌻
+
🌻
- +
@@ -37,6 +38,12 @@

Your score is: 0

+ + diff --git a/main.js b/main.js index 737b895..d8372c6 100644 --- a/main.js +++ b/main.js @@ -8,6 +8,9 @@ const overlay = document.querySelector("#overlay"); const scoreText = document.querySelector("#score"); const resultText = document.querySelector("#result"); +const startMusic = document.querySelector("#startMusic"); +const failMusic = document.querySelector("#failMusic"); + let active = 0; let score = 0; let pace = 1000; @@ -36,6 +39,9 @@ const clickedCircle = (i) => { const startGame = () => { startButton.style.display = "none"; endButton.style.display = "inline"; + startMusic.currentTime = 0; + startMusic.play(); + for (let i = 0; i < circles.length; i++) { circles[i].style.pointEvents = "auto"; } @@ -51,7 +57,7 @@ const startGame = () => { console.log("active circle:", active); timer = setTimeout(startGame, pace); pace = pace - 10; - if (rounds >= 1) { + if (rounds >= 3) { endGame(); } rounds++; @@ -68,6 +74,9 @@ const startGame = () => { }; const endGame = () => { + startMusic.pause(); + startMusic.currentTime = 0; + failMusic.play(); console.log("game ended"); clearTimeout(timer); overlay.style.visibility = "visible"; diff --git a/style.css b/style.css index 9734ff0..9ff7290 100644 --- a/style.css +++ b/style.css @@ -35,16 +35,14 @@ h1 { background-color: saddlebrown; display: inline-block; margin: 2rem 1rem; - cursor: pointer; + /* cursor: pointer; */ display: flex; align-items: center; justify-content: center; + cursor: url("./img/watering\ can.png"), auto; } .circle.active { - /* background-image: url("https://cdn.pixabay.com/photo/2016/01/20/17/16/flower-1151963_1280.png"); */ background-color: yellow; - /* background-image: url(./flower-icon.png); - background-attachment: fixed; */ } button { @@ -98,3 +96,7 @@ button { #stop { display: none; } + +.flower { + font-size: 4rem; +}