diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..2814ac6db1 Binary files /dev/null and b/.DS_Store differ diff --git a/Js-Projects/README.md b/Js-Projects/Drum Kit/README.md similarity index 100% rename from Js-Projects/README.md rename to Js-Projects/Drum Kit/README.md diff --git a/Js-Projects/Drum Kit/images/crash.png b/Js-Projects/Drum Kit/images/crash.png new file mode 100644 index 0000000000..a992fa0f53 Binary files /dev/null and b/Js-Projects/Drum Kit/images/crash.png differ diff --git a/Js-Projects/Drum Kit/images/kick.png b/Js-Projects/Drum Kit/images/kick.png new file mode 100644 index 0000000000..b64877e70d Binary files /dev/null and b/Js-Projects/Drum Kit/images/kick.png differ diff --git a/Js-Projects/Drum Kit/images/snare.png b/Js-Projects/Drum Kit/images/snare.png new file mode 100644 index 0000000000..1e089bacd7 Binary files /dev/null and b/Js-Projects/Drum Kit/images/snare.png differ diff --git a/Js-Projects/Drum Kit/images/tom1.png b/Js-Projects/Drum Kit/images/tom1.png new file mode 100644 index 0000000000..855b211177 Binary files /dev/null and b/Js-Projects/Drum Kit/images/tom1.png differ diff --git a/Js-Projects/Drum Kit/images/tom2.png b/Js-Projects/Drum Kit/images/tom2.png new file mode 100644 index 0000000000..3e9f3636f4 Binary files /dev/null and b/Js-Projects/Drum Kit/images/tom2.png differ diff --git a/Js-Projects/Drum Kit/images/tom3.png b/Js-Projects/Drum Kit/images/tom3.png new file mode 100644 index 0000000000..762cbf8549 Binary files /dev/null and b/Js-Projects/Drum Kit/images/tom3.png differ diff --git a/Js-Projects/Drum Kit/images/tom4.png b/Js-Projects/Drum Kit/images/tom4.png new file mode 100644 index 0000000000..e79c49e1b1 Binary files /dev/null and b/Js-Projects/Drum Kit/images/tom4.png differ diff --git a/Js-Projects/Drum Kit/index.html b/Js-Projects/Drum Kit/index.html new file mode 100644 index 0000000000..c91c3a48d5 --- /dev/null +++ b/Js-Projects/Drum Kit/index.html @@ -0,0 +1,30 @@ + + + + + + Drum Kit + + + + + +

Drum 🥁 Kit

