<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flappy Meme Cat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
margin: 0;
overflow: hidden;
background: linear-gradient(#87ceeb, #ffffff);
font-family: Arial, sans-serif;
text-align: center;
}
canvas {
display: block;
margin: auto;
background: transparent;
}
#info {
position: fixed;
top: 10px;
width: 100%;
color: #000;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="info">Tap / Click / Space to Flap 😺</div>
<canvas id="game"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let gravity = 0.5;
let lift = -9;
let gameOver = false;
let score = 0;
const cat = {
x: canvas.width * 0.25,
y: canvas.height / 2,
r: 22,
velocity: 0,
flap() {
this.velocity = lift;
},
update() {
this.velocity += gravity;
this.y += this.velocity;
if (this.y + this.r > canvas.height || this.y - this.r < 0) {
gameOver = true;
}
},
draw() {
ctx.save();
ctx.translate(this.x, this.y);
// Cat face
ctx.fillStyle = "#ffcc99";
ctx.beginPath();
ctx.arc(0, 0, this.r, 0, Math.PI * 2);
ctx.fill();
// Eyes
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.arc(-6, -5, 3, 0, Math.PI * 2);
ctx.arc(6, -5, 3, 0, Math.PI * 2);
ctx.fill();
// Mouth
ctx.strokeStyle = "#000";
ctx.beginPath();
ctx.arc(0, 5, 6, 0, Math.PI);
ctx.stroke();
ctx.restore();
}
};
const pipes = [];
const gap = 160;
const pipeWidth = 60;
function addPipe() {
const topHeight = Math.random() * (canvas.height - gap - 200) + 50;
pipes.push({
x: canvas.width,
top: topHeight,
bottom: canvas.height - topHeight - gap,
passed: false
});
}
function drawPipes() {
ctx.fillStyle = "#2ecc71";
pipes.forEach(p => {
ctx.fillRect(p.x, 0, pipeWidth, p.top);
ctx.fillRect(p.x, canvas.height - p.bottom, pipeWidth, p.bottom);
});
}
function updatePipes() {
pipes.forEach(p => {
p.x -= 3;
// Collision
if (
cat.x + cat.r > p.x &&
cat.x - cat.r < p.x + pipeWidth &&
(cat.y - cat.r < p.top ||
cat.y + cat.r > canvas.height - p.bottom)
) {
gameOver = true;
}
// Score
if (!p.passed && p.x + pipeWidth < cat.x) {
score++;
p.passed = true;
}
});
if (pipes.length && pipes[0].x + pipeWidth < 0) {
pipes.shift();
}
}
function drawScore() {
ctx.fillStyle = "#000";
ctx.font = "bold 30px Arial";
ctx.fillText("Score: " + score, 20, 40);
}
function drawGameOver() {
ctx.fillStyle = "rgba(0,0,0,0.7)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#fff";
ctx.font = "bold 40px Arial";
ctx.fillText("Game Over 😿", canvas.width / 2 - 120, canvas.height / 2 - 20);
ctx.font = "20px Arial";
ctx.fillText("Tap to Restart", canvas.width / 2 - 80, canvas.height / 2 + 30);
}
function resetGame() {
gameOver = false;
score = 0;
pipes.length = 0;
cat.y = canvas.height / 2;
cat.velocity = 0;
}
let frame = 0;
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (!gameOver) {
cat.update();
cat.draw();
if (frame % 90 === 0) addPipe();
updatePipes();
drawPipes();
drawScore();
frame++;
} else {
drawGameOver();
}
requestAnimationFrame(loop);
}
loop();
// Controls
function flapAction() {
if (gameOver) {
resetGame();
} else {
cat.flap();
}
}
document.addEventListener("click", flapAction);
document.addEventListener("touchstart", flapAction);
document.addEventListener("keydown", e => {
if (e.code === "Space") flapAction();
});
window.addEventListener("resize", () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
</script>
</body>
</html>
Comments
Post a Comment