KHWOPA SECONDARY SCHOOL

DEPARTMENT OF COMPUTER SCIENCE

Dekocha-6, BHAKTAPUR

coverpage

A FINAL REPORT
ON
"Shpace Shooter"

A report submitted for the partial fulfillment of the requirements for the degree of NEB in
Computer Science

Submitted by: Submitted to:

Suyog Shrestha Computer Science Department
Kabit Adhikari Khwopa Secondary School
Rojin Shrestha Dekocha-6, Bhaktapur
Siran Kasti
Smarat Makaju

UNDER THE GUIDANCE OF

Bikash

Date of Submission:2081/09/09
 DEPARTMENT OF COMPUTER SCIENCE
KHWOPA SECONDARY SCHOOL
DEKOCHA-6, BHAKTAPUR

CERTIFICATE
This is to certify that the project entitled "Shape Shooter" submitted by Suyog Shreastha, Samrat Makaju
Rojin Shrestha, Siran Kasti, Kabit Adhikari in partial fulfillment of the requirements for the internal
marks of Computer Science in NEB (Nepal Education Board) Class 12 (XII), is a bonafide work to the
best of our knowledge and may be placed before the examination board for their consideration.

Panel of Examiners:

Name Signature Date

Mr. Bikash .C
Project Supervisors
 ACKNOWLEDGEMENT

We are thankful to all those who have helped us directly or indirectly with this project. Foremost,
we would like to thank the Department of Computer Science of Khwopa Secondary School for
giving us an opportunity to carry out our mini project entitled "Shape Shooter."

We would like to thank our computer teacher, Bikash .C, for their guidance while developing
the project and also for organizing the project schedules. We would like to acknowledge their
efforts that encouraged us to take on this challenging project.

We would also like to offer our gratitude toward our friends who helped throughout our project
development phase by providing several references regarding different links for code and
assisting with the project report preparation.
 ABSTRACT

The main goal of this project was to develop a dynamic and engaging game titled "Shape
Shooter." This game was created as a part of our mini-project to showcase our understanding of
programming concepts and game development techniques. Shape Shooter is designed to provide
an interactive and challenging experience for players, focusing on precision, quick reflexes, and
strategic gameplay.

The project aims to demonstrate our ability to create a functional and entertaining game that
incorporates essential features like movement controls, shooting mechanics, and visual effects.
By developing this game, we also explored team collaboration, problem-solving, and debugging
processes.

The game is simple yet engaging, offering players an enjoyable experience while demonstrating
our technical skills in coding and design. It reflects our collective efforts in planning,
implementing, and finalizing a project that is both creative.
Table of content
 Introduction
This project focuses on designing and developing a browser-based 2D space shooter game that
aims to deliver a fun and challenging experience for players. The game involves controlling a
spaceship to fight off enemies, collect power-ups, and face a thrilling final boss battle. It
emphasizes accessibility and simplicity, requiring nothing more than a web browser to play
while offering an immersive arcade-style experience.

Background
Space shooter games have been a staple of gaming for decades, blending action and strategy in a
high-paced, engaging manner. This project revisits the genre with modern web technologies,
creating a dynamic experience with progressive difficulty and exciting gameplay elements. By
incorporating features like power-ups and boss fights, it offers a fresh take on the classic arcade
shooter genre while remaining true to its roots.

Objectives
1. To design and develop a web-based 2D space shooter game that is accessible to a wide range of
players.
2. To implement intuitive controls and engaging gameplay mechanics for an immersive player
experience.
3. To create progressive difficulty levels, ensuring players face increasingly challenging scenarios.
4. To utilize core web technologies such as HTML, CSS, and JavaScript to deliver a lightweight and
responsive game.
5. To emphasize replayability by incorporating features like upgrades and boss battles.

Applications
1. Can be used as a learning resource for students and developers interested in game development
using web technologies.
2. Provides entertainment and a fun way for players to test their reflexes and strategic thinking.
3. Demonstrates the potential of browser-based games for delivering high-quality experiences
without the need for downloads or installations.
4. Serves as a foundation for future enhancements, such as multiplayer functionality, sound effects,
and advanced graphics.
5. Offers an opportunity to showcase skills in programming, design, and project development in
portfolios or presentations.
Scope
 Develop a 2D space shooter game using core web technologies: HTML, CSS, and JavaScript.
