Created
November 18, 2023 10:11
-
-
Save becausedead/e28911378400c5ce0209ff03101f9924 to your computer and use it in GitHub Desktop.
Flappy Ball
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Flappy Bird</title> | |
| <style> | |
| canvas { | |
| border: 1px solid #000; | |
| display: block; | |
| margin: 20px auto; | |
| background-color: #00FF00; /* Yeşil arka plan */ | |
| } | |
| #gameOver { | |
| display: none; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 40px; | |
| font-weight: bold; | |
| color: #FFFFFF; /* Beyaz renk */ | |
| text-align: center; | |
| } | |
| #tryAgain { | |
| display: none; | |
| position: absolute; | |
| top: 60%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 20px; | |
| font-weight: bold; | |
| color: #FFFFFF; /* Beyaz renk */ | |
| text-align: center; | |
| animation: blink 1s infinite; /* Yanıp sönme animasyonu */ | |
| } | |
| #tryAgainButton { | |
| display: none; | |
| position: absolute; | |
| top: 70%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| padding: 10px 20px; | |
| font-size: 20px; | |
| font-weight: bold; | |
| color: #FFFFFF; /* Beyaz renk */ | |
| background-color: #0000FF; /* Mavi arkaplan */ | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| outline: none; | |
| } | |
| @keyframes blink { | |
| 0%, 49%, 100% { | |
| opacity: 0; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="flappyBirdCanvas" width="480" height="320"></canvas> | |
| <div id="gameOver">Game Over<br>Score: <span id="finalScore"></span></div> | |
| <div id="tryAgain">Tekrar Dene</div> | |
| <button id="tryAgainButton" onclick="restartGame()">Tekrar Dene</button> | |
| <script> | |
| const canvas = document.getElementById("flappyBirdCanvas"); | |
| const ctx = canvas.getContext("2d"); | |
| // Yeni karakter resmi | |
| const characterImage = new Image(); | |
| characterImage.src = "https://i.ibb.co/zmpDxDq/png.png"; // Yeni karakter resmi | |
| // Kuşun başlangıç konumu ve boyutu | |
| let birdX = 50; | |
| let birdY = canvas.height / 2 - 15; | |
| const birdRadius = 15; | |
| // Yerçekimi ve zıplama kuvveti | |
| let gravity = 1; | |
| let jumpForce = 0; // Zıplama kuvvetini sıfıra çektik | |
| let jumpHeight = 10; // Zıplama yüksekliği | |
| // Boruların başlangıç konumu, boyutu ve hızı | |
| let pipes = []; | |
| pipes.push({ x: canvas.width, height: generatePipeHeight() }); | |
| let pipeWidth = 50; | |
| let pipeGap = 150; | |
| let pipeSpeed = 5; | |
| // Skor | |
| let score = 0; | |
| // Oyun durumu | |
| let isGameOver = false; | |
| function generatePipeHeight() { | |
| return Math.floor(Math.random() * (canvas.height - 200)) + 50; | |
| } | |
| function drawBird() { | |
| ctx.drawImage(characterImage, birdX - birdRadius, birdY - birdRadius, birdRadius * 2, birdRadius * 2); | |
| } | |
| function drawPipe(pipe) { | |
| ctx.fillStyle = "#FFFFFF"; // Beyaz renk | |
| ctx.fillRect(pipe.x, 0, pipeWidth, pipe.height); | |
| ctx.fillRect(pipe.x, pipe.height + pipeGap, pipeWidth, canvas.height - pipe.height - pipeGap); | |
| } | |
| function drawScore() { | |
| ctx.font = "20px Arial"; | |
| ctx.fillStyle = "#000"; | |
| ctx.fillText("Score: " + score, 20, 30); | |
| } | |
| function draw() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // Oyun bittiğinde | |
| if (isGameOver) { | |
| document.getElementById("gameOver").style.display = "block"; | |
| document.getElementById("tryAgain").style.display = "block"; | |
| document.getElementById("tryAgainButton").style.display = "block"; | |
| document.getElementById("finalScore").innerText = score; | |
| return; | |
| } | |
| // Boşluk tuşuna basılınca kuşun uçması | |
| document.addEventListener("keydown", function (event) { | |
| if (event.code === "Space" && birdY > birdRadius) { | |
| jumpForce = -jumpHeight - gravity; // Yerçekimi de ekleniyor | |
| } | |
| }); | |
| // Kuşun çizimi | |
| drawBird(); | |
| // Boruların çizimi | |
| for (let i = 0; i < pipes.length; i++) { | |
| drawPipe(pipes[i]); | |
| pipes[i].x -= pipeSpeed; | |
| } | |
| // Skorun çizimi | |
| drawScore(); | |
| // Yerçekimi uygulanması ve zıplama işlemi | |
| birdY += gravity; | |
| // Boşluk tuşuna basıldığında zıplama işlemi | |
| if (jumpForce !== 0) { | |
| birdY += jumpForce; | |
| jumpForce += 0.5; | |
| } | |
| // Yer çekimini artırma | |
| gravity += 0.05; | |
| // Boruların sınırlarının kontrolü | |
| if (pipes[0].x + pipeWidth < 0) { | |
| pipes.shift(); | |
| pipes.push({ x: canvas.width, height: generatePipeHeight() }); | |
| score++; | |
| } | |
| // Çarpışma kontrolü | |
| for (let i = 0; i < pipes.length; i++) { | |
| if ( | |
| birdX + birdRadius > pipes[i].x && | |
| birdX - birdRadius < pipes[i].x + pipeWidth && | |
| (birdY - birdRadius < pipes[i].height || birdY + birdRadius > pipes[i].height + pipeGap) | |
| ) { | |
| isGameOver = true; | |
| break; | |
| } | |
| } | |
| requestAnimationFrame(draw); | |
| } | |
| function restartGame() { | |
| isGameOver = false; | |
| document.getElementById("gameOver").style.display = "none"; | |
| document.getElementById("tryAgain").style.display = "none"; | |
| document.getElementById("tryAgainButton").style.display = "none"; | |
| birdY = canvas.height / 2 - 15; | |
| pipes = []; | |
| pipes.push({ x: canvas.width, height: generatePipeHeight() }); | |
| score = 0; | |
| gravity = 1; | |
| jumpForce = 0; | |
| draw(); | |
| } | |
| draw(); // Oyun döngüsünü başlat | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment