diff --git a/README.md b/README.md index 5c884f5..cdbdb51 100644 --- a/README.md +++ b/README.md @@ -7,4 +7,4 @@ Simon Game is my first project built with JavaScript after 2 days (~21.58 hours) ### Indonesia Simon Game adalah proyek pertama saya yang dibuat menggunakan JavaScript setelah belajar selama 2 hari (~21,58 jam). Game ini menguji memori pemain dengan pola warna dan suara yang semakin kompleks di setiap level. Proyek ini menggunakan HTML, CSS, jQuery, dan JavaScript. Meskipun mungkin hasilnya belum sempurna, saya tetap bangga dengan apa yang telah saya capai. Proyek ini adalah langkah awal saya dalam memahami konsep dasar DOM, animasi, dan event handling dalam JavaScript. -![Demo](https://github.com/triliun/simon-game/blob/a0e60b54dcd5bf8d8b250c32045c56de69046304/image.png) +![Demo](https://github.com/triliun/simon-game/blob/master/image.png) diff --git a/sounds/blue.mp3 b/assets/sounds/blue.mp3 similarity index 100% rename from sounds/blue.mp3 rename to assets/sounds/blue.mp3 diff --git a/assets/sounds/gray.mp3 b/assets/sounds/gray.mp3 new file mode 100644 index 0000000..ae68cba Binary files /dev/null and b/assets/sounds/gray.mp3 differ diff --git a/sounds/green.mp3 b/assets/sounds/green.mp3 similarity index 100% rename from sounds/green.mp3 rename to assets/sounds/green.mp3 diff --git a/sounds/yellow.mp3 b/assets/sounds/orange.mp3 similarity index 100% rename from sounds/yellow.mp3 rename to assets/sounds/orange.mp3 diff --git a/sounds/red.mp3 b/assets/sounds/pink.mp3 similarity index 100% rename from sounds/red.mp3 rename to assets/sounds/pink.mp3 diff --git a/assets/sounds/purple.mp3 b/assets/sounds/purple.mp3 new file mode 100644 index 0000000..896b9f9 Binary files /dev/null and b/assets/sounds/purple.mp3 differ diff --git a/assets/sounds/red.mp3 b/assets/sounds/red.mp3 new file mode 100644 index 0000000..e7738ae Binary files /dev/null and b/assets/sounds/red.mp3 differ diff --git a/sounds/wrong.mp3 b/assets/sounds/wrong.mp3 similarity index 100% rename from sounds/wrong.mp3 rename to assets/sounds/wrong.mp3 diff --git a/assets/sounds/yellow.mp3 b/assets/sounds/yellow.mp3 new file mode 100644 index 0000000..b360c08 Binary files /dev/null and b/assets/sounds/yellow.mp3 differ diff --git a/assets/svg/sound-mute.svg b/assets/svg/sound-mute.svg new file mode 100644 index 0000000..a4d0c9b --- /dev/null +++ b/assets/svg/sound-mute.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/svg/sound-on.svg b/assets/svg/sound-on.svg new file mode 100644 index 0000000..ad9af8d --- /dev/null +++ b/assets/svg/sound-on.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/game.js b/game.js index 9c84d67..791027a 100644 --- a/game.js +++ b/game.js @@ -1,33 +1,45 @@ -var userClickedPattern = []; -var gamePattern = []; -var randomNumber; -var buttonColours = ["red", "blue", "green", "yellow"]; -var levelGame = 0; -var gameStart = false; -var clickBtn = false; - - -function animationStart(counter) { - clickBtn = true; - +const buttonColours = ["red", "blue", "green", "yellow", "orange", "purple", "pink", "gray"]; +let userClickedPattern = []; +let gamePattern = []; +let randomNumber = 0; +let levelGame = 0; +let gameStart = false; +let clickBtn = false; +let soundStatus = false; + +function playsound(nameSound) { + if (!soundStatus) { + const sound = new Audio(`assets/sounds/${nameSound}.mp3`); + sound.play(); + } +} + +function animationStart(counter) { + clickBtn = false; + setTimeout(function () { - $(`#${gamePattern[counter]}`).fadeOut(100).fadeIn(100); - playSound(gamePattern[counter]); + $(`#${gamePattern[counter]}`).addClass("active"); + playsound(gamePattern[counter]); }, counter * 500); setTimeout(function () { - if (counter === gamePattern.length - 1) { - clickBtn = false; + $(`#${gamePattern[counter]}`).removeClass("active"); + }, counter * 500 + 300); + + setTimeout(function () { + if (counter === gamePattern.length - 1) { + clickBtn = true; } - }, counter * 800); + }, counter * 700); } function nextSequence() { gameStart = true; + randomNumber = Math.floor(Math.random() * 8); levelGame++; - randomNumber = Math.floor(Math.random() * 4); - var randomChosenColour = buttonColours[randomNumber]; - gamePattern.push(randomChosenColour); + + const randomColor = buttonColours[randomNumber]; + gamePattern.push(randomColor); $("h1").text(`Level ${levelGame}`); for (let i = 0; i < gamePattern.length; i++) { @@ -35,33 +47,6 @@ function nextSequence() { } } - -$(document).keydown(function () { - if (gameStart === true) { - return; - } - nextSequence(); -}); - -$(".btn").click(function () { - if (gameStart === false || clickBtn === true) { - return; - } - var userChosenColour = $(this).attr("id"); - $(`#${userChosenColour}`).fadeOut(100).fadeIn(100); - // $(`#${userChosenColour}`).addClass("pressed"); - userClickedPattern.push(userChosenColour); - playSound(userChosenColour); - - setTimeout(function () { - $(`#${userChosenColour}`).removeClass("pressed"); - }, 100); - - var currentLevel = userClickedPattern.length - 1; - - checkAnswer(currentLevel); -}); - function checkAnswer(currentLevel) { if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) { if (gamePattern.length === userClickedPattern.length) { @@ -74,25 +59,54 @@ function checkAnswer(currentLevel) { function nextLevel() { setTimeout(function () { - nextSequence(); userClickedPattern = []; + nextSequence(); }, 1000); } function startOver() { - gameStart = false; + setTimeout(function () { + gameStart = false; + }, 1100); gamePattern = []; userClickedPattern = []; levelGame = 0; - playSound("wrong"); - $("h1").text("Game Over, Press Any Key to Restart"); + playsound("wrong"); + $("#level_title").text("Game Over, Click Anywhere To Restart"); $("body").addClass("game-over"); setTimeout(function () { $("body").removeClass("game-over"); }, 200); } -function playSound(currentKey) { - var audio = new Audio(`sounds/${currentKey}.mp3`); - audio.play(); -} +$("#sound_button").click(function () { + if (!soundStatus) { + soundStatus = true; + } else { + soundStatus = false; + } + $(this).toggleClass("mute"); +}); + +$(document).click(function () { + if (gameStart !== true) { + nextSequence(); + } +}); + +$(".btn").click(function () { + if (gameStart === false || clickBtn === false) { + return; + } + const userChosenColour = $(this).attr("id"); + $(`#${userChosenColour}`).addClass("active"); + userClickedPattern.push(userChosenColour); + + const currentLevel = userClickedPattern.length - 1; + checkAnswer(currentLevel); + playsound(userChosenColour); + + setTimeout(function () { + $(`#${userChosenColour}`).removeClass("active"); + }, 100); +}); diff --git a/image.png b/image.png index 893c8cb..8a0a6e5 100644 Binary files a/image.png and b/image.png differ diff --git a/index.html b/index.html index 44a19a5..799bb26 100644 --- a/index.html +++ b/index.html @@ -1,42 +1,73 @@ - - - - Simon Game - - - + + + + Simon Game + + + - -

