Skip to content

Commit a605ca3

Browse files
Amirc0derAmirc0der
authored
Add files via upload
1 parent 2b1c457 commit a605ca3

File tree

7 files changed

+258
-0
lines changed

7 files changed

+258
-0
lines changed

‎bomb.png

24.5 KB
Loading

‎fire.gif

34.8 KB
Loading

‎index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>My second excersie</title>
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
</head>
8+
<body>
9+
<div class="onscreen">
10+
<span>Number of Lasers:<h5></h5></span>
11+
<div id="healthbar"><p>Player</p><div id="healthfiller"></div></div>
12+
<div id="healthbar_m"><p>Monster</p><div id="healthfiller_m"></div></div>
13+
</div>
14+
<div class="game">
15+
<div class="player"></div>
16+
<div class="monster"></div>
17+
</div>
18+
<div class="help">Press CTRL to shoot laser and press SPACE to leave a bomb. You cannot leave 2 bombs at the same time.</div>
19+
<script type="text/javascript" src="js.js"></script>
20+
</body>
21+
</html>

‎js.js

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
const game = document.querySelector(".game");
2+
const player = game.querySelector(".player");
3+
const monster = game.querySelector(".monster")
4+
const health = document.querySelector("#healthfiller").style;
5+
const health_m = document.querySelector("#healthfiller_m").style;
6+
const player_speed = 20;
7+
let monster_speedx = 10;
8+
let monster_speedy = 10;
9+
let heln = 200;
10+
let heln_m = 200;
11+
let bombLimit = 1;
12+
let laserLimit = 5;
13+
let x = 100;
14+
let y = 100;
15+
let monsterx = 400;
16+
let monstery = 200;
17+
let bomby=0;
18+
let bombx=0;
19+
document.querySelector("h5").innerHTML = laserLimit;
20+
function fire () {
21+
const bomb = game.querySelector(".bomb");
22+
bomb.style.backgroundImage ="url(fire.gif)";
23+
window.setTimeout(fireF,1000);
24+
if ( monstery< bomby+100 && monstery > bomby-150 && monsterx< bombx+100 && monsterx >bombx-150 ) {
25+
healthdmg_m()
26+
}
27+
if ( y< bomby+100 && y > bomby-150 && x< bombx+100 && x >bombx-150 ) {
28+
healthdmg(89)
29+
}
30+
}
31+
function fireF() {
32+
bombLimit = 1;
33+
game.querySelector(".bomb").remove();
34+
}
35+
function laserfire () {
36+
game.querySelector(".laser").remove();
37+
document.querySelector("h5").innerHTML = laserLimit;
38+
39+
}
40+
function player_move (x,y){
41+
player.style.left = x + "px";
42+
player.style.top = y + "px";
43+
}
44+
player_move(x,y);
45+
46+
function healthdmg(z) {
47+
if (heln > 10) {
48+
heln -= z;
49+
health.width = heln + "px";
50+
} else {
51+
alert("Game Over!")
52+
window.location.reload()
53+
}
54+
}
55+
function healthdmg_m() {
56+
if (heln_m > 40) {
57+
heln_m -= 41;
58+
health_m.width = heln_m + "px";
59+
} else {
60+
alert("You Won!")
61+
window.location.reload()
62+
}
63+
}
64+
65+
function Monstermove() {
66+
if ( monstery > 0 && monstery < 500) { monstery += monster_speedy} else {monstery -= monster_speedy;monster_speedy=-monster_speedy;}
67+
monster.style.top = monstery +"px";
68+
if ( monsterx > 0 && monsterx < 1150) { monsterx += monster_speedx} else {monsterx -= monster_speedx;monster_speedx=-monster_speedx;}
69+
monster.style.left = monsterx +"px";
70+
if ( monster_speedx>0 ) {monster.style.transform = "scaleX(1)"} else {monster.style.transform = "scaleX(-1)"}
71+
window.setTimeout(Monstermove,40)
72+
if ( monstery< y+50 && monstery > y-100 && monsterx< x+50 && monsterx >x-100 ) {
73+
healthdmg(11)
74+
}
75+
}
76+
Monstermove()
77+
78+
document.addEventListener('keydown', function(event) {
79+
if (event.keyCode == 37) {
80+
if(x>0) {x -= player_speed;player_move(x,y);player.style.transform = "scaleX(-1)";}
81+
82+
} else if (event.keyCode == 38) {
83+
if(y>0) {y -= player_speed;player_move(x,y);}
84+
85+
} else if (event.keyCode == 39) {
86+
if (x<1200) {x += player_speed;player_move(x,y);player.style.transform = "scaleX(1)";}
87+
88+
} else if (event.keyCode == 40) {
89+
if(y<530) {y += player_speed;player_move(x,y);}
90+
91+
} else if (event.keyCode == 32) {
92+
if(bombLimit>0) {
93+
bombLimit --;
94+
const newBomb = document.createElement("div");
95+
bombx = x;
96+
bomby = y;
97+
newBomb.setAttribute("class","bomb");
98+
newBomb.style.left = x + "px";
99+
newBomb.style.top = y + "px";
100+
game.appendChild(newBomb);
101+
window.setTimeout(fire, 2000)
102+
}
103+
} else if (event.keyCode == 17) {
104+
if(laserLimit>0) {
105+
let jahat
106+
if(player.style.transform=="scaleX(-1)") {
107+
jahat = x +50 - 1300;
108+
} else {
109+
jahat = x + 50;
110+
}
111+
const laser = document.createElement("div");
112+
laser.classList.add("laser");
113+
laser.style.top= y+50 + "px";
114+
laser.style.left = jahat + "px";
115+
game.appendChild(laser);
116+
window.setTimeout(laserfire, 50);
117+
if(monstery< y+50 && monstery > y-100 ) {healthdmg_m()}
118+
laserLimit--;
119+
}
120+
121+
}
122+
});

