Calculator Tools Calculator Tools
Create

Big Fish Eat Small Fish Game

Sep 14, 2023

About this app

A fun game where the player controls a big fish to eat smaller fish.

Big Fish Eat Small Fish Game 🐟 Big Fish Eat Small Fish 🐠 Score: 0

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Big Fish Eat Small Fish Game</title>
<meta name="description" content="A fun game where the player controls a big fish to eat smaller fish.">
<meta name="keywords" content="game, fish, fun, big fish, small fish">

<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

<script type="text/javascript">
try {
let playerFish, smallFish, score, playerSpeed, fishSpeed;

function startGame() {
playerFish = new component(30, 30, "blue", 10, 120);
smallFish = [];
for (let i = 0; i < 10; i++) {
let x = Math.random() * 400;
let y = Math.random() * 400;
smallFish.push(new component(10, 10, "red", x, y));
}
score = 0;
playerSpeed = 2;
fishSpeed = 1;
gameArea.start();
}

let gameArea = {
canvas: document.createElement("canvas"),
start: function () {
this.canvas.width = 480;
this.canvas.height = 480;
this.context = this.canvas.getContext("2d");
document.getElementById("main-container").appendChild(this.canvas);
this.interval = setInterval(updateGameArea, 20);
},
clear: function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function () {
let ctx = gameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function () {
this.x += this.speedX;
this.y += this.speedY;
}
this.crashWith = function (otherobj) {
let myleft = this.x;
let myright = this.x + (this.width);
let mytop = this.y;
let mybottom = this.y + (this.height);
let otherleft = otherobj.x;
let otherright = otherobj.x + (otherobj.width);
let othertop = otherobj.y;
let otherbottom = otherobj.y + (otherobj.height);
let crash = true;
if ((mybottom < othertop) ||
(mytop > otherbottom) ||
(myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;
}
}

function updateGameArea() {
for (let i = 0; i < smallFish.length; i++) {
if (playerFish.crashWith(smallFish[i])) {
score++;
smallFish.splice(i, 1);
let x = Math.random() * 400;
let y = Math.random() * 400;
smallFish.push(new component(10, 10, "red", x, y));
}
}
gameArea.clear();
playerFish.speedX = 0;
playerFish.speedY = 0;
if (gameArea.keys && gameArea.keys[37]) { playerFish.speedX = -playerSpeed; }
if (gameArea.keys && gameArea.keys[39]) { playerFish.speedX = playerSpeed; }
if (gameArea.keys && gameArea.keys[38]) { playerFish.speedY = -playerSpeed; }
if (gameArea.keys && gameArea.keys[40]) { playerFish.speedY = playerSpeed; }
playerFish.newPos();
playerFish.update();
for (let i = 0; i < smallFish.length; i++) {
smallFish[i].x += fishSpeed;
smallFish[i].y += fishSpeed;
smallFish[i].newPos();
smallFish[i].update();
}
document.getElementById("score").innerHTML = "Score: " + score;
}

window.addEventListener('keydown', function (e) {
gameArea.keys = (gameArea.keys || []);
gameArea.keys[e.keyCode] = true;
})
window.addEventListener('keyup', function (e) {
gameArea.keys[e.keyCode] = false;
})

// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
startGame();
});

} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>

<style>
body {
font-family: 'Press Start 2P', cursive;
background-color: #add8e6;
text-align: center;
}
#main-container {
max-width: 480px;
margin: 0 auto;
}
canvas {
width: 100%;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>🐟 Big Fish Eat Small Fish 🐠</h1>
<p id="score">Score: 0</p>
</div>
</body>
</html>