Javascript, HTML, CSS Code
<html> <head> <script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Flappy Bird</title> <meta name="description" content="Play Flappy Bird"> <meta name="keywords" content="flappy bird, game"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Built-In Functions for Apps --> <script type="text/javascript"> var localStoragePrefix = "flappy-bird"; var lastSave = 0; // save to localstorage function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } // save to cookie let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } // load from localstorage function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } // Flappy Bird Game var score = 0; var gravity = 0.6; var jump = -15; var bird; var pipes = []; var gameover = false; function setup() { var canvas = createCanvas(400, 600); canvas.parent('main-container'); bird = new Bird(); pipes.push(new Pipe()); } function draw() { background(135, 206, 235); /* Changed background color to light blue */ /* Draw Sun */ fill(255, 255, 0); /* Yellow */ ellipse(width - 50, 50, 100, 100); /* Draw Grass */ fill(0, 128, 0); /* Green */ rect(0, height - 20, width, 20); if (!gameover) { for (var i = pipes.length - 1; i >= 0; i--) { pipes[i].update(); pipes[i].show(); if (pipes[i].hits(bird) || bird.y < 0 || bird.y > height) { gameover = true; } if (pipes[i].offscreen()) { pipes.splice(i, 1); } if (pipes[i].pass(bird)) { score++; } } bird.update(); bird.show(); if (frameCount % 100 == 0) { pipes.push(new Pipe()); } } else { textSize(32); fill(255); text("Game Over", width / 2 - 80, height / 2 - 50); text("Score: " + score, width / 2 - 60, height / 2); text("Click to Restart", width / 2 - 120, height / 2 + 50); } fill(255); textSize(24); text("Score: " + score, 10, 30); /* Draw Running Text */ textSize(16); fill(0); /* Black */ text("A little bird is exploring a foreign country", width - 230, height / 2 - 100); } function keyPressed() { if (key === ' ' && gameover) { restartGame(); } else if (key === ' ') { bird.up(); } } function restartGame() { score = 0; bird = new Bird(); pipes = []; pipes.push(new Pipe()); gameover = false; } function Bird() { this.x = 64; this.y = height / 2; this.velocity = 0; this.lift = jump; this.show = function() { fill(148, 0, 211); /* Purple */ ellipse(this.x, this.y, 32, 32); } this.update = function() { this.velocity += gravity; this.velocity *= 0.9; this.y += this.velocity; if (this.y > height) { this.y = height; this.velocity = 0; } if (this.y < 0) { this.y = 0; this.velocity = 0; } } this.up = function() { this.velocity += this.lift; } } function Pipe() { this.top = random(height / 2); this.bottom = random(height / 2); this.x = width; this.w = 20; this.speed = 2; this.highlight = false; this.show = function() { fill(0); /* Black */ if (this.highlight) { fill(255, 0, 0); } rect(this.x, 0, this.w, this.top); rect(this.x, height - this.bottom, this.w, this.bottom); } this.update = function() { this.x -= this.speed; } this.offscreen = function() { if (this.x < -this.w) { return true; } else { return false; } } this.hits = function(bird) { if (bird.x > this.x && bird.x < this.x + this.w) { if (bird.y < this.top || bird.y > height - this.bottom) { this.highlight = true; return true; } } this.highlight = false; return false; } this.pass = function(bird) { if (bird.x > this.x && bird.x < this.x + this.w && !this.highlight) { return true; } return false; } } </script> <style> body { background-color: #87CEEB; margin: 0; padding: 0; font-family: Arial, sans-serif; } canvas { display: block; margin: 0 auto; } h1 { font-family: 'Times New Roman', Times, serif; color: #333; text-align: center; margin-top: 50px; } .restart-button { display: block; width: 100px; margin: 0 auto; text-align: center; background-color: #333; color: #fff; padding: 10px 20px; border-radius: 5px; text-decoration: none; margin-top: 30px; } .restart-button:hover { background-color: #555; } .controls { position: absolute; bottom: 10px; right: 10px; font-size: 14px; color: #333; } .game-window { color: black; font-family: 'Arial Black', Gadget, sans-serif; } </style> <link rel="canonical" href="https://calculator.tools/prompt/3068/"> <meta charset="utf-8"> </head> <body> <div id="main-container" class="container"> <h1>Flappy Bird</h1> <a href="#" class="restart-button" onclick="restartGame()">Restart</a> <canvas></canvas> <div class="controls">Press SPACE to jump</div> </div> <script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script> <script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script> </body> </html>
Flappy Bird
Calculator Tools