Skip to content

Commit fd6769c

Browse files
thenocturnalguythenocturnalguy
authored
This is first upload of the shooting game
Not fully complete. A many more things to add
1 parent ec3657d commit fd6769c

6 files changed

Lines changed: 351 additions & 0 deletions

File tree

‎Readme.txt‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
2+
3+
=============== Controls ==================
4+
5+
w - Up
6+
s - Down
7+
a - left
8+
d - Right
9+
10+
Not Responsive design Yet.
11+
But, I will fix it later :)
12+

‎assets/alien.jpg‎

3.62 KB
Loading

‎assets/ship.jpg‎

85.2 KB
Loading

‎functions.js‎

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
1+
2+
//-------------- Developer : Rahul ------------------
3+
4+
var developerMethod=() => {
5+
console.log('----------------------------------------------');
6+
console.log('| |');
7+
console.log('| Developer : Rahul Gupta. |');
8+
console.log('| If you are a true Coder, |');
9+
console.log('| Never copy someone\'s code. |');
10+
console.log('| |');
11+
console.log('----------------------------------------------');
12+
}
13+
14+
//------------- Variable Declaration ---------------
15+
16+
const gameArea=document.getElementById('gameArea');
17+
const ctx=gameArea.getContext('2d');
18+
var shipIcon=new Image();
19+
shipIcon.src='assets/ship.jpg';
20+
var alienIcon=new Image();
21+
alienIcon.src='assets/alien.jpg';
22+
var ship={
23+
x:undefined,
24+
y:undefined,
25+
vx:undefined,
26+
vy:undefined,
27+
}
28+
var shipBullets=[],nShipBullets;
29+
var enemies=[],nEnemies;
30+
var enemyBullets=[],nEnemyBullets;
31+
var stopGame;
32+
var score;
33+
34+
//--------------- Initialization -----------------
35+
var initVar=() => {
36+
gameArea.width=window.innerWidth*0.5;
37+
gameArea.height=window.innerHeight*0.8;
38+
this.nShipBullets=6;
39+
this.nEnemies=75;
40+
this.nEnemyBullets=3;
41+
this.stopGame=false;
42+
this.score=0;
43+
}
44+
45+
//--------------- Ship Movements ------------------
46+
47+
var initShip=(ship) => {
48+
ship.width=40;
49+
ship.height=35;
50+
ship.x=gameArea.width/2;
51+
ship.y=gameArea.height-50;
52+
ship.vx=20;
53+
ship.vy=0;
54+
}
55+
var drawShip=(ship) => {
56+
ctx.drawImage(shipIcon,ship.x-ship.width/2,ship.y,ship.width,ship.height);
57+
}
58+
window.addEventListener('keypress',(event) => {
59+
if(event.key==='a' || event.key==='A')
60+
this.ship.x-=this.ship.vx;
61+
else if(event.key==='d' || event.key==='D')
62+
this.ship.x+=this.ship.vx;
63+
if(this.ship.x>=gameArea.width)
64+
this.ship.x=gameArea.width;
65+
else if(this.ship.x<=0)
66+
this.ship.x=0;
67+
});
68+
69+
//----------------Ship Bullet Movements----------------
70+
71+
var initShipBullets=(shipBullet) => {
72+
shipBullet.x=this.ship.x;
73+
shipBullet.y=this.ship.y-10;
74+
shipBullet.vx=0;
75+
shipBullet.vy=-12;
76+
shipBullet.hit=false;
77+
shipBullet.radius=2.4;
78+
}
79+
var updateShipBullets=() => {
80+
var shipBullet,i;
81+
for(i=0;i<this.shipBullets.length;i++)
82+
{
83+
shipBullet=this.shipBullets[i];
84+
shipBullet.y+=shipBullet.vy;
85+
if(shipBullet.y<0)
86+
initShipBullets(shipBullet);
87+
}
88+
}
89+
var drawShipBullets=() => {
90+
var shipBullet,i;
91+
for(i=0;i<this.shipBullets.length;i++)
92+
{
93+
shipBullet=this.shipBullets[i];
94+
ctx.beginPath();
95+
ctx.arc(shipBullet.x,shipBullet.y,shipBullet.radius,0,2*Math.PI,false);
96+
ctx.arc(shipBullet.x,shipBullet.y-2,shipBullet.radius,0,2*Math.PI,false);
97+
ctx.arc(shipBullet.x,shipBullet.y-4,shipBullet.radius,0,2*Math.PI,false);
98+
if(shipBullet.hit==true)
99+
ctx.fillStyle='transparent';
100+
else
101+
ctx.fillStyle='white';
102+
ctx.fill();
103+
}
104+
}
105+
var addShipBullets=() => {
106+
var shipBullet;
107+
if(this.shipBullets.length<this.nShipBullets)
108+
{
109+
shipBullet={};
110+
initShipBullets(shipBullet);
111+
this.shipBullets.push(shipBullet);
112+
}
113+
}
114+
115+
//--------------- Enemy Movements ----------------
116+
117+
var initEnemies=(enemy) => {
118+
var tolX=[0.2,-0.2];
119+
enemy.width=25;
120+
enemy.height=30;
121+
enemy.x=15+Math.random()*(gameArea.width-15);
122+
enemy.y=0;
123+
enemy.vx=tolX[Math.floor(Math.random()*tolX.length)];
124+
enemy.vy=0.4;
125+
enemy.hit=false;
126+
enemy.radius=10;
127+
}
128+
var updateEnemies=() => {
129+
var enemy,i;
130+
for(i=0;i<this.enemies.length;i++)
131+
{
132+
enemy=this.enemies[i];
133+
enemy.y+=enemy.vy;
134+
if(enemy.y>gameArea.height)
135+
initEnemies(enemy);
136+
}
137+
}
138+
var drawEnemies=() => {
139+
var i,enemy;
140+
for(i=0;i<this.enemies.length;i++)
141+
{
142+
enemy=this.enemies[i];
143+
if(enemy.hit==false)
144+
ctx.drawImage(alienIcon,enemy.x-enemy.width/2,enemy.y,enemy.width,enemy.height);
145+
}
146+
}
147+
var addEnemies=() => {
148+
var bullet;
149+
if(this.enemies.length<this.nEnemies)
150+
{
151+
enemy={};
152+
initEnemies(enemy);
153+
this.enemies.push(enemy);
154+
}
155+
}
156+
157+
//---------------Enemy Bullet Movements------------
158+
159+
var initEnemyBullets=(enemyBullet,x,y) => {
160+
enemyBullet.x=x;
161+
enemyBullet.y=y;
162+
enemyBullet.vx=0;
163+
enemyBullet.vy=12;
164+
enemyBullet.radius=2.4;
165+
}
166+
var updateEnemyBullets=() => {
167+
var i,enemyBullet;
168+
for(i=0;i<this.enemyBullets.length;i++)
169+
{
170+
enemyBullet=this.enemyBullets[i];
171+
enemyBullet.y+=enemyBullet.vy;
172+
if(enemyBullet.y<0)
173+
initEnemyBullets(enemyBullet);
174+
}
175+
}
176+
var drawEnemyBullet=() => {
177+
178+
}
179+
180+
//--------------- Hits and Explosion --------------
181+
182+
var hitCheck=() => {
183+
var i=0,j=0;
184+
var tolX=20,tolY=12;
185+
var scoreBoard=document.getElementById('scoreBoard');
186+
for(i=0;i<this.shipBullets.length && this.shipBullets[i].y>0;i++)
187+
{
188+
for(j=0;j<this.enemies.length && this.enemies[j].y<gameArea.height;j++)
189+
{
190+
if((this.shipBullets[i].x>=this.enemies[j].x-tolX && this.shipBullets[i].x<=this.enemies[j].x+tolX) && (this.shipBullets[i].y>=this.enemies[j].y-tolY && this.shipBullets[i].y<=this.enemies[j].y+tolY) && this.shipBullets[i].hit==false && this.enemies[j].hit==false)
191+
{
192+
explosionMethod(this.shipBullets[i].x,this.shipBullets[i].y);
193+
this.shipBullets[i].hit=true;
194+
this.enemies[j].hit=true;
195+
this.score+=2;
196+
scoreBoard.innerHTML='Score : '+this.score;
197+
}
198+
}
199+
}
200+
}
201+
var explosionMethod=(x,y) => {
202+
var splinters=[],nSplinter=8,gravity=0.0,duration=8,counter=0;
203+
var colorArray=[
204+
'lightblue',
205+
'blue'
206+
];
207+
var initExplosion=(splinter,x,y) => {
208+
splinter.x=x;
209+
splinter.y=y;
210+
splinter.vx=-20+Math.random()*40;
211+
splinter.vy=-15+Math.random()*30;
212+
splinter.radius=Math.random()*2+1;
213+
}
214+
var updateExplosion=(x,y) => {
215+
var splinter,i;
216+
for(i=0;i<splinters.length;i++)
217+
{
218+
splinter=splinters[i];
219+
splinter.vy+=gravity;
220+
splinter.x+=splinter.vx;
221+
splinter.y+=splinter.vy;
222+
if(splinter.x<0 || splinter.x>gameArea.width || splinter.y<0 || splinter.y>gameArea.height)
223+
initExplosion(splinter,x,y);
224+
}
225+
}
226+
var drawExplosion=() => {
227+
var splinter,i;
228+
for(i=0;i<splinters.length;i++)
229+
{
230+
splinter=splinters[i];
231+
ctx.beginPath();
232+
ctx.arc(splinter.x,splinter.y,splinter.radius,0,2*Math.PI,false);
233+
ctx.fillStyle=colorArray[Math.floor(Math.random()*colorArray.length)];
234+
ctx.fill();
235+
}
236+
}
237+
var addExplosion=(x,y) => {
238+
var splinter;
239+
if(splinters.length<nSplinter)
240+
{
241+
splinter={};
242+
initExplosion(splinter,x,y);
243+
splinters.push(splinter);
244+
}
245+
}
246+
var explode=() => {
247+
var explosionFrame=window.requestAnimationFrame(explode);
248+
ctx.fillStyle='transparent';
249+
ctx.fillRect(0,0,gameArea.width,gameArea.height);
250+
counter++;
251+
if(counter<duration)
252+
{
253+
addExplosion(x,y);
254+
updateExplosion(x,y);
255+
drawExplosion();
256+
}
257+
else
258+
window.cancelAnimationFrame(explosionFrame);
259+
}
260+
explode();
261+
}
262+
263+
//------------------ Stop Game -------------------
264+
265+
var gameStop=() => {
266+
this.stopGame=true;
267+
console.log('stopped');
268+
}
269+
270+
//----------------- Update Frame -----------------
271+
272+
var updateMethod=() => {
273+
var mainFrame=window.requestAnimationFrame(updateMethod);
274+
if(this.stopGame==true)
275+
window.cancelAnimationFrame(mainFrame);
276+
else
277+
{
278+
ctx.fillStyle='rgba(0,0,0,0.45)';
279+
ctx.fillRect(0,0,gameArea.width,gameArea.height);
280+
drawShip(this.ship);
281+
updateShipBullets();
282+
drawShipBullets();
283+
updateEnemies();
284+
drawEnemies();
285+
hitCheck();
286+
}
287+
}
288+
var main_gameMethod=() => {
289+
initVar();
290+
initShip(this.ship);
291+
setInterval(addShipBullets,100);
292+
setInterval(addEnemies,750);
293+
updateMethod();
294+
}

‎index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Shooting Game</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" type="text/css" href="style.css">
8+
</head>
9+
<body onload="developerMethod(); gameStop();main_gameMethod()">
10+
<canvas id="gameArea"></canvas>
11+
<div class='score-board' id='scoreBoard'>
12+
Score : 0
13+
</div>
14+
<script type="text/javascript" src="functions.js"></script>
15+
</html>

‎style.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
body, html, *
2+
{
3+
margin: 0;
4+
padding: 0;
5+
}
6+
body, html
7+
{
8+
overflow: hidden;
9+
background-color: black;
10+
}
11+
#gameArea
12+
{
13+
border: 5px solid #63f000;
14+
position: absolute;
15+
top: 50%;
16+
left: 50%;
17+
transform: translate(-50%,-50%);
18+
}
19+
.score-board
20+
{
21+
font-size: 40px;
22+
font-family: Britannic Bold;
23+
position: absolute;
24+
top: 50px;
25+
left: 30px;
26+
letter-spacing: 2px;
27+
color: #00f350e6;
28+
text-shadow: 2.3px 1px 1px #ff53eb;
29+
30+
}

0 commit comments

Comments
 (0)