Welcome to my Website!
This is a paragraph! Here's how you make a link: Neocities.
Here's how you can make bold and italic text.
Here's how you can add an image:
Here's how to make a list:
- First thing
- Second thing
- Third thing
Flappy Cloudy * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #87CEEB; overflow: hidden; font-family: sans-serif; } canvas { display: block; margin: auto; background: #fff; } #score { position: absolute; top: 20px; left: 20px; font-size: 24px; color: white; font-weight: bold; }
0
const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); let frames = 0; let score = 0; const GRAVITY = 0.25; const FLAP = -4.6; const bird = { x: 50, y: 150, radius: 12, velocity: 0, draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = "pink"; ctx.fill(); }, flap() { this.velocity = FLAP; }, update() { this.velocity += GRAVITY; this.y += this.velocity; } }; const pipes = []; const pipeWidth = 50; const pipeGap = 100; function drawPipes() { ctx.fillStyle = "green"; pipes.forEach(pipe => { ctx.fillRect(pipe.x, 0, pipeWidth, pipe.top); ctx.fillRect(pipe.x, pipe.top + pipeGap, pipeWidth, canvas.height); }); } function updatePipes() { if (frames % 100 === 0) { const top = Math.random() * (canvas.height / 2); pipes.push({ x: canvas.width, top }); } pipes.forEach(pipe => pipe.x -= 2); pipes.forEach(pipe => { if (pipe.x + pipeWidth === bird.x) { score++; document.getElementById("score").innerText = score; } }); } function detectCollision() { for (let pipe of pipes) { if (bird.x + bird.radius > pipe.x && bird.x - bird.radius < pipe.x + pipeWidth) { if (bird.y - bird.radius < pipe.top || bird.y + bird.radius > pipe.top + pipeGap) { return true; } } } if (bird.y + bird.radius >= canvas.height) return true; return false; } function loop() { frames++; ctx.clearRect(0, 0, canvas.width, canvas.height); bird.update(); bird.draw(); updatePipes(); drawPipes(); if (detectCollision()) return alert("Game Over! Your score: " + score); requestAnimationFrame(loop); } document.addEventListener("keydown", e => { if (e.code === "Space") bird.flap(); }); loop();
To learn more HTML/CSS, check out these tutorials!