Press A Key to Start

-
-
+ + + + + -
+ + + + + + + + + + +
+
+
+

Click Anywhere To Start

+ +
+
+
+
+
+
+
+
+
+
+
- -
- -
-
- -
- -
- -
-
- -
- -
- -
- - - - - + + + + diff --git a/styles.css b/styles.css index 5e005d9..8676afb 100644 --- a/styles.css +++ b/styles.css @@ -1,58 +1,143 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + text-decoration: none; + list-style: none; +} + +:root { + --bg-color: #000000; + --text-color: #fff; + --red-color: #ff0000; + --green-color: #008000; + --blue-color: #0000ff; + --yellow-color: #ffff00; + --orange-color: #ffa600; + --purple-color: #500073; + --pink-color: #ffcfcf; + --white-color-50: #ffffff0a; + --gray-color: #a9a9a9; + + + + --spacing-sm: 8px; + --spacing-md: 16px; + --spacing-lg: 24px; + + --font-size-smx: 12px; + --font-size-sm: 14px; + --font-size-md: 16px; + --font-size-lg: 20px; + --font-size-xl: 24px; + --font-size-2xl: 30px; +} + +i { + cursor: pointer; +} + +.sound.on::after { + display: block; + content: url(assets/svg/sound-on.svg); + width: 28px; + aspect-ratio: 1/1; +} + +.sound.mute::after { + display: block; + content: url(assets/svg/sound-mute.svg); + width: 28px; + aspect-ratio: 1/1; +} + body { - text-align: center; - background-color: #011F3F; + background: var(--bg-color); } -#level-title { - font-family: 'Press Start 2P', cursive; - font-size: 2rem; - margin: 4%; - color: #FEF2BF; +#level_title { + font-family: "Press Start 2P", cursive; + font-size: var(--font-size-md); + padding: 10px 0; + color: var(--text-color); + cursor: default; +} + +.flex { + display: flex; + justify-content: space-between; + align-items: center; } .container { - display: block; - width: 50%; - margin: auto; - max-width: 460px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 90vh; + padding: 2vh; +} +.container-helper { + width: 100%; + max-width: 455px; } .row { - display: flex; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px; - margin: 10px; } .btn { width: 100%; - border: 10px solid black; - border-radius: 20%; + border: 2px solid var(--white-color-50); + border-radius: 10%; aspect-ratio: 1/1; + cursor: pointer; + opacity: 0.5; + + &:hover { + opacity: 0.7; + } + + &.active { + opacity: 1; + } } .game-over { - background-color: red; - opacity: 0.8; + background: var(--red-color); } .red { - background-color: red; + background: var(--red-color); } .green { - background-color: green; + background: var(--green-color); } .blue { - background-color: blue; + background:var(--blue-color); } .yellow { - background-color: yellow; + background: var(--yellow-color); +} + +.orange { + background: var(--orange-color); +} + +.gray { + background: var(--gray-color); +} + +.purple { + background: var(--purple-color); } -.pressed { - box-shadow: 0 0 20px white; - background-color: grey; +.pink { + background: var(--pink-color); }