+
+ + + + + + + +
+ + + + + + + diff --git a/Js-Projects/Drum Kit/index.js b/Js-Projects/Drum Kit/index.js new file mode 100644 index 0000000000..a428d5f15c --- /dev/null +++ b/Js-Projects/Drum Kit/index.js @@ -0,0 +1,81 @@ +var numberOfDrumButtons = document.querySelectorAll(".drum").length; + +for (var i = 0; i < numberOfDrumButtons; i++) { + + document.querySelectorAll(".drum")[i].addEventListener("click", function() { + + var buttonInnerHTML = this.innerHTML; + + makeSound(buttonInnerHTML); + + buttonAnimation(buttonInnerHTML); + + }); + +} + +document.addEventListener("keypress", function(event) { + + makeSound(event.key); + + buttonAnimation(event.key); + +}); + + +function makeSound(key) { + + switch (key) { + case "w": + var tom1 = new Audio("sounds/tom-1.mp3"); + tom1.play(); + break; + + case "a": + var tom2 = new Audio("sounds/tom-2.mp3"); + tom2.play(); + break; + + case "s": + var tom3 = new Audio('sounds/tom-3.mp3'); + tom3.play(); + break; + + case "d": + var tom4 = new Audio('sounds/tom-4.mp3'); + tom4.play(); + break; + + case "j": + var snare = new Audio('sounds/snare.mp3'); + snare.play(); + break; + + case "k": + var crash = new Audio('sounds/crash.mp3'); + crash.play(); + break; + + case "l": + var kick = new Audio('sounds/kick-bass.mp3'); + kick.play(); + break; + + + default: console.log(key); + + } +} + + +function buttonAnimation(currentKey) { + + var activeButton = document.querySelector("." + currentKey); + + activeButton.classList.add("pressed"); + + setTimeout(function() { + activeButton.classList.remove("pressed"); + }, 100); + +} diff --git a/Js-Projects/Drum Kit/sounds/crash.mp3 b/Js-Projects/Drum Kit/sounds/crash.mp3 new file mode 100644 index 0000000000..d568062695 Binary files /dev/null and b/Js-Projects/Drum Kit/sounds/crash.mp3 differ diff --git a/Js-Projects/Drum Kit/sounds/kick-bass.mp3 b/Js-Projects/Drum Kit/sounds/kick-bass.mp3 new file mode 100644 index 0000000000..faf06c6cea Binary files /dev/null and b/Js-Projects/Drum Kit/sounds/kick-bass.mp3 differ diff --git a/Js-Projects/Drum Kit/sounds/snare.mp3 b/Js-Projects/Drum Kit/sounds/snare.mp3 new file mode 100644 index 0000000000..e7cf5b841b Binary files /dev/null and b/Js-Projects/Drum Kit/sounds/snare.mp3 differ diff --git a/Js-Projects/Drum Kit/sounds/tom-1.mp3 b/Js-Projects/Drum Kit/sounds/tom-1.mp3 new file mode 100644 index 0000000000..7dc3003d0c Binary files /dev/null and b/Js-Projects/Drum Kit/sounds/tom-1.mp3 differ diff --git a/Js-Projects/Drum Kit/sounds/tom-2.mp3 b/Js-Projects/Drum Kit/sounds/tom-2.mp3 new file mode 100644 index 0000000000..f3c04855c9 Binary files /dev/null and b/Js-Projects/Drum Kit/sounds/tom-2.mp3 differ diff --git a/Js-Projects/Drum Kit/sounds/tom-3.mp3 b/Js-Projects/Drum Kit/sounds/tom-3.mp3 new file mode 100644 index 0000000000..38060330a7 Binary files /dev/null and b/Js-Projects/Drum Kit/sounds/tom-3.mp3 differ diff --git a/Js-Projects/Drum Kit/sounds/tom-4.mp3 b/Js-Projects/Drum Kit/sounds/tom-4.mp3 new file mode 100644 index 0000000000..58b04bebbd Binary files /dev/null and b/Js-Projects/Drum Kit/sounds/tom-4.mp3 differ diff --git a/Js-Projects/Drum Kit/styles.css b/Js-Projects/Drum Kit/styles.css new file mode 100644 index 0000000000..aaa580db6a --- /dev/null +++ b/Js-Projects/Drum Kit/styles.css @@ -0,0 +1,76 @@ +body { + text-align: center; + background-color: #283149; +} + +h1 { + font-size: 5rem; + color: #DBEDF3; + font-family: "Arvo", cursive; + text-shadow: 3px 0 #DA0463; + +} + +footer { + color: #DBEDF3; + font-family: sans-serif; +} + +.w { + background-image: url("images/tom1.png"); +} + +.a { + background-image: url("images/tom2.png"); +} + +.s { + background-image: url("images/tom3.png"); +} + +.d { + background-image: url("images/tom4.png"); +} + +.j { + background-image: url("images/snare.png"); +} + +.k { + background-image: url("images/crash.png"); +} + +.l { + background-image: url("images/kick.png"); +} + +.set { + margin: 10% auto; +} + +.pressed { + box-shadow: 0 3px 4px 0 #DBEDF3; + opacity: 0.5; +} + +.red { + color: red; +} + +.drum { + outline: none; + border: 10px solid #404B69; + font-size: 5rem; + font-family: 'Arvo', cursive; + line-height: 2; + font-weight: 900; + color: #DA0463; + text-shadow: 3px 0 #DBEDF3; + border-radius: 15px; + display: inline-block; + width: 150px; + height: 150px; + text-align: center; + margin: 10px; + background-color: white; +} diff --git a/game.js b/game.js new file mode 100644 index 0000000000..a9134a2a5b --- /dev/null +++ b/game.js @@ -0,0 +1,79 @@ + +var buttonColours = ["red", "blue", "green", "yellow"]; + +var gamePattern = []; +var userClickedPattern = []; + +var started = false; +var level = 0; + +$(document).keypress(function() { + if (!started) { + $("#level-title").text("Level " + level); + nextSequence(); + started = true; + } +}); + +$(".btn").click(function() { + + var userChosenColour = $(this).attr("id"); + userClickedPattern.push(userChosenColour); + + playSound(userChosenColour); + animatePress(userChosenColour); + + checkAnswer(userClickedPattern.length-1); +}); + +function checkAnswer(currentLevel) { + + if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) { + if (userClickedPattern.length === gamePattern.length){ + setTimeout(function () { + nextSequence(); + }, 1000); + } + } else { + playSound("wrong"); + $("body").addClass("game-over"); + $("#level-title").text("Game Over, Press Any Key to Restart"); + + setTimeout(function () { + $("body").removeClass("game-over"); + }, 200); + + startOver(); + } +} + + +function nextSequence() { + userClickedPattern = []; + level++; + $("#level-title").text("Level " + level); + var randomNumber = Math.floor(Math.random() * 4); + var randomChosenColour = buttonColours[randomNumber]; + gamePattern.push(randomChosenColour); + + $("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100); + playSound(randomChosenColour); +} + +function animatePress(currentColor) { + $("#" + currentColor).addClass("pressed"); + setTimeout(function () { + $("#" + currentColor).removeClass("pressed"); + }, 100); +} + +function playSound(name) { + var audio = new Audio("sounds/" + name + ".mp3"); + audio.play(); +} + +function startOver() { + level = 0; + gamePattern = []; + started = false; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000000..659acb550e --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + Simon + + + + + +

Press A Key to Start

+
+
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+ + + + + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000000..6edc5390f4 --- /dev/null +++ b/styles.css @@ -0,0 +1,53 @@ +body { + text-align: center; + background-color: #011F3F; +} + +#level-title { + font-family: 'Press Start 2P', cursive; + font-size: 3rem; + margin: 5%; + color: #FEF2BF; +} + +.container { + display: block; + width: 50%; + margin: auto; + +} + +.btn { + margin: 25px; + display: inline-block; + height: 200px; + width: 200px; + border: 10px solid black; + border-radius: 20%; +} + +.game-over { + background-color: red; + opacity: 0.8; +} + +.red { + background-color: red; +} + +.green { + background-color: green; +} + +.blue { + background-color: blue; +} + +.yellow { + background-color: yellow; +} + +.pressed { + box-shadow: 0 0 20px white; + background-color: grey; +}