├── README.md
├── alien.png
├── app.js
├── bullet.png
├── rocket.png
├── space.jpg
└── spaceshooter.html


/README.md:
--------------------------------------------------------------------------------
1 | # Space-Shooter-Game-Using-Javascript
2 | Space Shooter Game Using Javascript
3 | 


--------------------------------------------------------------------------------
/alien.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnmux/Space-Shooter-Game-Using-Javascript/89d53475a540361f8dfbc0f20ff236f84814248c/alien.png


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | var jet = document.getElementById("jet");
 2 | var board = document.getElementById("board");
 3 | 
 4 | window.addEventListener("keydown", (e) => {
 5 |   var left = parseInt(window.getComputedStyle(jet).getPropertyValue("left"));
 6 |   if (e.key == "ArrowLeft" && left > 0) {
 7 |     jet.style.left = left - 10 + "px";
 8 |   }
 9 |   //460  =>  board width - jet width
10 |   else if (e.key == "ArrowRight" && left <= 460) {
11 |     jet.style.left = left + 10 + "px";
12 |   }
13 | 
14 |   if (e.key == "ArrowUp" || e.keyCode == 32) {
15 |     //32 is for space key
16 |     var bullet = document.createElement("div");
17 |     bullet.classList.add("bullets");
18 |     board.appendChild(bullet);
19 | 
20 |     var movebullet = setInterval(() => {
21 |       var rocks = document.getElementsByClassName("rocks");
22 | 
23 |       for (var i = 0; i < rocks.length; i++) {
24 |         var rock = rocks[i];
25 |         if (rock != undefined) {
26 |           var rockbound = rock.getBoundingClientRect();
27 |           var bulletbound = bullet.getBoundingClientRect();
28 | 
29 |           //Condition to check whether the rock/alien and the bullet are at the same position..!
30 |           //If so,then we have to destroy that rock
31 | 
32 |           if (
33 |             bulletbound.left >= rockbound.left &&
34 |             bulletbound.right <= rockbound.right &&
35 |             bulletbound.top <= rockbound.top &&
36 |             bulletbound.bottom <= rockbound.bottom
37 |           ) {
38 |             rock.parentElement.removeChild(rock); //Just removing that particular rock;
39 |             //Scoreboard
40 |             document.getElementById("points").innerHTML =
41 |               parseInt(document.getElementById("points").innerHTML) + 1;
42 |           }
43 |         }
44 |       }
45 |       var bulletbottom = parseInt(
46 |         window.getComputedStyle(bullet).getPropertyValue("bottom")
47 |       );
48 | 
49 |       //Stops the bullet from moving outside the gamebox
50 |       if (bulletbottom >= 500) {
51 |         clearInterval(movebullet);
52 |       }
53 | 
54 |       bullet.style.left = left + "px"; //bullet should always be placed at the top of my jet..!
55 |       bullet.style.bottom = bulletbottom + 3 + "px";
56 |     });
57 |   }
58 | });
59 | 
60 | var generaterocks = setInterval(() => {
61 |   var rock = document.createElement("div");
62 |   rock.classList.add("rocks");
63 |   //Just getting the left of the rock to place it in random position...
64 |   var rockleft = parseInt(
65 |     window.getComputedStyle(rock).getPropertyValue("left")
66 |   );
67 |   //generate value between 0 to 450 where 450 => board width - rock width
68 |   rock.style.left = Math.floor(Math.random() * 450) + "px";
69 | 
70 |   board.appendChild(rock);
71 | }, 1000);
72 | 
73 | var moverocks = setInterval(() => {
74 |   var rocks = document.getElementsByClassName("rocks");
75 | 
76 |   if (rocks != undefined) {
77 |     for (var i = 0; i < rocks.length; i++) {
78 |       //Now I have to increase the top of each rock,so that the rocks can move downwards..
79 |       var rock = rocks[i]; //getting each rock
80 |       var rocktop = parseInt(
81 |         window.getComputedStyle(rock).getPropertyValue("top")
82 |       );
83 |       //475 => boardheight - rockheight + 25
84 |       if (rocktop >= 475) {
85 |         alert("Game Over");
86 |         clearInterval(moverocks);
87 |         window.location.reload();
88 |       }
89 | 
90 |       rock.style.top = rocktop + 25 + "px";
91 |     }
92 |   }
93 | }, 450);
94 | 


--------------------------------------------------------------------------------
/bullet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnmux/Space-Shooter-Game-Using-Javascript/89d53475a540361f8dfbc0f20ff236f84814248c/bullet.png


--------------------------------------------------------------------------------
/rocket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnmux/Space-Shooter-Game-Using-Javascript/89d53475a540361f8dfbc0f20ff236f84814248c/rocket.png


--------------------------------------------------------------------------------
/space.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/learnmux/Space-Shooter-Game-Using-Javascript/89d53475a540361f8dfbc0f20ff236f84814248c/space.jpg


--------------------------------------------------------------------------------
/spaceshooter.html:
--------------------------------------------------------------------------------
 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>Space Shooter</title>
 7 |   </head>
 8 |   <style>
 9 |     body {
10 |       width: 100%;
11 |       overflow: hidden;
12 |       background: url("space.jpg");
13 |       background-size: cover;
14 |     }
15 |     #board {
16 |       position: relative;
17 |       width: 500px;
18 |       height: 500px;
19 |       margin: 40px auto;
20 |       border: 2px solid white;
21 |       background-color: black;
22 |       overflow: hidden;
23 |     }
24 | 
25 |     #jet {
26 |       position: absolute;
27 |       width: 40px;
28 |       height: 40px;
29 |       background: url("rocket.png");
30 |       background-size: contain;
31 |       background-repeat: no-repeat;
32 |       left: 50%;
33 |       bottom: 0px;
34 |     }
35 | 
36 |     .bullets {
37 |       position: absolute;
38 |       bottom: 40px;
39 |       left: 51%;
40 |       width: 20px;
41 |       height: 20px;
42 |       background: url("bullet.png");
43 |       background-size: contain;
44 |       background-repeat: no-repeat;
45 |     }
46 | 
47 |     .rocks {
48 |       position: absolute;
49 |       top: 0px;
50 |       width: 50px;
51 |       height: 50px;
52 |       background: url("alien.png");
53 |       background-size: contain;
54 |       background-repeat: no-repeat;
55 |     }
56 |     #points {
57 |       position: absolute;
58 |       top: 0px;
59 |       margin: 40px;
60 |       opacity: 0.7;
61 |       font-size: 10em;
62 |       color: white;
63 |     }
64 |   </style>
65 |   <script src="app.js" defer></script>
66 |   <body>
67 |     <div id="board">
68 |       <div class="rocks"></div>
69 |       <div id="jet"></div>
70 |     </div>
71 |     <div id="points">0</div>
72 |   </body>
73 | </html>
74 | 


--------------------------------------------------------------------------------