HTML과 JavaScript를 사용한 Flappy Bird 게임

5211 단어 programmingwebdevjavascripthtml
CodeWithRandom 블로그에 오신 것을 환영합니다. 이 블로그에서는 간단한 Flappy Bird 게임을 만드는 방법을 배웁니다. 우리는 이 Flappy Bird 게임 소스 코드에 HTML, Css 및 JavaScript🤩를 사용합니다.

Flappy Bird 게임 코드의 기본 HTML 구조부터 시작하겠습니다.

HTML 코드 Flappy Bird 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Flappy Bird Game</title>
    </head>
    <body>
        <h3>flappyBird Game</h3>
        <div class="random">
            <canvas id="canvas" width="288" height="512"></canvas>
        </div>
        <script src="flappyBird.js"></script>
    </body>
</html>


Flappy Bird 게임 코드에 대한 모든 HTML 코드 및 Css 코드가 있습니다. 이제 Css와 JavaScript 없이 출력을 볼 수 있습니다🤩. 이것은 Flappy Bird 게임 코드에 대한 HTML 코딩 출력일 뿐입니다. 그런 다음 Flappy Bird 게임 코드에 대한 Css 및 JavaScript를 작성합니다🔥.

Flappy Bird 게임 코드 출력

CSS 코드 Flappy Bird 게임 코드

.random {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
h3 {
    text-align: center;
    font-size: 2rem;
}


Css 업데이트된 출력 Flappy Bird 게임 코드



자바스크립트 코드 Flappy Bird 게임 코드

"use strict";

var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");

// load images
var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeNorth = new Image();
var pipeSouth = new Image();

bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeNorth.src = "images/pipeNorth.png";
pipeSouth.src = "images/pipeSouth.png";

// some variables
var gap = 85;
var constant;
var bX = 10;
var bY = 150;
var gravity = 1.5;
var score = 0;

// audio files
var fly = new Audio();
var scor = new Audio();

fly.src = "sounds/fly.mp3";
scor.src = "sounds/score.mp3";

// on key down
document.addEventListener("keydown", moveUp);

function moveUp() {
  bY -= 25;

  fly.play();
}

// pipe coordinates
var pipe = [];

pipe[0] = {
  x: cvs.width,

  y: 0,
};

// draw images
function draw() {
  ctx.drawImage(bg, 0, 0);

  for (var i = 0; i < pipe.length; i++) {
    constant = pipeNorth.height + gap;

    ctx.drawImage(pipeNorth, pipe[i].x, pipe[i].y);
    ctx.drawImage(pipeSouth, pipe[i].x, pipe[i].y + constant);

    pipe[i].x--;

    if (pipe[i].x == 125) {
      pipe.push({
        x: cvs.width,
        y: Math.floor(Math.random() * pipeNorth.height) - pipeNorth.height,
      });
    }

    // detect collision
    if (
      (bX + bird.width >= pipe[i].x &&
        bX <= pipe[i].x + pipeNorth.width &&
        (bY <= pipe[i].y + pipeNorth.height ||
          bY + bird.height >= pipe[i].y + constant)) ||
      bY + bird.height >= cvs.height - fg.height
    ) {
      location.reload(); // reload the page
    }

    if (pipe[i].x == 5) {
      score++;
      scor.play();
    }
  }

  ctx.drawImage(fg, 0, cvs.height - fg.height);
  ctx.drawImage(bird, bX, bY);

  bY += gravity;
  ctx.fillStyle = "#000";
  ctx.font = "20px Verdana";
  ctx.fillText("Score : " + score, 10, cvs.height - 20);
  requestAnimationFrame(draw);
}

draw();


최종 출력 Flappy Bird 게임 코드



이제 Flappy Bird Game에 대한 자바스크립트 코드를 완성했습니다. 다음은 자바스크립트로 업데이트된 출력입니다. Flappy Bird 게임 코드가 마음에 드시기 바랍니다. 출력 비디오 및 프로젝트 스크린샷을 볼 수 있습니다.

다른 블로그를 참조하고 프런트 엔드 개발에 대한 지식을 얻으십시오.

고맙습니다 !

이 게시물에서는 간단한 HTML 및 CSS와 javascript를 사용하여 Flappy Bird 게임 코드를 만드는 방법을 배웁니다. 저희가 실수를 했거나 혼동을 드린 경우 댓글을 달아 답장을 보내거나 쉽게 배울 수 있도록 도와주세요.

작성자 – CodeWithRandom/Anki

일부 관련 주제 -

flappy-bird-game-code-flappy-bird-game-using-html-css-javascript

simple-javascript-carousel-how-to-create-a-carousel-using-css-js

countdown-timer-html-css

profile-id-card-design-html-css
【Laravel 쿼리 빌더】join으로 내부 결합해, 결합처의 데이터를 취득하는 방법
프론트엔드 기술 향상을 위한 무료 웹사이트 - Damn_coder

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage