Skip to content

Commit 0538f8e

Browse files
author
tamilkumaran
committed
shell game added
1 parent eff41a5 commit 0538f8e

7 files changed

Lines changed: 132 additions & 1 deletion

File tree

‎115 - Shell Game/README.MD‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
# Shell Game
3+
4+
A ball is hidden in three bowls(circles), we need to find where the ball is!!. It's simple game using HTML, CSS, JavaScript.
5+
6+
When the user finds the ball, it shows the winner prompt and click shuffel for new game.
7+

‎115 - Shell Game/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Shell Game</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<h1>Shell Game</h1>
11+
<h5>Find the ball</h5>
12+
<div class="game-container">
13+
<div class="bowl" id="bowl1" onclick="checkBowl(1)"><h3>Bowl1</h3></div>
14+
<div class="bowl" id="bowl2" onclick="checkBowl(2)"><h3>Bowl2</h3></div>
15+
<div class="bowl" id="bowl3" onclick="checkBowl(3)"><h3>Bowl3</h3></div>
16+
</div>
17+
<button onclick="shuffle()">Shuffle</button>
18+
<p id="message"></p>
19+
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

‎115 - Shell Game/script.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
let ballPosition = 0;
2+
3+
function shuffle() {
4+
const message = document.getElementById('message');
5+
message.textContent = '';
6+
7+
// Randomly place the ball under one of the bowls
8+
ballPosition = Math.floor(Math.random() * 3) + 1;
9+
console.log("Ball is under bowl:", ballPosition);
10+
}
11+
12+
function checkBowl(bowlNumber) {
13+
const message = document.getElementById('message');
14+
if (bowlNumber === ballPosition) {
15+
message.textContent = 'You found the ball! :)';
16+
} else {
17+
message.textContent = 'Try again! :(';
18+
}
19+
}
20+
21+
// Initial shuffle to start the game
22+
shuffle();

‎115 - Shell Game/style.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
body {
2+
display: flex;
3+
flex-direction: column;
4+
align-items: center;
5+
justify-content: center;
6+
height: 100vh;
7+
background-color: #e43535;
8+
font-family: Verdana, Geneva, Tahoma, sans-serif;
9+
}
10+
11+
.game-container {
12+
display: flex;
13+
justify-content: space-around;
14+
margin: 20px;
15+
padding: 10px;
16+
17+
}
18+
.game-container h3{
19+
text-align: center;
20+
margin-top: 35px;
21+
}
22+
23+
.bowl {
24+
width: 100px;
25+
height: 100px;
26+
background-color: rgb(201, 207, 32);
27+
border-radius: 50%;
28+
border: 2px solid black;
29+
display: table-column;
30+
align-items: center;
31+
justify-content: center;
32+
cursor: pointer;
33+
position: relative;
34+
justify-content: space-between;
35+
}
36+
37+
.ball {
38+
width: 30px;
39+
height: 30px;
40+
background-color: red;
41+
border-radius: 50%;
42+
display: none;
43+
justify-content: space-between;
44+
position: absolute;
45+
46+
}
47+
.bowl:hover{
48+
transform: scale(1.1);
49+
transition: .1s;
50+
}
51+
52+
#message {
53+
margin-top: 20px;
54+
font-size: 1.2em;
55+
}
56+
57+
button {
58+
padding: 10px 20px;
59+
font-size: 1em;
60+
cursor: pointer;
61+
margin-top: 20px;
62+
border-radius:20px ;
63+
border: solid;
64+
font-family: Verdana, Geneva, Tahoma, sans-serif;
65+
}
66+
button:hover{
67+
background-color: rgb(59, 236, 14);
68+
transform: scale(1.1);
69+
transition: .1s;
70+
}

‎30DaysOfJavaScript/assets/115.png‎

25.2 KB
Loading

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ Repo containing all the projects made in 30 Days while completing the <b>30 Days
167167
| 112 | [Maze Game](https://30daysofjs.netlify.app/112%20-%20Maze%20Game/) |
168168
| 113 | [Minesweeper](https://30daysofjs.netlify.app/113%20-%20minesweeper/)
169169
| 114 | [Movie Guessing Game]()
170-
|
170+
| 115 | [Shell Game](https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/115%20-%20Shell%20Game) |
171171

172172
</td><td>
173173
</td></tr></table>

‎index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1188,6 +1188,16 @@ <h4>Movie Guessing Game</h4>
11881188
</a>
11891189
</div>
11901190

1191+
<div class="item">
1192+
<img src="30DaysOfJavaScript\assets\115.png" alt="Shell Game">
1193+
<h4>Shell Game</h4>
1194+
<a target="_blank"
1195+
href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/115%20-%20Shell%20Game">
1196+
<i class="fa-brands fa-square-github"></i>
1197+
<a target="_blank" href="115 - Shell Game/index.html"><i class="fa-solid fa-link"></i> </a>
1198+
</a>
1199+
</div>
1200+
11911201

11921202
</div>
11931203
<!-- Main Section End -->

0 commit comments

Comments
 (0)