‎monster.png

45.2 KB
Loading

‎player.png

20.5 KB
Loading

‎style.css

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
2+
*{ transition : all 0.2s ease 0s }
3+
body{
4+
padding: 0;
5+
margin: 0;
6+
font-family: verdana;
7+
line-height: 2;
8+
letter-spacing: 1.5px;
9+
font-size: 15px;
10+
background: #999 no-repeat;
11+
color: #fff;
12+
}
13+
.onscreen {
14+
position: fixed;
15+
top: 0;
16+
width: 750px;
17+
height: 50px;
18+
z-index: 10;
19+
background: rgba(0, 0, 0, 0.3);
20+
border-radius: 10px;
21+
}
22+
.onscreen *{
23+
position: absolute;
24+
}
25+
span {
26+
top: 10px;
27+
left: 500px;
28+
}
29+
h5 {
30+
top: -17px;
31+
left: 180px;
32+
}
33+
.game {
34+
width: 1300px;
35+
height: 650px;
36+
background: #333;
37+
margin: 50px 50px 10px 50px;
38+
position: relative;
39+
border-radius: 15px;
40+
overflow: hidden;
41+
42+
}
43+
.game * {
44+
position: absolute;
45+
}
46+
p {
47+
left: 10px;
48+
top: -20px;
49+
z-index: 5;
50+
}
51+
#healthbar {
52+
left: 50px;
53+
top: 13px;
54+
opacity: 0.9;
55+
background-color: #555;
56+
width: 200px;
57+
height: 20px;
58+
border: 3px solid #fff;
59+
border-radius: 50px;
60+
}
61+
#healthfiller {
62+
border-radius: 50px;
63+
background-color: #5f5;
64+
width: 200px;
65+
height: 20px;
66+
}
67+
#healthbar_m {
68+
left: 270px;
69+
top: 13px;
70+
opacity: 0.9;
71+
background-color: #555;
72+
width: 200px;
73+
height: 20px;
74+
border: 3px solid #fff;
75+
border-radius: 50px;
76+
}
77+
#healthfiller_m {
78+
border-radius: 50px;
79+
background-color: #f55;
80+
width: 200px;
81+
height: 20px;
82+
}
83+
.bomb {
84+
width: 100px;
85+
height: 100px;
86+
background: url(bomb.png) no-repeat;
87+
background-size: 100% auto;
88+
}
89+
.player {
90+
transform: scaleX(1);
91+
z-index: 5;
92+
width: 100px;
93+
height: 100px;
94+
background: url(player.png) no-repeat;
95+
background-size: 100% auto;
96+
}
97+
.monster {
98+
z-index: 4;
99+
left: 400px;
100+
top: 50px;
101+
transform: scaleX(-1);
102+
width: 150px;
103+
height: 150px;
104+
background: url(monster.png) no-repeat;
105+
background-size: 100% auto;
106+
}
107+
.laser {
108+
width: 100%;
109+
background: red;
110+
height: 3px;
111+
}
112+
.help {
113+
margin-left: 50px;
114+
margin-bottom: 20px;
115+
}

0 commit comments

Comments
 (0)