Untitled
unknown
plain_text
9 months ago
20 kB
9
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flappy Bird Game</title>
<style>
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
background: linear-gradient(to bottom, #87CEEB 0%, #98FB98 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
overflow: hidden;
}
html, body {
height: 100%;
}
.game-container {
position: relative;
width: 400px;
height: 600px;
background: linear-gradient(to bottom, #87CEEB 0%, #98FB98 70%, #90EE90 100%);
border: 3px solid #2F4F4F;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.bird {
position: absolute;
width: 55px;
height: 55px;
background: #D2691E;
border: 2px solid #8B4513;
border-radius: 50%;
left: 80px;
transition: transform 0.1s ease;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
/* Black hair */
.bird::before {
content: '';
position: absolute;
width: 45px;
height: 25px;
background: #1a1a1a;
border-radius: 50% 50% 30% 30%;
top: -15px;
left: 50%;
transform: translateX(-50%);
border: 1px solid #000;
}
/* Hair spikes */
.bird::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 12px solid #1a1a1a;
top: -20px;
left: 15px;
box-shadow: 10px 0 0 #1a1a1a, 20px 0 0 #1a1a1a;
}
/* Eyes */
.angry-eyes {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 12px;
}
.angry-eyes::before {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%;
left: 2px;
top: 2px;
box-shadow: 16px 0 0 #fff;
}
.angry-eyes::after {
content: '';
position: absolute;
width: 4px;
height: 4px;
background: #000;
border-radius: 50%;
left: 4px;
top: 4px;
box-shadow: 16px 0 0 #000;
}
/* Angry eyebrows */
.angry-brows {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 4px;
}
.angry-brows::before {
content: '';
position: absolute;
width: 10px;
height: 3px;
background: #8B4513;
transform: rotate(-20deg);
left: 2px;
}
.angry-brows::after {
content: '';
position: absolute;
width: 10px;
height: 3px;
background: #8B4513;
transform: rotate(20deg);
right: 2px;
}
/* Angry mouth */
.angry-mouth {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 8px;
border: 2px solid #8B4513;
border-top: none;
border-radius: 0 0 50% 50%;
background: #000;
}
/* Teeth */
.angry-teeth {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 4px;
background: #fff;
border-radius: 1px;
}
.angry-teeth::before {
content: '';
position: absolute;
width: 2px;
height: 4px;
background: #fff;
left: 2px;
box-shadow: 3px 0 0 #fff, 6px 0 0 #fff, 9px 0 0 #fff;
}
.bird-name {
position: absolute;
font-size: 10px;
font-weight: bold;
color: #FFD700;
text-shadow: 2px 2px 2px #000;
top: -25px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
z-index: 11;
pointer-events: none;
background: rgba(0,0,0,0.6);
padding: 2px 4px;
border-radius: 3px;
}
.pipe {
position: absolute;
width: 60px;
background: #228B22;
border: 2px solid #006400;
border-radius: 5px;
}
.pipe-top {
top: 0;
border-bottom: 8px solid #006400;
}
.pipe-bottom {
bottom: 0;
border-top: 8px solid #006400;
}
.score {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
z-index: 20;
}
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.8);
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
z-index: 30;
display: none;
}
.game-over h2 {
margin: 0 0 15px 0;
font-size: 28px;
color: #FF6B6B;
}
.game-over p {
margin: 10px 0;
font-size: 16px;
}
.restart-btn {
background: #4CAF50;
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
margin-top: 15px;
transition: background 0.3s ease;
}
.restart-btn:hover {
background: #45a049;
}
.instructions {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #fff;
text-align: center;
font-size: 14px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
z-index: 20;
}
.ground {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #8B4513;
border-top: 3px solid #A0522D;
}
.cloud {
position: absolute;
background: white;
border-radius: 50px;
opacity: 0.8;
}
.cloud::before,
.cloud::after {
content: '';
position: absolute;
background: white;
border-radius: 50px;
}
.cloud1 {
width: 50px;
height: 20px;
top: 80px;
left: 200px;
animation: float 8s infinite linear;
}
.cloud1::before {
width: 25px;
height: 25px;
top: -12px;
left: 10px;
}
.cloud1::after {
width: 30px;
height: 20px;
top: -8px;
right: 8px;
}
.cloud2 {
width: 40px;
height: 15px;
top: 120px;
left: 300px;
animation: float 10s infinite linear;
}
.cloud2::before {
width: 20px;
height: 20px;
top: -8px;
left: 8px;
}
.cloud2::after {
width: 25px;
height: 15px;
top: -5px;
right: 5px;
}
@keyframes float {
from { transform: translateX(0); }
to { transform: translateX(-500px); }
}
</style>
</head>
<body>
<div class="game-container" id="gameContainer">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="bird" id="bird">
<div class="bird-name">BangLipss><</div>
<div class="angry-brows"></div>
<div class="angry-eyes"></div>
<div class="angry-teeth"></div>
<div class="angry-mouth"></div>
</div>
<div class="score" id="score">Score: 0</div>
<div class="ground"></div>
<div class="instructions" id="instructions">
Click or press SPACE to flap!
</div>
<div class="game-over" id="gameOver">
<h2>Game Over!</h2>
<p style="color: #FF4444; font-weight: bold; font-size: 18px; margin: 15px 0;">MATI KAU TUNGGULAH KUGOCO KAU</p>
<p>Your Score: <span id="finalScore">0</span></p>
<p>Best Score: <span id="bestScore">0</span></p>
<button class="restart-btn" onclick="restartGame()">Play Again</button>
</div>
</div>
<script>
class FlappyBird {
constructor() {
this.gameContainer = document.getElementById('gameContainer');
this.bird = document.getElementById('bird');
this.scoreElement = document.getElementById('score');
this.gameOverElement = document.getElementById('gameOver');
this.instructionsElement = document.getElementById('instructions');
this.gameWidth = 400;
this.gameHeight = 600;
this.groundHeight = 50;
this.birdX = 80;
this.birdY = 250;
this.birdVelocity = 0;
this.gravity = 0.4;
this.jumpStrength = -7;
this.pipes = [];
this.pipeWidth = 60;
this.pipeGap = 200;
this.pipeSpeed = 1.5;
this.score = 0;
this.gameRunning = false;
this.gameStarted = false;
this.bestScore = localStorage.getItem('flappyBirdBest') || 0;
document.getElementById('bestScore').textContent = this.bestScore;
this.init();
}
init() {
this.bird.style.left = this.birdX + 'px';
this.bird.style.top = this.birdY + 'px';
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
e.preventDefault();
this.flap();
}
});
this.gameContainer.addEventListener('click', () => {
this.flap();
});
this.gameLoop();
}
flap() {
if (!this.gameStarted) {
this.startGame();
}
if (this.gameRunning) {
this.birdVelocity = this.jumpStrength;
this.bird.style.transform = 'rotate(-20deg)';
setTimeout(() => {
if (this.gameRunning) {
this.bird.style.transform = 'rotate(0deg)';
}
}, 150);
}
}
startGame() {
this.gameStarted = true;
this.gameRunning = true;
this.instructionsElement.style.display = 'none';
this.spawnPipe();
}
gameLoop() {
if (this.gameRunning) {
this.updateBird();
this.updatePipes();
this.checkCollisions();
this.updateScore();
}
requestAnimationFrame(() => this.gameLoop());
}
updateBird() {
this.birdVelocity += this.gravity;
this.birdY += this.birdVelocity;
// Rotation based on velocity
const rotation = Math.min(Math.max(this.birdVelocity * 3, -30), 90);
this.bird.style.transform = `rotate(${rotation}deg)`;
this.bird.style.top = this.birdY + 'px';
// Check ground and ceiling collision
if (this.birdY > this.gameHeight - this.groundHeight - 55 || this.birdY < 0) {
this.gameOver();
}
}
updatePipes() {
this.pipes.forEach((pipe, index) => {
pipe.x -= this.pipeSpeed;
pipe.topElement.style.left = pipe.x + 'px';
pipe.bottomElement.style.left = pipe.x + 'px';
// Remove pipes that are off screen
if (pipe.x < -this.pipeWidth) {
pipe.topElement.remove();
pipe.bottomElement.remove();
this.pipes.splice(index, 1);
}
});
// Spawn new pipes
if (this.pipes.length === 0 || this.pipes[this.pipes.length - 1].x < this.gameWidth - 250) {
this.spawnPipe();
}
}
spawnPipe() {
const gapY = Math.random() * (this.gameHeight - this.groundHeight - this.pipeGap - 100) + 50;
const topPipe = document.createElement('div');
topPipe.className = 'pipe pipe-top';
topPipe.style.left = this.gameWidth + 'px';
topPipe.style.height = gapY + 'px';
topPipe.style.width = this.pipeWidth + 'px';
const bottomPipe = document.createElement('div');
bottomPipe.className = 'pipe pipe-bottom';
bottomPipe.style.left = this.gameWidth + 'px';
bottomPipe.style.height = (this.gameHeight - this.groundHeight - gapY - this.pipeGap) + 'px';
bottomPipe.style.width = this.pipeWidth + 'px';
this.gameContainer.appendChild(topPipe);
this.gameContainer.appendChild(bottomPipe);
this.pipes.push({
x: this.gameWidth,
gapY: gapY,
topElement: topPipe,
bottomElement: bottomPipe,
scored: false
});
}
checkCollisions() {
const birdRect = {
x: this.birdX,
y: this.birdY,
width: 55,
height: 55
};
this.pipes.forEach(pipe => {
const pipeRect = {
x: pipe.x,
y: 0,
width: this.pipeWidth,
height: this.gameHeight
};
// Check collision with pipes
if (birdRect.x < pipeRect.x + pipeRect.width &&
birdRect.x + birdRect.width > pipeRect.x) {
if (birdRect.y < pipe.gapY ||
birdRect.y + birdRect.height > pipe.gapY + this.pipeGap) {
this.gameOver();
}
}
});
}
updateScore() {
this.pipes.forEach(pipe => {
if (!pipe.scored && pipe.x + this.pipeWidth < this.birdX) {
this.score++;
pipe.scored = true;
this.scoreElement.textContent = 'Score: ' + this.score;
}
});
}
gameOver() {
this.gameRunning = false;
this.bird.style.transform = 'rotate(90deg)';
// Update best score
if (this.score > this.bestScore) {
this.bestScore = this.score;
localStorage.setItem('flappyBirdBest', this.bestScore);
document.getElementById('bestScore').textContent = this.bestScore;
}
document.getElementById('finalScore').textContent = this.score;
this.gameOverElement.style.display = 'block';
}
restart() {
// Reset game state
this.birdY = 250;
this.birdVelocity = 0;
this.score = 0;
this.gameRunning = false;
this.gameStarted = false;
// Reset bird position and rotation
this.bird.style.top = this.birdY + 'px';
this.bird.style.transform = 'rotate(0deg)';
// Clear pipes
this.pipes.forEach(pipe => {
pipe.topElement.remove();
pipe.bottomElement.remove();
});
this.pipes = [];
// Reset UI
this.scoreElement.textContent = 'Score: 0';
this.gameOverElement.style.display = 'none';
this.instructionsElement.style.display = 'block';
}
}
let game = new FlappyBird();
function restartGame() {
game.restart();
}
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'98dae665374cfdc5',t:'MTc2MDMxNzIyNi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
Editor is loading...
Leave a Comment