An adventure on an alien planet, infested fully with fishy machines, Destroy them and
escape.....
window.addEventListener('load',
function () {
//canvas setup
const canvas =
document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = 1500;
canvas.height = 500;
class InputHandler {
constructor(game) {
this.game = game;
window.addEventListener
('keydown', e => {
if (((e.key ===
'ArrowUp') ||
(e.key ===
'ArrowDown')
) && this.game.keys
.indexOf(e.key) === -1) {
this.game.keys.push
(e.key);
}
else if (e.key === ' ')
{
this.game.player
.shootTop();
}
else if (e.key === 'd')
{
this.game.debug =
!this.game.debug;
}
});
window.addEventListener
('keyup', e => {
if (this.game.keys
.indexOf(e.key) > -1)
{
this.game.keys
.splice(this.game
.keys.indexOf
(e.key), 1);
}
});
}
}
class Projectile {
constructor(game, x, y) {
this.game = game;
this.x = x;
this.y = y;
this.width = 10;
this.height = 3;
this.speed = 3;
this.markedforDeletion
= false;
this.image = document
.getElementById
('projectile');
}
update() {
this.x += this.speed;
if (this.x > this.game
.width * 0.8)
this.markedforDeletion
= true;
}
draw(context) {
context.drawImage
(this.image, this.x,
this.y);
}
}
class particle {
constructor(game, x, y) {
this.game = game;
this.x = x;
this.y = y;
this.image = document.
getElementById('gears');
this.frameX = Math.floor
(Math.random() * 3);
this.frameY = Math.floor
(Math.random() * 3);
this.spriteSize = 50;
this.sizeModifier =
(Math.random() * 0.5 +
0.5).toFixed(1);
this.size =
this.spriteSize * this.
sizeModifier;
this.speedX =
Math.random() * 6 - 3;
this.speedY =
Math.random() * -15;
this.gravity = 0.5;
this.markedforDeletion
= false;
this.angle = 0;
this.va = Math.random()
* 0.2 - 0.1;
this.bounced = 0;
this.BottomBounce
Boundary = Math.random()
* 80 + 60;
}
update() {
this.angle += this.va;
this.speedY += this.
gravity;
this.x -= this.speedX
+ this.game.speed;
this.y += this.speedY;
if (this.y > this.game
.height + this.size ||
HTMLDListElement.x < 0
- this.size)
this.markedforDeletion
= true;
if (this.y > this.game
.height - this.Bottom
BounceBoundary && this
.bounced < 5) {
this.bounced++;
this.speedY *= -0.7;
}
}
draw(context) {
context.save();
context.translate(this.x,
this.y);
context.rotate(this.angle);
context.drawImage
(this.image, this.frameX *
this.spriteSize, this.frameY
* this.spriteSize,
this.spriteSize,
this.spriteSize, this.size
* -0.5, this.size * -0.5,
this.size, this.size)
context.restore();
}
}
class Player {
constructor(game) {
this.game = game;
this.width = 120;
this.height = 190;
this.x = 20;
this.y = 100;
this.frameX = 0;
this.frameY = 0;
this.maxFrame = 37;
this.speedY = 0;
//no movement
this.maxSpeed = 5;
//max speed change player
this.projectiles = [];
this.image = document
.getElementById('player');
this.powerUp = false;
this.powerUpTimer = 0;
this.powerUpLimit = 10000;
}
update(deltaTime) {
if (this.game.keys
.includes('ArrowUp'))
this.speedY =
-this.maxSpeed;
else if (this.game.keys
.includes('ArrowDown'))
this.speedY = this.maxSpeed;
else this.speedY = 0;
this.y += this.speedY;
// vertical Boundaries
if (this.y > this.game
.height- this.height * 0.5)
this.y = this.game.height
- this.height * 0.5;
else if (this.y <
-this.height * 0.5)
this.y = -this.height * 0.5;
//handle projectiles
this.projectiles.forEach
(projectile => {
projectile.update();
});
this.projectiles =
this.projectiles.filter
(projectile => !projectile
.markedforDeletion);
//animating player(sprite)
if (this.frameX <
this.maxFrame) {
this.frameX++;
}
else {
this.frameX = 0;
}
//power up
if (this.powerUp) {
if (this.powerUpTimer >
this.powerUpLimit) {
this.powerUpTimer
= 0;
this.powerUp = false;
this.frameY = 0;
}
else {
this.powerUpTimer
+= deltaTime;
this.frameY = 1;
this.game.ammo
+= 0.1;
}
}
}
draw(context) {
this.projectiles.forEach
(projectile => {
projectile.draw(context);
});
if (this.game.debug) context
.strokeRect(this.x, this.y,
this.width, this.height);
context.drawImage(this.image,
this.frameX * this.width,
this.frameY * this.height,
this.width, this.height,
this.x, this.y, this.width,
this.height);
}
shootTop() {
if (this.game.ammo > 0) {
this.projectiles.push
(new Projectile
(this.game, this.x + 80,
this.y + 30));
this.game.ammo--;
}
if (this.powerUp)
this.shootBottom();
}
shootBottom() {
if (this.game.ammo > 0) {
this.projectiles.push
(new Projectile
(this.game, this.x +
80, this.y +
175));
}
}
enterPowerUp() {
this.powerUptimer = 0;
this.powerUp = true;
if (this.game.ammo >
this.game.maxAmmo)
this.game.ammo =
this.game.maxAmmo;
}
}
//enemies here
class Enemy {
constructor(game) {
this.game = game;
this.x = this.game
.width;
this.speedX =
Math.random() * -1.5
- 0.5;
this.markedforDeletion
= false;
this.frameX = 0;
this.frameY = 0;
this.maxFrame = 37;
}
update() {
this.x += this.speedX -
this.game.speed;
if (this.x + this.width < 0)
this.markedforDeletion
= true;
//enemy sprite animation
if (this.frameX <
this.maxFrame) {
this.frameX++;
}
else this.frameX = 0;
}
draw(context) {
if (this.game.debug)
context.strokeRect(this.x,
this.y, this.width,
this.height);
context.drawImage(this.image,
this.frameX * this.width,
this.frameY * this.height,
this.width, this.height,
this.x, this.y, this.width,
this.height);
context.font = '30px Bangers'
if (this.game.debug) {
context.fillText
(this.lives, this.x,
this.y);
}
}
}
// Angler Fish
class Angler1 extends Enemy {
constructor(game) {
super(game);
this.width = 228;
this.height = 169;
this.y = Math.random() *
(this.game.height * 0.95
- this.height);
this.image = document
.getElementById('angler1');
this.frameY = Math.floor
(Math.random() * 3);
this.lives = 5;
this.score = this.lives;
this.type = 'angler1'
}
}
class Angler2 extends Enemy {
constructor(game) {
super(game);
this.width = 213;
this.height = 165;
this.y = Math.random() *
(this.game.height * 0.95
- this.height);
this.image = document
.getElementById('angler2');
this.frameY = Math.floor
(Math.random() * 2);
this.lives = 6;
this.score = this.lives;
this.type = 'angler2';
}
}
class LuckyFish extends Enemy {
constructor(game) {
super(game);
this.width = 99;
this.height = 95;
this.y = Math.random() *
(this.game.height * 0.95
- this.height);
this.image = document
.getElementById('lucky');
this.frameY = Math.floor
(Math.random() * 2);
this.lives = 5;
this.score = 15;
this.type = 'lucky';
}
}
class HiveWhale extends Enemy {
constructor(game) {
super(game);
this.width = 400;
this.height = 227;
this.y = Math.random() *
(this.game.height * 0.95
- this.height);
this.image = document
.getElementById('hivewhale');
this.frameY = 0;
this.lives = 20;
this.score = this.lives;
this.type = 'hive';
this.speedX = Math.random()
* -1.2 - 0.2;
}
}
class Drone extends Enemy {
constructor(game, x, y) {
super(game);
this.width = 115;
this.height = 95;
this.x = x;
this.y = y;
this.image = document
.getElementById('drone');
this.frameY = Math.floor
(Math.random() * 2);
this.lives = 3;
this.score = this.lives;
this.type = 'drone';
this.speedX = Math.random()
* -4.2 - 0.5;
}
}
class Layer {
constructor(game, image,
speedModifier) {
this.game = game;
this.image = image;
this.speedModifier
= speedModifier;
this.width = 1768;
this.height = 500;
this.x = 0;
this.y = 0;
}
update() {
if (this.x <= -this.width)
this.x = 0;
this.x -= this.game.speed *
this.speedModifier;
}
draw(context) {
context.drawImage(this.image,
this.x, this.y);
context.drawImage(this.image,
this.x + this.width, this.y);
}
}
class Background {
constructor(game) {
this.game = game;
this.image1 = document
.getElementById('layer1');
this.image2 = document
.getElementById('layer2');
this.image3 = document
.getElementById('layer3');
this.image4 = document
.getElementById('layer4');
this.layer1 = new Layer
(this.game, this.image1,
0.2);
this.layer2 = new Layer
(this.game, this.image2,
0.4);
this.layer3 = new Layer
(this.game, this.image3,
1);
this.layer4 = new Layer
(this.game, this.image4,
1.5);
this.layers = [this.layer1,
this.layer2, this.layer3];
}
update() {
this.layers.forEach(layer
=> layer.update());
}
draw(context) {
this.layers.forEach(layer
=> layer.draw(context));
}
}
class Explosion {
constructor(game, x, y) {
this.game = game;
this.x = x;
this.y = y;
this.frameX = 0;
this.spriteHeight = 200;
this.fps = 30;
this.timer = 0;
this.interval = 1000
/ this.fps;
this.markedforDeletion
= false;
this.maxFrame = 8;
}
update(deltaTime) {
this.x -= this.game.speed;
if (this.timer >
this.interval) {
this.frameX++;
this.timer = 0;
}
else {
this.timer += deltaTime;
}
if (this.frameX >
this.maxFrame)
this.markedforDeletion
= true;
}
draw(context) {
context.drawImage(this.image,
this.frameX * this
.spriteWidth,
0, this.spriteWidth,
this.spriteHeight, this.x,
this.y, this.width,
this.height);
}
}
class SmokeExplosion extends
Explosion {
constructor(game, x, y) {
super(game, x, y);
this.image = document
.getElementById
('smokeExplosion');
this.spriteWidth = 200;
this.width = this
.spriteWidth;
this.height = this
.spriteHeight;
this.x = x - this.width
* 0.5;
this.y = y - this.height
* 0.5;
}
}
class FireExplosion extends
Explosion {
constructor(game, x, y) {
super(game, x, y);
this.image = document
.getElementById
('fireExplosion');
this.spriteWidth = 200;
this.width = this
.spriteWidth;
this.height = this
.spriteHeight;
this.x = x - this.width
* 0.5;
this.y = y - this.height
* 0.5;
}
}
//User Interface
class UI {
constructor(game) {
this.game = game;
this.fontsize = 25;
this.fontfamily = 'Bangers';
this.color = 'white';
}
draw(context) {
context.save();
context.fillStyle =
this.color;
context.shadowOffestX = 2;
context.shadowOffsetY = 2;
context.shadowColor = 'black'
context.font = this.fontsize
+ 'px' + this.fontfamily;
//score
context.fillText('Score: '
+ this.game.score, 20, 70);
// timer
const formattedTime = (this
.game.gameTime * 0.001)
.toFixed(1);
context.fillText('Timer:
' +
formattedTime, 20, 170);
//game over Messages
if (this.game.gameOver) {
context.textAlign =
'center';
let message1;
let message2;
if (this.game.score >
this.game.winningScore)
{
message1 =
'You Survived!';
message2 =
'Well Done'
'Survivor!';
}
else {
message1 =
'You were Destroyed!'
;
message2 =
'Repair and Try'
'Again!';
}
context.font = '100px'
+ this.fontfamily;
context.fillText
(message1,
this.game.width * 0.5,
this.game.height * 0.5);
context.font = '50px'
+ this.fontfamily;
context.fillText
(message2,
this.game.width * 0.5,
this.game.height * 0.65);
}
//ammo
if (this.game.player.powerUp)
context.fillStyle = '#ffffbd'
for (let i = 0; i < this
.game .ammo; i++) {
context.fillRect(20 +
5 * i, 90, 3, 20);
}
context.restore();
}
}
//brain of the project
class Game {
constructor(width, height) {
this.width = width;
this.height = height;
this.background = new
Background(this);
this.player = new
Player(this);
this.input = new
InputHandler(this);
this.ui = new UI
(this);
this.keys = [];
this.enemies = [];
this.particles = [];
this.explosions = [];
this.enemyTimer = 0;
this.enemyInterval = 2000;
this.ammo = 20;
this.maxAmmo = 50;
this.ammoTimer = 0;
this.ammoInterval = 350;
this.gameOver = false;
this.score = 0;
this.winningScore = 300;
this.gameTime = 0;
this.timeLimit = 100000;
this.speed = 1;
this.debug = false;
}
update(deltaTime) {
if (!this.gameOver) this
.gameTime += deltaTime;
if (this.gameTime >
this.timeLimit) this
.gameOver = true;
this.background.update();
this.background.layer4
.update();
this.player.update
(deltaTime);
if (this.ammoTimer >
this.ammoInterval) {
if (this.ammo <
this.maxAmmo)
this.ammo++;
this.ammoTimer = 0;
}
else {
this.ammoTimer
+= deltaTime;
}
this.particles.forEach
(particle => particle
.update());
this.particles = this
.particles.filter
(particle =>
!particle
.markedforDeletion);
this.explosions.forEach
(explosion => explosion
.update(deltaTime));
this.explosions =
this.explosions.filter
(explosion => !explosion
.markedforDeletion);
this.enemies.forEach(enemy
=> {
enemy.update();
if (this.checkCollision
(this.player, enemy)) {
enemy.marked
forDeletion = true;
this.addExplosion
(enemy);
for (let i = 0; i <
enemy.score;
i++) {
this.particles
.push(new
particle(this,
enemy.x +
enemy.width
* 0.5, enemy.y
+ enemy.height
* 0.5));
}
if (enemy.type ===
'lucky') this.player
.enterPowerUp();
else if (!this
.gameOver)
this.score--;
}
this.player.projectiles
.forEach(projectile
=> {
if (this
.checkCollision
(projectile, enemy))
{
enemy.lives--;
projectile
.markedfor
Deletion = true;
this.particles
.push(new
particle(this,
enemy.x + enemy
.width * 0.5,
enemy.y + enemy
.height * 0.5));
if (enemy.lives
<= 0) {
for (let i
= 0; i
< enemy
.score; i++)
{
this
.parti
cles
.push
(new
part
icle
(this,
enemy.x
+
enemy
.width
* 0.5,
enemy.y
+
enemy
.height
* 0.5));
}
enemy
.markedfor
Deletion
= true;
this.add
Explosion
(enemy);
if (enemy
.type
===
'hive') {
for
(let i
= 0;
i < 5;
i++) {
this
.enemies
.push
(new
Drone
(this,
enemy.x
+ Math
.random
() *
enemy
.width,
enemy.y
+ Math
.random
()
* enemy
.height
* 0.5)
);
}
}
if (!this
.gameOver)
this.score
+=
enemy.score;
}
}
})
})
this.enemies = this.enemies
.filter(enemy => !enemy
.markedforDeletion);
if (this.enemyTimer > this
.enemyInterval && !this
.gameOver) {
this.addEnemy();
this.enemyTimer = 0;
}
else {
this.enemyTimer
+= deltaTime;
}
}
draw(context) {
this.background.draw
(context);
this.ui.draw(context);
this.player.draw(context);
this.particles.forEach
(particle => particle
.draw(context));
this.enemies
.forEach(enemy => {
enemy.draw(context);
});
this.explosions.forEach
(explosion => {
explosion.draw
(context);
});
this.background.layer4
.draw(context);
}
addEnemy() {
const randomize =
Math.random();
if (randomize < 0.3) this
.enemies.push(new
Angler1(this));
else if (randomize < 0.6)
this.enemies.push(new
Angler2(this));
else if (randomize < 0.7)
this.enemies.push(new
HiveWhale(this));
else this.enemies.push(new
LuckyFish(this));
}
addExplosion(enemy) {
const randomize = Math
.random();
if (randomize < 0.5) {this
.explosions.push(new
SmokeExplosion(this,
enemy.x + enemy.width
* 0.5, enemy.y + enemy
.height * 0.5));}
else {this.explosions.push
(new FireExplosion(this
, enemy.x + enemy.width
* 0.5, enemy.y + enemy
.height * 0.5));}
}
checkCollision(rect1, rect2) {
return (rect1.x < rect2.x +
rect2.width &&
rect1.x + rect1.width >
rect2.x &&
rect1.y < rect2.y +
rect2.height &&
rect1.height + rect1.y >
rect2.y)
}
}
const game = new Game(canvas.width,
canvas.height);
let lastTime = 0;
//animation loop
function animate(timeStamp) {
const deltaTime = timeStamp -
lastTime;
lastTime = timeStamp;
ctx.clearRect(0, 0, canvas.width,
canvas.height);
game.draw(ctx);
game.update(deltaTime);
requestAnimationFrame(animate);
}
animate(0);
});
*{
margin:0;
padding: 0;
box-sizing: border-box;
background-color: #181818;
}
#canvas1 {
border: 5px solid #181818;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #4d79bc;
max-width: 100%;
max-height: 100%;
font-family: 'Bangers', cursive;
}
#layer1, #layer2, #layer3, #layer4,
#player, #angler1, #angler2, #lucky,
#projectile, #gears, #hivewhale,
#drone, #smokeExplosion,
#fireExplosion {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-
scale=1.0">
<title>Steampunk Game
<link rel="preconnect"
href=
"https://fonts.googleapis.com">
<link rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin>
<link
href="https://fonts.googleapis.com
/css2?family=Bangers&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="style.css">
</head>
<body>
<canvas id="canvas1">
<!-- characters -->
<img id="player" src="./Assets
/player.png">
<img id="angler1" src="./Assets
/angler1.png">
<img id="angler2" src="./Assets
/angler2.png">
<img id="lucky" src="./Assets
/lucky.png">
<img id="hivewhale"
src="./Assets/hivewhale.png">
<img id="drone" src="./Assets
/drone.png">
<!-- props -->
<img id="projectile"
src="./Assets/projectile.png">
<img id="gears" src="./Assets
/gears.png">
<img id="smokeExplosion"
src="./animations
/smokeExplosion.png">
<img id="fireExplosion"
src="./animations
/fireExplosion.png">
<!-- environment -->
<img id="layer1" src="./Assets
/layer1.png">
<img id="layer2" src="./Assets
/layer2.png">
<img id="layer3" src="./Assets
/layer3.png">
<img id="layer4" src="./Assets
/layer4.png">
<script src="script.js">
</body>
</html>
This section mainly focuses on all the different design projects I have worked on during my college
and also during my internships and freelancing work.The work page mainly have projects from various
different design fields
like Graphic Design, Animation, UI and UX Design, and System Design(IOT Concepts).
interested to see some more? Visit my work page
 Digital Skills III _ICA1_A001_Om Prabhu.png)
I have learnt a lot of software from softwares used to create presentation like Canva to 3D Game engines like Unity 3D.
I am mainly interested in Game Development and I use Unity 3D and javascript to create 2D, 3D games and VR environments. I use Figma for creating App prototypes.
I am also into developing websites using coding languages such as HTML CSS and Javascript or React Library. You can check out my work page to see projects.
Om Prabhu
C1: 501, Gokul CHS, Nerul