Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
JRao2108 authored Oct 11, 2023
1 parent 16ef8ec commit b1130ce
Show file tree
Hide file tree
Showing 4 changed files with 215 additions and 0 deletions.
Binary file added Games/Mole Bash Mania/assets_smash.mp3
Binary file not shown.
113 changes: 113 additions & 0 deletions Games/Mole Bash Mania/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
* {
font-family: Arial, Helvetica, sans-serif;
/* background-color: rgb(113, 143, 224); */
}
#disp {
/* border: 1px solid blue; */
text-align: center;
font-size: 25px;
line-height: 10px;
font-weight: 500;
color: black;
}
#score {
color: rgb(8, 147, 55);
font-weight: bold;
}
#time {
color: rgb(255, 0, 0);
font-weight: bold;
}
#container {
height: 450px;
width: 450px;
margin: auto;
margin-top: 50px;
padding: 20px 20px;
/* border: 1px solid red; */
/* background-color: grey; */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 60px;
}
#container > div {
/* border: 1px solid black; */
background-color: #dfd1d1;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
cursor: pointer;
}
#container > div > img {
width: 70%;
background-color: #dfd1d1;
}
button {
/* border: 1px solid red; */
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
margin-top: 40px;
background-color: white;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
@media screen and (min-width: 300px) and (max-width: 700px) {
#disp {
/* background-color: pink; */
width: 100%;
}
#container {
width: 250px;
height: 250px;
gap: 20px;
}
}
#instructions {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
margin-right: 20px;
text-align: center;
font-size: 22px;
line-height: 1.5;
color: #333;
}

#instructions h2 {
font-size: 30px;
font-weight: bold;
margin-bottom: 10px;
}
#instructions {
background-image: url('https://media.giphy.com/media/OPb0ujC8EZWHi3e1rW/giphy.gif');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
animation: backgroundAnimation 10s linear infinite;
color: white;
}

@keyframes backgroundAnimation {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 0%;
}
}

body {
background-image: url('https://cdn.marketjs.net/games/whack-a-mole/localization/en/media/graphics/game/horizont.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;

}


42 changes: 42 additions & 0 deletions Games/Mole Bash Mania/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Whack-A-Mole</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="instructions">
<h2>Mole Bash Mania</h2>
<p>Game Instructions!!</p>
<p>| Click on the moles as they appear in the holes to score points |</p>
<p>| You have 20 seconds to whack as many moles as possible |</p>
<p>| Each mole whacked gives you 10 points |</p>
<p>| Good luck!! |</p>
</div>

<div id="disp">
<p>Score: <span id="score">0</span></p>
<p>Time Remaining: <span id="time">20 Sec</span></p>
</div>
<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="hammer"></div>
<button>Start Game</button>


</body>

</html>
<script src="index.js"></script>
60 changes: 60 additions & 0 deletions Games/Mole Bash Mania/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
// to set the time
let time = document.querySelector("#time");
// audio sound for every hit
let sound = new Audio("assets_smash.mp3");
// holes list to place mole randomly;
let holes = document.querySelectorAll("#container>div");
// score variable
let s = document.querySelector("#score");
// Total time is 20sec
let i = 20;
let score = 0;
let moveMole = null;
let start_time = () => {
// start will be disabled for duration of gameplay
document.querySelector("button").disabled = true;
s.innerText = score;
run();

// setinterval for changing timer on screen
let time_rem = setInterval(() => {
time.innerText = i + " Sec";
i--;
if (i == -1) {
stopGame(time_rem);
}
}, 1000);
};
document.querySelector("button").addEventListener("click", start_time);

let stopGame = (time_rem) => {
clearInterval(time_rem);
// time reset to total time and start button enabled
i = 20;
document.querySelector("button").disabled = false;
clearInterval(moveMole);
score = 0;
// for each to clear last mole element as position is not known so all holes are cleared
holes.forEach(function (el) {
el.innerHTML = null;
});
};

function run() {
let position = Math.floor(Math.random() * 9);
let mole = holes[position];
let i = document.createElement("img");
i.src = "https://cdn-icons-png.flaticon.com/512/5050/5050857.png";
i.addEventListener("click", hitMole);
mole.append(i);
moveMole = setTimeout(() => {
mole.innerHTML = null;
run();
}, 750);
}
//score is incremented and sound is played
function hitMole() {
score = score + 10;
sound.play();
s.innerText = score;
}

0 comments on commit b1130ce

Please sign in to comment.