Skip to content

Commit 78d1c3c

Browse files
PBJIPBJI
authored
Merge pull request #940 from vinay-s36/snakewatergun-vinay-s36
Snake-Water-Gun project
2 parents 8c6820f + 74f29b5 commit 78d1c3c

File tree

4 files changed

+199
-0
lines changed

4 files changed

+199
-0
lines changed

‎RockPaperScissorsGame/vinay-s36/READme.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
#### Summary
2+
The traditional hand game "Snake, Water, Gun" has been transformed into a computer game called "Digital Snake Water Gun." Players can compete against the computer by making decisions and determining who prevails in each round according to predetermined rules. The game provides players of all ages with a quick and engaging method to test their luck and decision-making abilities.
3+
#### Setup
4+
1. Fork the repository from github [vinay-s36](https://github.com/vinay-s36/Snake-Water-Gun)
5+
2. clone the repository
6+
3. Run it using any IDE like [VSCode](https://code.visualstudio.com/) or even simple text editors will work
7+
8+
#### Live project link - https://vinay-s36.github.io/Snake-Water-Gun/
9+
10+
#### Screenshot
11+
![Screenshot 2023-10-10 095111](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/afefe2ac-a9ce-4c59-af38-9f63858ab5bc)
12+
13+
![Screenshot 2023-10-10 095056](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/b569ac83-6575-4fa1-978e-66589796adf1)
14+
15+
![Screenshot 2023-10-10 095049](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/a16494b5-00b9-4af8-b9c2-3fa588261bbd)
16+
17+
![Screenshot 2023-10-10 095106](https://github.com/vinay-s36/javascript-mini-projects/assets/124019116/55ded0a9-3bd9-4ee6-9c43-435e19b287d4)
18+
19+
Let me know if there are any issues 😁
20+
#### Happy Coding All ####

‎RockPaperScissorsGame/vinay-s36/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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+
<link
7+
rel="icon"
8+
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>👻</text></svg>"
9+
/>
10+
<link href="./style.css" rel="stylesheet" />
11+
<link
12+
href="https://fonts.googleapis.com/css?family=Open+Sans"
13+
rel="stylesheet"
14+
/>
15+
<title>Snake-Water-Gun</title>
16+
</head>
17+
<body>
18+
<div class="card">
19+
<div class="card-content">
20+
<h1>Snake-Water-Gun</h1>
21+
<p class="instructions">Instructions</p>
22+
<ul style="text-align: left">
23+
<li>1. Use S for Snake, W for Water and G for Gun</li>
24+
<li>2. Snake defeats Water (Snake drinks Water) 🐍</li>
25+
<li>3. Water defeats Gun (Water puts out Gun) 💧</li>
26+
<li>4. Gun defeats Snake (Gun shoots Snake) 🔫</li>
27+
</ul>
28+
<input
29+
type="text"
30+
id="user-inp"
31+
placeholder="S, W or G?"
32+
onkeydown="checkEnter(event)"
33+
/>
34+
<p class="display-answers">
35+
<span id="comp-choice"></span
36+
><span id="user-choice" style="margin-left: 23px"></span>
37+
</p>
38+
<p id="display-result"></p>
39+
</div>
40+
</div>
41+
<script src="./script.js"></script>
42+
</body>
43+
</html>

‎RockPaperScissorsGame/vinay-s36/script.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
const user_input = document.getElementById('user-inp');
2+
const result = document.getElementById('display-result');
3+
const cchoice=document.getElementById('comp-choice');
4+
const uchoice=document.getElementById('user-choice');
5+
6+
let arr1=['Snake','Water','Gun']
7+
let arr=['S','W','G'];
8+
let message;
9+
10+
function checkEnter(event) {
11+
let num=Math.floor(Math.random() * arr.length);
12+
let comp_choice = arr[num];
13+
if (event.keyCode === 13) {
14+
cchoice.innerHTML='Computer choice: '+arr1[num];
15+
16+
var inputValue = user_input.value;
17+
let num1=0;
18+
switch(inputValue.toUpperCase()){
19+
case 'S':
20+
num1=0;
21+
break;
22+
case 'W':
23+
num1=1;
24+
break;
25+
case 'G':
26+
num1=2;
27+
break;
28+
default:
29+
num1=-1;
30+
}
31+
uchoice.innerHTML = 'User choice: '+arr1[num1];
32+
}
33+
if (inputValue.toUpperCase() == comp_choice) {
34+
message='Match Tied!!';
35+
result.style.color = 'orange';
36+
} else if (inputValue.toUpperCase() == "S" && comp_choice == "G") {
37+
message='Computer won!!';
38+
result.style.color = 'green';
39+
} else if (inputValue.toUpperCase() == "S" && comp_choice == "W") {
40+
message='User won!!';
41+
result.style.color = 'blue';
42+
} else if (inputValue.toUpperCase() == "W" && comp_choice == "G") {
43+
message='User won!!';
44+
result.style.color = 'blue';
45+
} else if (inputValue.toUpperCase() == "W" && comp_choice == "S") {
46+
message='Computer won!!';
47+
result.style.color = 'green';
48+
} else if (inputValue.toUpperCase() == "G" && comp_choice == "W") {
49+
message='Computer won!!';
50+
result.style.color = 'green';
51+
} else if (inputValue.toUpperCase() == "G" && comp_choice == "S") {
52+
message='User won!!';
53+
result.style.color = 'blue';
54+
} else {
55+
message='Invalid Input!!'
56+
result.style.color = 'red';
57+
}
58+
user_input.value = "";
59+
result.innerHTML=message;
60+
}

‎RockPaperScissorsGame/vinay-s36/style.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
body{
2+
background-image: linear-gradient(120deg, #2E3192 0%, #1BFFFF 100%);
3+
background-size: cover;
4+
background-attachment: fixed;
5+
font-size: 16px;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
@media (max-width: 768px) {
11+
body {
12+
font-size: 14px;
13+
}
14+
}
15+
16+
.card{
17+
border: 1px solid #ccc;
18+
font-family: 'Open Sans', sans-serif;
19+
/* border-radius: 10px; */
20+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
21+
padding: 2%;
22+
max-width: 420px;
23+
width: 80%;
24+
margin: 8% auto;
25+
background-color: #fff;
26+
height: 400px;
27+
overflow: auto;
28+
}
29+
30+
.card-content{
31+
position: relative;
32+
top: -12px;
33+
text-align: center;
34+
}
35+
36+
li{
37+
margin-left: 0;
38+
padding: 5px;
39+
font-size: 19px;
40+
}
41+
42+
ul{
43+
position: relative;
44+
top: -25px;
45+
list-style-type: none;
46+
padding: 0;
47+
}
48+
49+
.display-answers{
50+
position: relative;
51+
top: -25px;
52+
font-size: 17px;
53+
}
54+
55+
#display-result{
56+
position: relative;
57+
top: -38px;
58+
font-size: 20px;
59+
}
60+
61+
.instructions{
62+
position: relative;
63+
top: -13px;
64+
font-weight: bold ;
65+
font-size: 25px;
66+
}
67+
68+
input{
69+
position: relative;
70+
top: -23px;
71+
border: 1px solid black;
72+
border-radius: 5px;
73+
width: 100px;
74+
padding: 10px;
75+
font-size: larger;
76+
}

0 commit comments

Comments
 (0)