html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>FlappyBeeAlz</title>
</head>
<body>
<div class="overlay" id="loaderOverlay">
<center><h1 id="head" style='color:yellow;'>Spring Special</h1></center>
<img id="loaderImg" src="https://i.ibb.co/WvL1n6dg/pngtree-happy-bee-on-honeycomb-vibrant-and-sweet-cartoon-png-image-13481329.png" alt="Happy bee image" />
<div id="loader">🐝</div>
</div>
<div id="menuPage" class="overlay">
<button id="startButton" class="btn">Start Game</button>
<button id="infoButton" class="btn" onclick='alert("How to play:-\n\ntap on the screen to let the bee fly and dodge the obstacle(wood pipes), collect honey to get higher score!\n\nfun fact: The Bee slides on the sand")'>Info</button>
</div>
<button id="infoButton2" onclick='alert("How to play:-\n\ntap on the screen to let the bee fly and dodge the obstacle(wood pipes), collect honey to get higher score!\n\nfun fact: The Bee slides on the sand")'>?</button>
<div id="restartPage" class="overlay">
<div>Game Over!</div>
<button id="restartButton" class="btn">Restart</button>
</div>
<canvas id="gameCanvas" width="400" height="600"></canvas>
</body>
</html>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
margin: 0;
background: #70c5ce;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
flex-direction: column;
transition: background-color 2s;
}
h1 {
font-family: Arial, sans-serif;
color: #fff;
margin: 20px;
font-size: 36px;
}
canvas {
background: #87ceeb;
border: 10px solid #000;
width: 100%;
max-width: 400px;
display: none;
}
.overlay {
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload = () => {
const loaderOverlay = document.getElementById('loaderOverlay');
const menuPage = document.getElementById('menuPage');
const restartPage = document.getElementById('restartPage');
const startButton = document.getElementById('startButton');
const restartButton = document.getElementById('restartButton');
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const W = 400, H = 600;
const pipeW = 60, gap = 250, spacing = 300;
let isGameOver = false;
let score = 0;
const cloudImg = new Image();
cloudImg.src = 'https://i.ibb.co/QFJGkqw9/white-cloud-clipart-design-illustration-free-png.png';
const bee = {
x: 100, y: 300, w: 40, h: 40,
velocity: 0, gravity: 0.3, lift: -6,
img: new Image()
};
bee.img.src = 'https://i.ibb.co/LzFtfmj5/1744797103945.png';
const clouds = [
{ x: 50, y: 80, speed: 0.3 },
{ x: 200, y: 50, speed: 0.2 },
BROWSER
Console
Run