快捷導(dǎo)航

基于JS實(shí)現(xiàn)Flappy?Bird游戲的示例代碼

更新時(shí)間：2022年04月25日 16:44:46 作者：海擁

Flappy?Bird是13年紅極一時(shí)的小游戲，即摁上鍵控制鳥(niǎo)的位置穿過(guò)管道間的縫隙。本文將用JS實(shí)現(xiàn)這一經(jīng)典的游戲，需要的可以參考一下

前言

Flappy Bird 是一款無(wú)盡的游戲，玩家可以控制一只鳥(niǎo)。玩家必須保護(hù)小鳥(niǎo)免于與管道等障礙物相撞。每次小鳥(niǎo)通過(guò)管道時(shí)，分?jǐn)?shù)都會(huì)增加一。當(dāng)小鳥(niǎo)與管道碰撞或因重力而墜落時(shí)，游戲結(jié)束。以下部分描述了構(gòu)建此游戲必須采取的步驟。

游戲可以通過(guò)這個(gè)鏈接進(jìn)入

完整源碼地址

實(shí)現(xiàn)代碼

HTML 部分：在此部分中，創(chuàng)建和加載游戲的元素。選擇背景、鳥(niǎo)類(lèi)、障礙和得分元素的圖像。接下來(lái)，我們創(chuàng)建并鏈接 style.css 和 index.js 文件。

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css" rel="external nofollow" >
</head>

<body>
	<div class="background"></div>
	<img class="bird" src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg" alt="bird-img">
	<div class="message">
    按 Enter 開(kāi)始游戲
	</div>
	<div class="score">
		<span class="score_title"></span>
		<span class="score_val"></span>
	</div>
    <script src="gfg.js"></script>
</body>

</html>

CSS 部分：在此部分中，根據(jù)需要修改游戲?qū)ο蟮拇笮?、位置和樣式?/p>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
}

.background {
    height: 100vh;
    width: 100vw;
    background-color: skyblue;
}

.bird {
    height: 100px;
    width: 160px;
    position: fixed;
    top: 40vh;
    left: 30vw;
    z-index: 100;
}

.pipe_sprite {
    position: fixed;
    top: 40vh;
    left: 100vw;
    height: 70vh;
    width: 6vw;
    background-color: green;
}

.message {
    position: fixed;
    z-index: 10;
    height: 10vh;
    font-size: 10vh;
    font-weight: 100;
    color: black;
    top: 12vh;
    left: 20vw;
    text-align: center;
}

.score {
    position: fixed;
    z-index: 10;
    height: 10vh;
    font-size: 10vh;
    font-weight: 100;
    color: goldenrod;
    top: 0;
    left: 0;
}

.score_val {
    color: gold;
}

JavaScript 部分：此部分包含控制游戲狀態(tài)和移動(dòng)對(duì)象的代碼部分。在本節(jié)中必須遵循以下步驟。

在 JavaScript 文件中獲取對(duì)鳥(niǎo)類(lèi)和背景圖像的引用。
為背景滾動(dòng)速度、小鳥(niǎo)的飛行速度和重力設(shè)置一些值。
創(chuàng)建無(wú)限滾動(dòng)背景?？梢詮拇随溄娱喿x執(zhí)行此操作的指南。
添加一個(gè)事件偵聽(tīng)器來(lái)偵聽(tīng)“enter”按鍵以將游戲狀態(tài)更改為播放狀態(tài)，并通過(guò)每幀從鳥(niǎo)的 y 坐標(biāo)減小重力值來(lái)將重力應(yīng)用于鳥(niǎo)。
在視圖寬度的末端生成障礙（管道），以便它們最初不可見(jiàn)，但隨著背景的移動(dòng)，將管道的 x 坐標(biāo)減小背景滾動(dòng)值，使其看起來(lái)像鳥(niǎo)在移動(dòng)。
應(yīng)用與地面和管道的碰撞，如果小鳥(niǎo)發(fā)生碰撞，則將游戲狀態(tài)更改為結(jié)束狀態(tài)并顯示一條消息以重新開(kāi)始游戲。
每次在管道之間成功導(dǎo)航后增加分?jǐn)?shù)值。

背景滾動(dòng)速度

let move_speed = 3;

重力常數(shù)值

let gravity = 0.5;

獲取 bird 元素的引用

let bird = document.querySelector('.bird');

獲取 bird 元素屬性

let bird_props = bird.getBoundingClientRect();

部分 js 代碼

let background =
    document.querySelector('.background')
    .getBoundingClientRect();

// 獲取對(duì) score 元素的引用
let score_val =
    document.querySelector('.score_val');
let message =
    document.querySelector('.message');
let score_title =
    document.querySelector('.score_title');

// 設(shè)置初始游戲狀態(tài)開(kāi)始
let game_state = 'Start';

// 為按鍵添加事件監(jiān)聽(tīng)器
document.addEventListener('keydown', (e) => {

// 按下回車(chē)鍵開(kāi)始游戲
if (e.key == 'Enter' &&
    game_state != 'Play') {
    document.querySelectorAll('.pipe_sprite')
            .forEach((e) => {
    e.remove();
    });
    bird.style.top = '40vh';
    game_state = 'Play';
    message.innerHTML = '';
    score_title.innerHTML = 'Score : ';
    score_val.innerHTML = '0';
    play();
}
});