APK FET
Flappy Neon: The Ultimate High-Octane Arcade Challenge
Take to the digital skies in Flappy Neon, a high-fidelity, cyberpunk-inspired reimagining of the classic arcade bird game. Designed with a stunning "Neon Noir" aesthetic, this game blends addictive retro mechanics with modern visual flair and smooth-as-silk performance.
🚀 Experience the Cyber-Flap
Navigate your neon-charged bird through an endless corridor of glowing obstacles. This isn't just a simple tap game—it’s a test of precision, timing, and nerves. As you dive through the vibrant cityscape, the stakes get higher and the glows get brighter.
✨ Key Game Features:
Cyberpunk Visuals: Immerse yourself in a dark arcade atmosphere featuring deep purples, electric blues, and hot pink neon glows.
Fluid Physics & Animation: Experience weighted gravity and dynamic rotation that makes every "flap" feel responsive and professional.
Particle Effect System: Every jump triggers a burst of neon energy, leaving a trail of digital dust as you soar.
Parallax Starfield: A multi-layered background provides a sense of speed and depth as you race past the digital horizon.
Personal Leaderboard: Track your progress with a built-in High Score system that saves your best runs locally.
🕹️ How to Play:
Launch: Tap the Start button to enter the grid.
Maneuver: Press Space, Arrow Up, or Tap the screen to defy gravity.
Survive: Thread the needle between the neon pipes. One collision means "Crashed!"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Flappy Neon Arcade</title>
<style>
:root {
--neon-blue: #00f3ff;
--neon-pink: #ff00ff;
--neon-purple: #bc13fe;
--bg-dark: #050505;
}
* {
box-sizing: border-box;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
padding: 0;
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
overflow: hidden;
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
#game-wrapper {
position: relative;
width: 100%;
max-width: 400px;
height: 100%;
max-height: 700px;
border: 4px solid #111;
border-radius: 12px;
box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
overflow: hidden;
background: var(--bg-dark);
}
canvas {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #050505 0%, #0a0a1a 100%);
}
/* UI Overlays */
.overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
z-index: 10;
text-align: center;
padding: 20px;
backdrop-filter: blur(4px);
}
h1 {
color: var(--neon-blue);
font-size: 2.5rem;
margin: 0 0 10px 0;
text-shadow: 0 0 10px var(--neon-blue);
letter-spacing: 4px;
}
.score-display {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
color: #fff;
font-size: 3rem;
font-weight: 900;
z-index: 5;
text-shadow: 0 0 10px var(--neon-pink);
pointer-events: none;
}
.btn-start {
padding: 15px 40px;
font-size: 1.2rem;
background: transparent;
color: var(--neon-pink);
border: 2px solid var(--neon-pink);
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
margin-top: 20px;
}
.btn-start:hover {
background: var(--neon-pink);
color: #000;
box-shadow: 0 0 20px var(--neon-pink);
}
.hidden { display: none !important; }
#high-score {
color: #aaa;
margin-top: 10px;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div id="game-wrapper">
<div id="score" class="score-display">0</div>
<!-- Start Screen -->
<div id="start-screen" class="overlay">
<h1>FLAPPY NEON</h1>
<p style="color: #666;">Tap or Space to Jump</p>
<button class="btn-start" id="btn-play">START</button>
<div id="high-score">BEST: 0</div>
</div>
<!-- Game Over Screen -->
<div id="game-over-screen" class="overlay hidden">
<h1 style="color: var(--neon-pink); text-shadow: 0 0 10px var(--neon-pink);">CRASHED</h1>
<p id="final-score" style="color: #fff; font-size: 1.5rem;">SCORE: 0</p>
<button class="btn-start" id="btn-restart">RETRY</button>
</div>
<canvas id="gameCanvas"></canvas>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreEl = document.getElementById('score');
const startScreen = document.getElementById('start-screen');
const gameOverScreen = document.getElementById('game-over-screen');
const finalScoreEl = document.getElementById('final-score');
const bestEl = document.getElementById('high-score');
// Game Configuration
const GRAVITY = 0.25;
const JUMP = -4.8;
const PIPE_SPEED = 2.5;
const PIPE_SPACING = 180;
const PIPE_WIDTH = 60;
const PIPE_GAP = 160;
let bird, pipes, particles, animationId, score, gameActive, bestScore;
bestScore = localStorage.getItem('flappyNeonBest') || 0;
bestEl.innerText = `BEST: ${bestScore}`;
function resize() {
const rect = canvas.parentNode.getBoundingClientRect();
canvas.width = rect.width;
canvas.height = rect.height;
}
window.addEventListener('resize', resize);
resize();
class Bird {
constructor() {
this.x = 50;
this.y = canvas.height / 2;
this.velocity = 0;
this.radius = 14;
this.rotation = 0;
}
draw() {
ctx.save();
ctx.translate(this.x, this.y);
this.rotation = Math.min(Math.PI / 4, Math.max(-Math.PI / 4, this.velocity * 0.1));
ctx.rotate(this.rotation);
// Glow
ctx.shadowBlur = 15;
ctx.shadowColor = '#00f3ff';
// Bird Body (Neon Triangle)
ctx.fillStyle = '#00f3ff';
ctx.beginPath();
ctx.moveTo(15, 0);
ctx.lineTo(-10, -10);
ctx.lineTo(-10, 10);
ctx.closePath();
ctx.fill();
// Wing
ctx.strokeStyle = '#fff';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(-5, 0);
ctx.lineTo(-15, Math.sin(Date.now() * 0.01) * 8);
ctx.stroke();
ctx.restore();
}
update() {
this.velocity += GRAVITY;
this.y += this.velocity;
// Particle Trail
if (Math.random() > 0.5) {
particles.push(new Particle(this.x - 10, this.y, '#00f3ff'));
}
if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
endGame();
}
}
flap() {
this.velocity = JUMP;
for(let i=0; i<5; i++) {
particles.push(new Particle(this.x, this.y, '#bc13fe'));
}
}
}
class Pipe {
constructor(x) {
this.x = x;
this.topHeight = Math.random() * (canvas.height - PIPE_GAP - 100) + 50;
this.passed = false;
}
draw() {
ctx.shadowBlur = 10;
ctx.shadowColor = '#ff00ff';
ctx.strokeStyle = '#ff00ff';
ctx.lineWidth = 3;
// Top Pipe
ctx.strokeRect(this.x, 0, PIPE_WIDTH, this.topHeight);
// Bottom Pipe
ctx.strokeRect(this.x, this.topHeight + PIPE_GAP, PIPE_WIDTH, canvas.height);
// Accents
ctx.fillStyle = 'rgba(255, 0, 255, 0.1)';
ctx.fillRect(this.x, 0, PIPE_WIDTH, this.topHeight);
ctx.fillRect(this.x, this.topHeight + PIPE_GAP, PIPE_WIDTH, canvas.height);
}
update() {
this.x -= PIPE_SPEED;
}
}
class Particle {
constructor(x, y, color) {
this.x = x;
this.y = y;
this.color = color;
this.size = Math.random() * 3 + 1;
this.speedX = Math.random() * -2 - 1;
this.speedY = (Math.random() - 0.5) * 2;
this.alpha = 1;
}
draw() {
ctx.globalAlpha = this.alpha;
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size);
ctx.globalAlpha = 1;
}
update() {
this.x += this.speedX;
this.y += this.speedY;
this.alpha -= 0.02;
}
}
function init() {
bird = new Bird();
pipes = [new Pipe(canvas.width + 50)];
particles = [];
score = 0;
scoreEl.innerText = score;
gameActive = true;
startScreen.classList.add('hidden');
gameOverScreen.classList.add('hidden');
animate();
}
function endGame() {
gameActive = false;
cancelAnimationFrame(animationId);
if (score > bestScore) {
bestScore = score;
localStorage.setItem('flappyNeonBest', bestScore);
bestEl.innerText = `BEST: ${bestScore}`;
}
finalScoreEl.innerText = `SCORE: ${score}`;
gameOverScreen.classList.remove('hidden');
}
function animate() {
if (!gameActive) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Background Parallax Stars
ctx.fillStyle = '#fff';
for(let i=0; i<20; i++) {
let x = (Math.sin(i + Date.now() * 0.0001) * canvas.width + canvas.width) % canvas.width;
let y = (i * 50) % canvas.height;
ctx.globalAlpha = 0.2;
ctx.fillRect(x, y, 2, 2);
}
ctx.globalAlpha = 1;
// Pipes
if (pipes[pipes.length - 1].x < canvas.width - PIPE_SPACING) {
pipes.push(new Pipe(canvas.width));
}
for (let i = pipes.length - 1; i >= 0; i--) {
pipes[i].draw();
pipes[i].update();
// Collision Detection
if (
bird.x + bird.radius > pipes[i].x &&
bird.x - bird.radius < pipes[i].x + PIPE_WIDTH &&
(bird.y - bird.radius < pipes[i].topHeight || bird.y + bird.radius > pipes[i].topHeight + PIPE_GAP)
) {
endGame();
}
// Scoring
if (!pipes[i].passed && pipes[i].x + PIPE_WIDTH < bird.x) {
pipes[i].passed = true;
score++;
scoreEl.innerText = score;
}
if (pipes[i].x < -PIPE_WIDTH) pipes.splice(i, 1);
}
// Particles
for (let i = particles.length - 1; i >= 0; i--) {
particles[i].draw();
particles[i].update();
if (particles[i].alpha <= 0) particles.splice(i, 1);
}
bird.draw();
bird.update();
animationId = requestAnimationFrame(animate);
}
// Input Handling
const handleInput = () => {
if (gameActive) {
bird.flap();
}
};
window.addEventListener('keydown', (e) => {
if (e.code === 'Space' || e.code === 'ArrowUp') handleInput();
});
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
handleInput();
});
canvas.addEventListener('mousedown', handleInput);
document.getElementById('btn-play').onclick = init;
document.getElementById('btn-restart').onclick = init;
// Initial View
ctx.fillStyle = '#0a0a1a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>