The game focuses on intuitive and responsive design to ensure smooth user interaction.
 Implement features such as precise player controls, realistic shooting mechanics, and detailed
collision detection. These ensure the gameplay feels fluid and responsive.
 Introduce structured levels with increasing difficulty, including regular enemies.
 Optimize the game for desktop browsers, ensuring compatibility and responsiveness across
different screen sizes.

Limitations
 The game is primarily tailored for desktop environments, limiting its functionality on mobile
devices where touchscreen controls are not yet supported.
 Graphics are kept simple, focusing on 2D visuals rather than advanced 3D effects, to prioritize
performance and accessibility.
 Multiplayer features and online leaderboards are not included, restricting the game to a single-
player experience.
 Audio elements like sound effects and background music are currently absent, which may affect
the overall immersion for some players.

Gameplay Instructions
 Movement: Use the Arrow Keys to navigate the spaceship horizontally and vertically across the
screen. This allows you to dodge enemy attacks and position yourself strategically.
 Shooting: Press the Spacebar to fire bullets at regular intervals, letting you attack enemies while
focusing on movement.
 Upgrades: Press the B key to upgrade bullet damage when enough score is accumulated. Each
upgrade increases damage and requires a progressively higher score.
 Enemies: Regular enemies spawn at increasing rates as the game progresses. Destroying them
awards points, and avoiding collisions is key to survival.
 Boss Battle: Upon reaching higher scores, advanced enemies and bosses spawn with additional
health and mechanics. Avoid their attacks while targeting their weak points to emerge victorious.
 Pause and Restart: Press Enter to pause or restart the game. A visible message provides
instructions during pauses.
 Methodology

Code:<html lang="en"><head><title>Space Shooter</title>

<style>

html,body{margin:0;padding:0;overflow:hidden;background-color:black;font-family:'Orbitron',sans-serif;}

canvas{display:block;margin:0 auto;border:5px solid red;background-color:black;}

#scoreBoard{position:absolute;top:10px;left:50%;transform:translateX(-50%);color:white;font-
size:18px;font-weight:bold;text-align:center;}

#gameOverMessage{position:absolute;top:50%;left:50%;transform:translate(-50%,-
50%);color:white;font-size:24px;text-align:center;visibility:hidden;}

#gameOverMessage button{padding:10px 20px;font-size:16px;background-

color:red;color:white;border:none;cursor:pointer;}

#keyUsage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-
size:14px;font-weight:bold;text-align:center;visibility:hidden;}

#startMessage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-
size:24px;font-weight:bold;text-align:center;}

</style>

</head>

<body>

<canvas id="mycanvas" width="600" height="600"></canvas>

<div id="scoreBoard"></div>

<div id="gameOverMessage"><p>Game Over!</p><p>Your Final Score: <span

id="finalScore">0</span></p><button onclick="gameRestart()">Restart</button></div>

<div id="keyUsage"><p>Keys in use: Arrow Keys (Move), Space (Shoot), B (Upgrade), Enter
(Pause)</p></div>

<div id="startMessage"><p>Press Enter to Start</p></div>

