Fire Bird Game Script and Assets
PROMPT: Create an HTML5 endless runner game with improved graphics, smooth textures, a loading screen, and a play button enhance this game by adding actual image assets and sound effects.
iframe with center tag:
<center><iframe src="https://yourwebsite.com/wp-content/uploads/fire_Bird/fire_Bird.html" width="1000px" height="600px" frameborder="0">
</iframe></center>Steps to install the script in WordPress Website:
- Extract the script from fire_bird.zip
- Upload the fire_bird folder in Your Website>Public_Html> Wp-content> Uploads
- Replace yourwebsite.com in the iframe src to your domain name
Fire Bird Game Script and Assets:
Fire Bird Game Script: Download Here
Fire Bird Assets: Download Here
If you’re having problem opening the script. Copy the script from here:
<!DOCTYPE html>
<html>
<head>
<title>Endless Runner</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
}
#gameContainer {
position: relative;
width: 100vw;
height: 100vh;
}
#gameCanvas {
display: block;
background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
}
#loadingScreen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #222;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
z-index: 10;
}
#loadingBar {
width: 300px;
height: 20px;
background: #444;
margin: 20px 0;
border-radius: 10px;
overflow: hidden;
}
#loadingProgress {
height: 100%;
width: 0%;
background: linear-gradient(to right, #FF5722, #FF9800);
transition: width 0.3s;
}
#playButton {
padding: 15px 40px;
font-size: 24px;
background: linear-gradient(to right, #4CAF50, #8BC34A);
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.2s, box-shadow 0.2s;
display: none;
}
#playButton:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
#scoreDisplay {
position: absolute;
top: 20px;
right: 20px;
color: white;
font-size: 24px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
z-index: 5;
}
#gameOver {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
font-size: 36px;
z-index: 5;
}
#finalScore {
font-size: 24px;
margin: 20px 0;
}
#restartButton {
padding: 15px 40px;
font-size: 20px;
background: linear-gradient(to right, #2196F3, #03A9F4);
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
#restartButton:hover {
background: linear-gradient(to right, #1976D2, #0288D1);
}
</style>
</head>
<body>
<div id="gameContainer">
<canvas id="gameCanvas"></canvas>
<div id="scoreDisplay">Score: 0</div>
<div id="loadingScreen">
<h1>FIRE BIRD</h1>
<div id="loadingBar">
<div id="loadingProgress"></div>
</div>
<button id="playButton">PLAY NOW</button>
</div>
<div id="gameOver">
<h1>GAME OVER</h1>
<div id="finalScore">Score: 0</div>
<button id="restartButton">PLAY AGAIN</button>
</div>
</div>
<script>
// Game variables
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const loadingScreen = document.getElementById('loadingScreen');
const loadingProgress = document.getElementById('loadingProgress');
const playButton = document.getElementById('playButton');
const scoreDisplay = document.getElementById('scoreDisplay');
const gameOverDiv = document.getElementById('gameOver');
const finalScore = document.getElementById('finalScore');
const restartButton = document.getElementById('restartButton');
// Set canvas size
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Game state
let gameRunning = false;
let score = 0;
let speed = 5;
let obstacles = [];
let coins = [];
let lastObstacleTime = 0;
let lastCoinTime = 0;
let animationId;
let loadedAssets = 0;
let totalAssets = 0;
// Player
const player = {
x: 100,
y: canvas.height / 2,
width: 60,
height: 100,
speedY: 0,
gravity: 0.5,
jumpForce: -12,
isJumping: false,
lane: 1, // 0: left, 1: center, 2: right
lanePositions: [
canvas.width * 0.25,
canvas.width * 0.5,
canvas.width * 0.75
]
};
// Game assets
const assets = {
playerRun: [],
playerJump: null,
obstacle1: null,
obstacle2: null,
coin: null,
background: null,
ground: null,
trees: []
};
// Asset paths
const assetPaths = {
playerRun: [
'https://tslearn.shop/wp-content/uploads/2025/05/bird1.png',
'https://tslearn.shop/wp-content/uploads/2025/05/bird1.png',
'https://tslearn.shop/wp-content/uploads/2025/05/bird1.png'
],
playerJump: 'https://tslearn.shop/wp-content/uploads/2025/05/bird2.png',
obstacle1: 'https://tslearn.shop/wp-content/uploads/2025/05/obstacle.png',
obstacle2: 'https://tslearn.shop/wp-content/uploads/2025/05/fire2.png',
coin: 'https://tslearn.shop/wp-content/uploads/2025/05/coin.png',
background: 'https://tslearn.shop/wp-content/uploads/2025/05/bakcground2.png',
ground: 'https://tslearn.shop/wp-content/uploads/2025/05/ground1.png',
trees: [
'https://tslearn.shop/wp-content/uploads/2025/05/Tree.png',
'https://tslearn.shop/wp-content/uploads/2025/05/tree2.png'
]
};
// Count total assets to load
totalAssets = assetPaths.playerRun.length + 5 + assetPaths.trees.length;
// Load assets
function loadAssets() {
// Load player run animation frames
assetPaths.playerRun.forEach((src, index) => {
const img = new Image();
img.src = src;
img.onload = () => {
assets.playerRun[index] = img;
assetLoaded();
};
img.onerror = () => {
console.error(`Error loading image: ${src}`);
assetLoaded();
};
});
// Load player jump image
const jumpImg = new Image();
jumpImg.src = assetPaths.playerJump;
jumpImg.onload = () => {
assets.playerJump = jumpImg;
assetLoaded();
};
jumpImg.onerror = () => {
console.error(`Error loading image: ${assetPaths.playerJump}`);
assetLoaded();
};
// Load obstacles
const obstacle1Img = new Image();
obstacle1Img.src = assetPaths.obstacle1;
obstacle1Img.onload = () => {
assets.obstacle1 = obstacle1Img;
assetLoaded();
};
obstacle1Img.onerror = () => {
console.error(`Error loading image: ${assetPaths.obstacle1}`);
assetLoaded();
};
const obstacle2Img = new Image();
obstacle2Img.src = assetPaths.obstacle2;
obstacle2Img.onload = () => {
assets.obstacle2 = obstacle2Img;
assetLoaded();
};
obstacle2Img.onerror = () => {
console.error(`Error loading image: ${assetPaths.obstacle2}`);
assetLoaded();
};
// Load coin
const coinImg = new Image();
coinImg.src = assetPaths.coin;
coinImg.onload = () => {
assets.coin = coinImg;
assetLoaded();
};
coinImg.onerror = () => {
console.error(`Error loading image: ${assetPaths.coin}`);
assetLoaded();
};
// Load background
const bgImg = new Image();
bgImg.src = assetPaths.background;
bgImg.onload = () => {
assets.background = bgImg;
assetLoaded();
};
bgImg.onerror = () => {
console.error(`Error loading image: ${assetPaths.background}`);
assetLoaded();
};
// Load ground
const groundImg = new Image();
groundImg.src = assetPaths.ground;
groundImg.onload = () => {
assets.ground = groundImg;
assetLoaded();
};
groundImg.onerror = () => {
console.error(`Error loading image: ${assetPaths.ground}`);
assetLoaded();
};
// Load trees
assetPaths.trees.forEach((src, index) => {
const img = new Image();
img.src = src;
img.onload = () => {
assets.trees[index] = img;
assetLoaded();
};
img.onerror = () => {
console.error(`Error loading image: ${src}`);
assetLoaded();
};
});
}
// Track loaded assets
function assetLoaded() {
loadedAssets++;
const progress = Math.floor((loadedAssets / totalAssets) * 100);
loadingProgress.style.width = `${progress}%`;
if (loadedAssets === totalAssets) {
loadingComplete();
}
}
// Loading complete
function loadingComplete() {
setTimeout(() => {
loadingProgress.style.width = '100%';
playButton.style.display = 'block';
}, 500);
}
// Start game
function startGame() {
loadingScreen.style.display = 'none';
gameRunning = true;
score = 0;
speed = 5;
obstacles = [];
coins = [];
player.y = canvas.height / 2;
player.speedY = 0;
player.isJumping = false;
player.lane = 1;
lastObstacleTime = Date.now();
lastCoinTime = Date.now();
// Event listeners
window.addEventListener('keydown', handleKeyDown);
window.addEventListener('touchstart', handleTouch);
// Start game loop
gameLoop();
}
// Game loop
function gameLoop() {
if (!gameRunning) return;
update();
draw();
animationId = requestAnimationFrame(gameLoop);
}
// Update game state
function update() {
// Update score
score++;
scoreDisplay.textContent = `Score: ${score}`;
// Increase speed over time
if (score % 500 === 0) {
speed += 0.5;
}
// Update player position
if (player.isJumping) {
player.speedY += player.gravity;
player.y += player.speedY;
// Check if player landed
if (player.y > canvas.height / 2) {
player.y = canvas.height / 2;
player.isJumping = false;
player.speedY = 0;
}
}
// Spawn obstacles
if (Date.now() - lastObstacleTime > 1500 - (speed * 50)) {
spawnObstacle();
lastObstacleTime = Date.now();
}
// Spawn coins
if (Date.now() - lastCoinTime > 1000) {
spawnCoin();
lastCoinTime = Date.now();
}
// Update obstacles
for (let i = obstacles.length - 1; i >= 0; i--) {
obstacles[i].x -= speed;
// Check collision with player
if (checkCollision(player, obstacles[i])) {
gameOver();
return;
}
// Remove if off screen
if (obstacles[i].x + obstacles[i].width < 0) {
obstacles.splice(i, 1);
}
}
// Update coins
for (let i = coins.length - 1; i >= 0; i--) {
coins[i].x -= speed;
// Check collision with player
if (checkCollision(player, coins[i])) {
score += 100;
coins.splice(i, 1);
continue;
}
// Remove if off screen
if (coins[i].x + coins[i].width < 0) {
coins.splice(i, 1);
}
}
}
// Draw game
function draw() {
// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background
if (assets.background) {
// Draw parallax background
const bgX = -(score % canvas.width);
ctx.drawImage(assets.background, bgX, 0, canvas.width, canvas.height);
ctx.drawImage(assets.background, bgX + canvas.width, 0, canvas.width, canvas.height);
} else {
// Fallback if background not loaded
ctx.fillStyle = '#87CEEB';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// Draw trees (parallax)
if (assets.trees.length > 0) {
const treeX = -(score % (canvas.width * 2)) / 2;
for (let i = 0; i < 3; i++) {
ctx.drawImage(assets.trees[i % assets.trees.length],
treeX + (i * canvas.width),
canvas.height - 200,
300, 200);
}
}
// Draw ground
if (assets.ground) {
const groundX = -(score % 100);
for (let i = 0; i < Math.ceil(canvas.width / 100) + 1; i++) {
ctx.drawImage(assets.ground, groundX + (i * 100), canvas.height - 50, 100, 50);
}
} else {
// Fallback if ground not loaded
ctx.fillStyle = '#8BC34A';
ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
}
// Draw player
if (player.isJumping && assets.playerJump) {
ctx.drawImage(assets.playerJump,
player.lanePositions[player.lane] - player.width / 2,
player.y - player.height,
player.width, player.height);
} else if (assets.playerRun.length > 0) {
const frame = Math.floor(score / 5) % assets.playerRun.length;
ctx.drawImage(assets.playerRun[frame],
player.lanePositions[player.lane] - player.width / 2,
player.y - player.height,
player.width, player.height);
} else {
// Fallback if player images not loaded
ctx.fillStyle = '#FF5722';
ctx.fillRect(player.lanePositions[player.lane] - player.width / 2,
player.y - player.height,
player.width, player.height);
}
// Draw obstacles
obstacles.forEach(obstacle => {
if (obstacle.type === 1 && assets.obstacle1) {
ctx.drawImage(assets.obstacle1, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
} else if (obstacle.type === 2 && assets.obstacle2) {
ctx.drawImage(assets.obstacle2, obstacle.x, obstacle.y, obstacle.width, obstacle.height);
} else {
// Fallback if obstacle images not loaded
ctx.fillStyle = '#795548';
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
}
});
// Draw coins
coins.forEach(coin => {
if (assets.coin) {
ctx.drawImage(assets.coin, coin.x, coin.y, coin.width, coin.height);
} else {
// Fallback if coin image not loaded
ctx.fillStyle = '#FFD700';
ctx.beginPath();
ctx.arc(coin.x + coin.width / 2, coin.y + coin.height / 2, coin.width / 2, 0, Math.PI * 2);
ctx.fill();
}
});
}
// Spawn obstacle
function spawnObstacle() {
const type = Math.random() > 0.5 ? 1 : 2;
const lane = Math.floor(Math.random() * 3);
obstacles.push({
x: canvas.width,
y: canvas.height / 2 - (type === 1 ? 30 : 10),
width: type === 1 ? 60 : 80,
height: type === 1 ? 60 : 20,
type: type,
lane: lane
});
}
// Spawn coin
function spawnCoin() {
const lane = Math.floor(Math.random() * 3);
coins.push({
x: canvas.width,
y: canvas.height / 2 - 100,
width: 30,
height: 30,
lane: lane
});
}
// Check collision
function checkCollision(player, object) {
// Check if in same lane
if (player.lane !== object.lane) return false;
// Simple AABB collision detection
return player.lanePositions[player.lane] - player.width / 2 < object.x + object.width &&
player.lanePositions[player.lane] + player.width / 2 > object.x &&
player.y < object.y + object.height &&
player.y > object.y;
}
// Handle keyboard input
function handleKeyDown(e) {
if (!gameRunning) return;
switch(e.key) {
case 'ArrowLeft':
player.lane = Math.max(0, player.lane - 1);
break;
case 'ArrowRight':
player.lane = Math.min(2, player.lane + 1);
break;
case 'ArrowUp':
case ' ':
if (!player.isJumping) {
player.isJumping = true;
player.speedY = player.jumpForce;
}
break;
}
}
// Handle touch input (for mobile)
function handleTouch(e) {
if (!gameRunning) return;
const touchX = e.touches[0].clientX;
const touchY = e.touches[0].clientY;
// Left side of screen - move left
if (touchX < canvas.width / 3) {
player.lane = Math.max(0, player.lane - 1);
}
// Right side of screen - move right
else if (touchX > canvas.width * 2/3) {
player.lane = Math.min(2, player.lane + 1);
}
// Middle of screen - jump
else {
if (!player.isJumping) {
player.isJumping = true;
player.speedY = player.jumpForce;
}
}
}
// Game over
function gameOver() {
gameRunning = false;
cancelAnimationFrame(animationId);
finalScore.textContent = `Score: ${score}`;
gameOverDiv.style.display = 'flex';
}
// Restart game
function restartGame() {
gameOverDiv.style.display = 'none';
startGame();
}
// Event listeners
playButton.addEventListener('click', startGame);
restartButton.addEventListener('click', restartGame);
// Handle window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
player.y = canvas.height / 2;
player.lanePositions = [
canvas.width * 0.25,
canvas.width * 0.5,
canvas.width * 0.75
];
});
// Start loading assets
loadAssets();
</script>
</body>
</html>