diff --git a/Dicegame/shivam200446/dice.js b/Dicegame/shivam200446/dice.js new file mode 100644 index 000000000..217172284 --- /dev/null +++ b/Dicegame/shivam200446/dice.js @@ -0,0 +1,18 @@ +var randomnum1 = Math.floor(Math.random() * 6) + 1; +var randomimg = "dice" + randomnum1 + ".png"; +var imgsource1 = "images/" + randomimg; +var image1 = document.querySelectorAll("img")[0].setAttribute("src", imgsource1); + +var randomnum2 = Math.floor(Math.random() * 6) + 1; +var imgsource2 = "images/" +"dice" + randomnum2 + ".png"; +var image2 = document.querySelectorAll("img")[1].setAttribute("src", imgsource2); + +if(randomnum1>randomnum2){ +document.querySelector("h1").innerHTML ="Player1 Wins!"; +} +else if(randomnum1 + + + + Dicee + + + + + + +
+

Refresh Me

+ +
+

Player 1

+ +
+ +
+

Player 2

+ +
+ +
+ + + + + + diff --git a/Dicegame/shivam200446/styles.css b/Dicegame/shivam200446/styles.css new file mode 100644 index 000000000..27623cb13 --- /dev/null +++ b/Dicegame/shivam200446/styles.css @@ -0,0 +1,71 @@ +/* Reset some default styles */ +body { + margin: 0; + padding: 0; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #1f1f1f; + color: #fff; +} + +/* Style the container */ +.container { + text-align: center; + margin: 50px auto; + max-width: 400px; + background-color: rgba(255, 255, 255, 0.1); + padding: 30px; + border-radius: 20px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); +} + +/* Style the heading */ +h1 { + font-family: 'Indie Flower', cursive; + font-size: 48px; + color: #ff6b6b; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); + margin-bottom: 20px; +} + +/* Style the dice sections */ +.dice { + margin-top: 20px; + display: flex; + flex-direction: column; + align-items: center; +} + +/* Style the player names */ +.dice p { + font-family: 'Lobster', cursive; + font-size: 32px; + color: #ff6b6b; + margin: 10px 0; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); +} + +/* Style the dice images */ +.img1, +.img2 { + width: 150px; + height: 150px; + margin-top: 20px; + filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4)); + transition: transform 0.3s ease-in-out; +} +.img1:hover, +.img2:hover { + transform: rotate(180deg) scale(1.1); +} +.dice-background { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + background: url('your-custom-dice-background.png') no-repeat; + background-size: cover; + opacity: 0.2; + z-index: -1; +} \ No newline at end of file diff --git a/Drum/shivam200446/images/crash.png b/Drum/shivam200446/images/crash.png new file mode 100644 index 000000000..a992fa0f5 Binary files /dev/null and b/Drum/shivam200446/images/crash.png differ diff --git a/Drum/shivam200446/images/kick.png b/Drum/shivam200446/images/kick.png new file mode 100644 index 000000000..b64877e70 Binary files /dev/null and b/Drum/shivam200446/images/kick.png differ diff --git a/Drum/shivam200446/images/snare.png b/Drum/shivam200446/images/snare.png new file mode 100644 index 000000000..1e089bacd Binary files /dev/null and b/Drum/shivam200446/images/snare.png differ diff --git a/Drum/shivam200446/images/tom1.png b/Drum/shivam200446/images/tom1.png new file mode 100644 index 000000000..855b21117 Binary files /dev/null and b/Drum/shivam200446/images/tom1.png differ diff --git a/Drum/shivam200446/images/tom2.png b/Drum/shivam200446/images/tom2.png new file mode 100644 index 000000000..3e9f3636f Binary files /dev/null and b/Drum/shivam200446/images/tom2.png differ diff --git a/Drum/shivam200446/images/tom3.png b/Drum/shivam200446/images/tom3.png new file mode 100644 index 000000000..762cbf854 Binary files /dev/null and b/Drum/shivam200446/images/tom3.png differ diff --git a/Drum/shivam200446/images/tom4.png b/Drum/shivam200446/images/tom4.png new file mode 100644 index 000000000..e79c49e1b Binary files /dev/null and b/Drum/shivam200446/images/tom4.png differ diff --git a/Drum/shivam200446/index.html b/Drum/shivam200446/index.html new file mode 100644 index 000000000..84869f294 --- /dev/null +++ b/Drum/shivam200446/index.html @@ -0,0 +1,30 @@ + + + + + + MUSIC Kit + + + + + +

MUSIC 🥁 KiT

+
+ + + + + + + +
+ + + + + + + diff --git a/Drum/shivam200446/index.js b/Drum/shivam200446/index.js new file mode 100644 index 000000000..315a1651f --- /dev/null +++ b/Drum/shivam200446/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"); + }, 170); + +} diff --git a/Drum/shivam200446/sounds/crash.mp3 b/Drum/shivam200446/sounds/crash.mp3 new file mode 100644 index 000000000..d56806269 Binary files /dev/null and b/Drum/shivam200446/sounds/crash.mp3 differ diff --git a/Drum/shivam200446/sounds/kick-bass.mp3 b/Drum/shivam200446/sounds/kick-bass.mp3 new file mode 100644 index 000000000..faf06c6ce Binary files /dev/null and b/Drum/shivam200446/sounds/kick-bass.mp3 differ diff --git a/Drum/shivam200446/sounds/snare.mp3 b/Drum/shivam200446/sounds/snare.mp3 new file mode 100644 index 000000000..e7cf5b841 Binary files /dev/null and b/Drum/shivam200446/sounds/snare.mp3 differ diff --git a/Drum/shivam200446/sounds/tom-1.mp3 b/Drum/shivam200446/sounds/tom-1.mp3 new file mode 100644 index 000000000..7dc3003d0 Binary files /dev/null and b/Drum/shivam200446/sounds/tom-1.mp3 differ diff --git a/Drum/shivam200446/sounds/tom-2.mp3 b/Drum/shivam200446/sounds/tom-2.mp3 new file mode 100644 index 000000000..f3c04855c Binary files /dev/null and b/Drum/shivam200446/sounds/tom-2.mp3 differ diff --git a/Drum/shivam200446/sounds/tom-3.mp3 b/Drum/shivam200446/sounds/tom-3.mp3 new file mode 100644 index 000000000..38060330a Binary files /dev/null and b/Drum/shivam200446/sounds/tom-3.mp3 differ diff --git a/Drum/shivam200446/sounds/tom-4.mp3 b/Drum/shivam200446/sounds/tom-4.mp3 new file mode 100644 index 000000000..58b04bebb Binary files /dev/null and b/Drum/shivam200446/sounds/tom-4.mp3 differ diff --git a/Drum/shivam200446/styles.css b/Drum/shivam200446/styles.css new file mode 100644 index 000000000..3e2f46d34 --- /dev/null +++ b/Drum/shivam200446/styles.css @@ -0,0 +1,128 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Set a background color */ +body { + background-color: #f0f0f0; + font-family: 'Arvo', serif; +} + +/* Style the header */ +#title { + text-align: center; + font-size: 2rem; + padding: 2rem; + background-color: #333; + color: #fff; +} + +/* Style the drum buttons */ +.set { + display: flex; + justify-content: center; + align-items: center; + margin-top: 2rem; +} + +.drum { + border: 2px solid #333; + background-color: #fff; + font-size: 1.5rem; + display: flex; + align-items: center; + justify-content: center; + margin: 0 0.5rem; + cursor: pointer; + transition: background-color 0.2s, transform 0.2s; + 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; + width: 150px; + height: 150px; + + + +} + +/* Add hover effect to drum buttons */ +.drum:hover { + background-color: #333; + color: #fff; + transform: scale(1.1); +} + +/* Style the footer */ +footer { + text-align: center; + background-color: #333; + color: #fff; + padding: 3rem 0; + font-size: 1rem; +} + +.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; +}