<script>
const canvas=document.getElementById("mycanvas");const ctx=canvas.getContext("2d");let
WIDTH=canvas.width;let HEIGHT=canvas.height;let
score=0,lives=3,alive=true,gameStarted=false,paused=true;let enemyList=[];let bulletList=[];const
ship={x:275,y:525,w:50,h:50,speedBullet:15,bulletDamage:1,bulletCooldown:0,upgradeCost:50};const
playerImage=new Image();playerImage.src='player.jpg';const
enemyImages=['enemy1.jpg','enemy2.jpg','enemy3.jpg','enemy4.jpg','enemy5.jpg','enemy6.jpg','enemy7.j
pg','enemy8.jpg','enemy9.jpg','enemy10.jpg'];const
loadedEnemyImages=[];enemyImages.forEach((imagePath,index)=>{const img=new
Image();img.src=imagePath;img.onload=()=>{loadedEnemyImages[index]=img;};});const
enemyTypes=[{scoreThreshold:0,hp:1},{scoreThreshold:50,hp:2},{scoreThreshold:100,hp:3},{scoreThre
shold:200,hp:4},{scoreThreshold:400,hp:5},{scoreThreshold:500,hp:6},{scoreThreshold:600,hp:7},{scor
eThreshold:700,hp:8},{scoreThreshold:900,hp:9},{scoreThreshold:1000,hp:10}];

class
Enemy{constructor(x,y,type){this.x=x;this.y=y;this.w=50;this.h=50;this.type=type;this.hp=type.hp;this.i
mage=loadedEnemyImages[type.hp-
1];}draw(){if(this.image){ctx.drawImage(this.image,this.x,this.y,this.w,this.h);}}move(){this.y+=2;}}

class
Bullet{constructor(x,y,speed){this.x=x;this.y=y;this.w=5;this.h=10;this.speed=speed;}draw(){ctx.fillStyl
e="yellow";ctx.fillRect(this.x,this.y,this.w,this.h);}move(){this.y-=this.speed;}}

function spawnEnemy(){if(enemyList.length<5&&loadedEnemyImages.length>0){const
enemyType=getEnemyTypeForScore(score);let newEnemy;let overlapping;do{overlapping=false;const
x=Math.random()*(WIDTH-50);const y=-25;newEnemy=new Enemy(x,y,enemyType);for(let enemy of
enemyList){if(newEnemy.x<enemy.x+enemy.w&&newEnemy.x+newEnemy.w>enemy.x&&newEnemy.
y<enemy.y+enemy.h&&newEnemy.y+newEnemy.h>enemy.y){overlapping=true;break;}}}while(overlap
ping);enemyList.push(newEnemy);}}

function getEnemyTypeForScore(score){for(let i=enemyTypes.length-1;i>=0;i--

){if(score>=enemyTypes[i].scoreThreshold){return enemyTypes[i];}}return enemyTypes[0];}

function
moveEnemies(){enemyList.forEach((enemy,index)=>{enemy.move();if(enemy.y>HEIGHT){enemyList.
splice(index,1);spawnEnemy();}});}

function
moveBullets(){bulletList.forEach((bullet,index)=>{bullet.move();if(bullet.y<0){bulletList.splice(index,1);
}});}

function
collisionDetection(){bulletList.forEach((bullet,bIndex)=>{enemyList.forEach((enemy,eIndex)=>{if(bulle
t.x<enemy.x+enemy.w&&bullet.x+bullet.w>enemy.x&&bullet.y<enemy.y+enemy.h&&bullet.y+bullet.h
>enemy.y){enemy.hp-
=ship.bulletDamage;if(enemy.hp<=0){score+=enemy.type.hp*10;enemyList.splice(eIndex,1);spawnEne
my();}bulletList.splice(bIndex,1);}});});enemyList.forEach(enemy=>{if(ship.x<enemy.x+enemy.w&&sh
ip.x+ship.w>enemy.x&&ship.y<enemy.y+enemy.h&&ship.y+ship.h>enemy.y){lives-
=1;resetShip();if(lives===0){alive=false;}}});}
function displayScore(){document.getElementById("scoreBoard").innerHTML=`Score: ${score} | Lives:
${lives} | Bullet Damage: ${ship.bulletDamage} | Upgrade Cost:
${ship.upgradeCost}`;if(!alive){document.getElementById("finalScore").textContent=score;document.ge
tElementById("gameOverMessage").style.visibility="visible";}else{document.getElementById("gameOv
erMessage").style.visibility="hidden";}}

function
gameStart(){if(!gameStarted){gameStarted=true;document.getElementById("startMessage").style.visibili
ty="hidden";paused=false;document.getElementById("keyUsage").style.visibility="hidden";gameLoop();}
}

let enemyBullets=[];

function
enemyShoot(){enemyList.forEach(enemy=>{if(enemy.type.hp>=5&&Math.random()<0.01){const
bullet=new EnemyBullet(enemy.x+enemy.w/2-2.5,enemy.y+enemy.h,5);enemyBullets.push(bullet);}});}

class
EnemyBullet{constructor(x,y,speed){this.x=x;this.y=y;this.w=5;this.h=10;this.speed=speed;}draw(){ctx.
fillStyle="red";ctx.fillRect(this.x,this.y,this.w,this.h);}move(){this.y+=this.speed;}}

function
moveEnemyBullets(){enemyBullets.forEach((bullet,index)=>{bullet.move();if(bullet.y>HEIGHT){enem
yBullets.splice(index,1);}});}

function
detectPlayerHit(){enemyBullets.forEach((bullet,index)=>{if(bullet.x<ship.x+ship.w&&bullet.x+bullet.w
>ship.x&&bullet.y<ship.y+ship.h&&bullet.y+bullet.h>ship.y){lives-
=1;enemyBullets.splice(index,1);if(lives===0){alive=false;}}});}

function
gameLoop(){if(paused||!alive)return;ctx.clearRect(0,0,WIDTH,HEIGHT);enemyShoot();moveEnemyBull
ets();detectPlayerHit();enemyBullets.forEach(bullet=>bullet.draw());moveEnemies();moveBullets();collis
ionDetection();displayScore();enemyList.forEach(enemy=>enemy.draw());bulletList.forEach(bullet=>bul
let.draw());ctx.drawImage(playerImage,ship.x,ship.y,ship.w,ship.h);spawnEnemy();if(ship.bulletCooldow
n>0){ship.bulletCooldown-=16;}requestAnimationFrame(gameLoop);}

function resetShip(){ship.x=WIDTH/2-ship.w/2;ship.y=HEIGHT-ship.h-10;}

function
gameRestart(){score=0;lives=3;enemyList=[];bulletList=[];ship.bulletCooldown=0;alive=true;gameStarte
d=false;paused=true;resetShip();document.getElementById("gameOverMessage").style.visibility="hidde
n";document.getElementById("startMessage").style.visibility="visible";document.getElementById("key
Usage").style.visibility="visible";}

function upgradeBulletDamage(){if(score>=ship.upgradeCost){score-
=ship.upgradeCost;ship.bulletDamage*=2;ship.upgradeCost*=2;}else{console.log("Not enough score to
upgrade!");}}
document.addEventListener("keydown",function(e){if(e.key==="Enter"){if(!gameStarted){gameStart();}
else{paused=!paused;}}if(paused||!alive)return;if(e.key==="ArrowRight"&&ship.x+ship.w<WIDTH){sh
ip.x+=10;}if(e.key==="ArrowLeft"&&ship.x>0){ship.x-
=10;}if(e.key==="ArrowUp"&&ship.y>0){ship.y-
=10;}if(e.key==="ArrowDown"&&ship.y+ship.h<HEIGHT){ship.y+=10;}if(e.key==="
"&&ship.bulletCooldown<=0){const bullet=new Bullet(ship.x+ship.w/2-
2.5,ship.y,ship.speedBullet);bulletList.push(bullet);ship.bulletCooldown=500;}if(e.key==="b"||e.key==="
B"){upgradeBulletDamage();}});

window.onload=()=>{loadedEnemyImages.forEach((img,index)=>{if(!img.complete)return;});};

</script>

</body>

</html>
 DISCUSSION & CONCLUSION

Discussion
The development of the 2D space shooter game involved significant planning, design, and
implementation phases. This project combined creativity with technical expertise, utilizing
technologies such as HTML, CSS, and JavaScript. During the development process, the focus
was on creating a balance between engaging gameplay mechanics and optimized performance.
The game’s intuitive controls and progressively challenging levels were designed to keep players
engaged while maintaining accessibility for a wide audience.

Key challenges included fine-tuning the collision detection system to ensure accuracy,
implementing smooth animations for player and enemy movements, and optimizing game logic
to run efficiently in the browser. The project also emphasized modularity, allowing for easy
updates and the addition of new features in the future.

Additionally, testing and debugging were crucial aspects of the development process. Thorough
testing ensured the game was free from significant bugs and ran seamlessly across different
browsers and devices. Feedback from peers during the development phase was invaluable in
improving the user experience and refining gameplay mechanics.

Overall, this project highlights the potential of web-based technologies to deliver compelling
gaming experiences and serves as a testament to the team’s ability to design and execute a
complete software project.

Conclussion
The 2D space shooter game achieves its goal of delivering an exciting and approachable gaming
experience. With intuitive controls, progressive challenges, and engaging visuals, it offers
players a satisfying arcade-style adventure. While there are areas for future enhancement, such as
adding sound effects and multiplayer options, the project serves as a strong foundation for
further development and innovation.
 APPENDIX