Skip to content

Commit b9df8c1

Browse files
agr1msagr1ms
committed
Added JS- Shooting Game folder
1 parent 82429c7 commit b9df8c1

7 files changed

Lines changed: 161 additions & 0 deletions

File tree

‎JS- Shooting Game/aim.png‎

23.4 KB
Loading

‎JS- Shooting Game/balloon1.png‎

171 KB
Loading

‎JS- Shooting Game/burst.png‎

68 KB
Loading

‎JS- Shooting Game/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>The Shoot!</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<div class="container">
12+
<button class="startBtn">START GAME!</button>
13+
14+
<div class="js_timer">
15+
<div id="timer">00:00</div>
16+
</div>
17+
18+
<img class="burst" src="burst.png" alt="" />
19+
<img class="cursor" src="aim.png" alt="" />
20+
</div>
21+
22+
<script src="index.js"></script>
23+
</body>
24+
</html>

‎JS- Shooting Game/index.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const cursor = document.querySelector(".cursor");
2+
window.addEventListener("mousemove", (e) => {
3+
cursor.style.top = e.pageY + "px";
4+
cursor.style.left = e.pageX + "px";
5+
});
6+
7+
const burst = document.querySelector(".burst");
8+
window.addEventListener("click", (e) => {
9+
burst.style.top = e.pageY + "px";
10+
burst.style.left = e.pageX + "px";
11+
12+
if(e.target === balloon) score++;
13+
14+
startBtn.innerText = "SCORE: " + score;
15+
});
16+
17+
const balloon = document.createElement("img");
18+
balloon.setAttribute("class","balloon");
19+
balloon.setAttribute("src","balloon1.png");
20+
21+
const container = document.querySelector(".container");
22+
23+
const contHeight = container.offsetHeight;
24+
const contWidth = container.offsetWidth;
25+
26+
setInterval(() => {
27+
const randTop = Math.random() * (contHeight -60);
28+
const randLeft = Math.random() * (contWidth -60);
29+
30+
balloon.style.position = "absolute";
31+
balloon.style.top = randTop + "px";
32+
balloon.style.left = randLeft + "px";
33+
},1000);
34+
35+
let score = 0;
36+
const startBtn = document.querySelector(".startBtn");
37+
38+
startBtn.addEventListener("click", () => {
39+
container.appendChild(balloon);
40+
41+
startBtn.innerText = "SCORE: " + score;
42+
});
43+
var timer;
44+
startBtn.addEventListener("click", () => {
45+
var sec = 0;
46+
timer = setInterval(()=>{
47+
ele.innerHTML = '00:'+sec;
48+
sec++;
49+
}, 1000)
50+
51+
});
52+
if(sec = 60){
53+
alert("Game Over! \n Score " + score);
54+
}
55+
56+
57+
var ele = document.getElementById('timer');

‎JS- Shooting Game/style.css‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
background-image: url('wall.jpg');
9+
background-repeat: no-repeat;
10+
background-size: cover;
11+
overflow: hidden;
12+
}
13+
14+
.js_timer{
15+
text-align: center;
16+
}
17+
18+
#timer{
19+
font-weight: bolder;
20+
font-size: x-large;
21+
background: white;
22+
border: 2px solid black;
23+
border-radius: 3px;
24+
color: black;
25+
width: 100px;
26+
height: 30px;
27+
position: relative;
28+
top: 40px;
29+
left: 45.5%;
30+
}
31+
32+
.container{
33+
position: relative;
34+
height: 100vh;
35+
}
36+
.startBtn{
37+
width: 140px;
38+
height: 45px;
39+
border: 2px solid black;
40+
border-radius: 5px;
41+
background-color: darkgoldenrod;
42+
color: darkred;
43+
font-weight: bolder;
44+
font-size: 1.1rem;
45+
padding: 3px;
46+
position: relative;
47+
top: 30px;
48+
left: 600px;
49+
cursor: none;
50+
}
51+
52+
.startBtn:hover{
53+
background-color: darkred;
54+
color: darkgoldenrod;
55+
}
56+
.balloon{
57+
width: 100px;
58+
height: auto;
59+
60+
}
61+
img::selection{
62+
background: transparent;
63+
}
64+
.burst{
65+
width: 50px;
66+
height: auto;
67+
position: absolute;
68+
z-index: 2;
69+
transform: translate(-50%, -50%);
70+
}
71+
72+
.cursor{
73+
position: absolute;
74+
height: 70px;
75+
transform: translate(-50%,-50%);
76+
pointer-events: none;
77+
z-index: 2;
78+
transition: 0.3s transform ease;
79+
transform-origin: 100% 100%;
80+
}

‎JS- Shooting Game/wall.jpg‎

209 KB
Loading

0 commit comments

Comments
 (0)