JavaScript實現(xiàn)像素鳥小游戲的詳細流程
更新時間：2022年07月20日 16:41:08 作者：遐想
最近通過javascript這門語言,然后結(jié)合html的來寫一個簡單的小游戲 ,這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)像素鳥小游戲的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
《像素鳥》游戲簡單介紹
游戲中玩家必須控制一只小鳥，跨越由各種不同長度水管所組成的障礙，而這只鳥其實是根本不會飛的……所以玩家每點擊一下小鳥就會飛高一點，不點擊就會下降，玩家必須控制節(jié)奏，拿捏點擊屏幕的時間點，讓小鳥能在落下的瞬間跳起來，恰好能夠通過狹窄的水管縫隙，只要稍一分神，馬上就會失敗陣亡。
1.功能結(jié)構(gòu)及流程
包含功能 ：
1: 隨機背景
2: 進行游戲
3:玩家分數(shù)排行榜
2.游戲?qū)崿F(xiàn)效果展示
3.實現(xiàn)思路
- 創(chuàng)建游戲背景板和小鳥，并分別設(shè)置相對定位與絕對定位；
- 初始化背景圖的位置；
- 初始化小鳥的位置；
- 設(shè)置游戲狀態(tài)，游戲開始時背景和管道全部向左運動，游戲結(jié)束全部停止運動；
- 使小鳥飛行，其實就是背景圖在 X 軸方向的位置不斷減小，實現(xiàn)小鳥向右飛行效果；
- 設(shè)置點擊事件，每點擊一次小鳥在Y軸的位置減小，實現(xiàn)向上飛的效果；
- 創(chuàng)建管道，X 方向上管道和下管道位置相同，Y 方向上上管道和下管道高度隨機，但中間要空出200px；
- 實現(xiàn)管道向左運動，與背景圖向左操作類似，也是在 X 軸方向的位置不斷減小
- 管道向左運動移出游戲面板最左側(cè)時再回到原位重新執(zhí)行，實現(xiàn)循環(huán)效果
- 定義上下管道的臨界值，也就是上下管道自身區(qū)域
- 小鳥位置與上下管道位置重合(相碰撞)時游戲結(jié)束
代碼展示介紹
游戲界面代碼
不多介紹
<!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>Fancy Bird</title>
<link rel="stylesheet" href="./css/cscs.css" rel="external nofollow" >
<link rel="shortcut icon" href="./birds/birds1.png" rel="external nofollow" type="image/x-icon">
</head>
<body>
<div class="map">
<img src="./logo/flappyBird.png" alt="" class="flappyBird">
<div class="home">
<img src="./home/start.png" alt="" class="start">
<img src="./home/ranking.png" alt="" class="ranking">
</div>
<div class="ready">
<img src="./logo/getReody.png" alt="" class="getReody">
<img src="./home/go.png" alt="" class="go">
</div>
<div class="finish">
<img src="./logo/gameOver.png" alt="" class="gameOver">
<div class="score">
<i class="node">66</i>
<i class="now"></i>
<img src="./home/gold.png" alt="" class="gold">
</div>
<img src="./home/start.png" alt="" class="start2">
<img src="./home/ranking.png" alt="" class="ranking">
</div>
</div>
<script src="./js/jquery-2.2.0.min.js"></script>
<script src="./js/game.js"></script>
<script src="./js/init.js"></script>
</body>
</html>css樣式
不多介紹
* {
margin: 0;
padding: 0;
}
.map {
margin: 20px auto;
width: 520px;
height: 855px;
background: url(../mian/sky1.png);
position: relative;
overflow: hidden;
cursor: pointer;
text-align: left;
}
p {
position: absolute;
font-size: 30px;
}
h4 {
text-align: center;
line-height: 10px;
}
.play {
position: absolute;
width: 52px;
height: 45px;
left: -10%;
top: -10%;
background: url(../birds/birds1.png) center;
}
.pillarTop {
position: absolute;
width: 52px;
height: 420px;
background: url(../TheConduit/pipe2.png) center no-repeat;
left: 550px;
}
.pillarBottom {
position: absolute;
width: 52px;
height: 420px;
background: url(../TheConduit/pipe1.png) center no-repeat;
left: 550px;
bottom: 0;
}
.del {
position: absolute;
right: 10px;
top: 0;
font-size: 30px;
}
.flappyBird {
width: 300px;
position: absolute;
top: 204px;
left: 540px;
}
.home,
.ready {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
}
.home {
left: -50%;
}
.ready {
transform: translate(-50%, -50%);
display: none;
}
.ready .go {
margin-left: 29%;
}
.ready .getReody {
margin-left: 32px;
}
.gold {
position: absolute;
left: 30px;
top: -545px;
}
.finish {
width: 250px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
}
.score {
position: relative;
width: 231px;
height: 117px;
background: url(../home/finish.png);
margin-left: 9px;
z-index: 999;
}
.score .node {
position: absolute;
left: 175px;
top: 35px
}
.score .now {
position: absolute;
left: 175px;
top: 85px;
}js代碼
禁止頁面選擇以及鼠標右鍵
document.oncontextmenu = function () { return false; };
document.onselectstart = function () { return false; };隨機背景移動
這里我有兩張背景圖片，定義兩個隨機數(shù)，利用定時器使背景的x軸持續(xù)減少，然后形成背景移動；使用css的動畫一樣的效果，因人而異
// 背景移動
const map = document.querySelector('.map');
let mNum = getRandom(1, 2)
map.style.background = "url(./mian/sky" + mNum + ".png)"
let [Mbac, Pbac, y, angle, deg, flag, p, flagg] = [0, 1, 0, 0, -360, false, 0, true];
let [NO1, NO2, NO3, NO4, no5, chicken] = [null, null, null, null, null, null]
function init() {
NO1 = setInterval(creatorPillar, 1200);
NO5 = setTimeout(time, 2200);
NO2 = setInterval(judge, 1000 / 60);
}
function move() {
Mbac++;
map.style.backgroundPositionX = "-" + Mbac + "px";
}玩家控制像素鳥
定義一個定時器持續(xù)像素鳥y坐標減少，這樣就會慢慢下落，綁定鼠標彈起事件，點擊一次需要把像素鳥坐標增加
// 玩家
let play = document.createElement('div');
play.className = 'play';
map.append(play);
function a() {
Pbac++;
if (Pbac > 3) Pbac = 1;
play.style.background = " url(./birds/birds" + Pbac + ".png)";
};
function judge() {
if (flagg) {
y += 0.2
play.style.top = play.offsetTop + y + "px"
}
if (!flagg) {
y -= 4.5
play.style.top = play.offsetTop + y + "px"
let time = setTimeout(() => {
clearTimeout(time);
flagg = true;
}, 10);
}
if (play.offsetTop <= 50) {
play.style.top = 50 + "px";
}
if (play.offsetTop >= map.offsetHeight - play.offsetHeight) {
play.style.top = map.offsetHeight - play.offsetHeight + "px";
stop()
}
}
document.onmousedown = function () {
y = -5
}生成隨機柱子
我寫的是一個函數(shù) 然后定時器調(diào)用這個函數(shù)，然后生成兩個柱子
// 生成柱子
function creatorPillar() {
let pillarTop = document.createElement('div');
let pillarBottom = document.createElement('div');
let random = getRandom(100, 300) / 2
pillarTop.className = "pillarTop";
pillarBottom.className = "pillarBottom";
map.append(pillarTop);
map.append(pillarBottom);
pillarTop.style.top = -random + "px"
pillarBottom.style.bottom = -random + "px"
NO4 = setInterval(() => {
pillarTop.style.left = (pillarTop.offsetLeft -= 5) + "px"
pillarBottom.style.left = (pillarBottom.offsetLeft -= 5) + "px"
if (pillarTop.offsetLeft <= -100 && pillarBottom.offsetLeft <= -100) {
pillarTop.remove();
pillarBottom.remove();
}
if (pz(play, pillarTop)) {
stop();
siw()
}
if (pz(play, pillarBottom)) {
stop();
siw()
}
}, 20);
}積分增加
由于我很懶很懶很懶很懶，就用定時器做的增加，可以靠判斷來判斷像素鳥是否經(jīng)過了柱子，我沒寫不代表我不會寫奧，因人而異嘛
// 積分
function time() {
let P = document.createElement('p');
map.append(P);
NO3 = setInterval(() => {
p++;
P.innerHTML = p;
}, 1250);
}
function pz(node1, node2) {
let l1 = node1.offsetLeft;
let r1 = node1.offsetLeft + node1.offsetWidth;
let t1 = node1.offsetTop;
let b1 = node1.offsetTop + node1.offsetHeight;
let l2 = node2.offsetLeft;
let r2 = node2.offsetLeft + node2.offsetWidth;
let t2 = node2.offsetTop;
let b2 = node2.offsetTop + node2.offsetHeight;
if (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
return false;
} else {
return true;
}
}
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function stop() {
clearInterval(NO1);
clearInterval(NO2);
clearInterval(NO3);
clearInterval(NO4);
clearInterval(chicken);
die();
}
function die() {
document.onclick = null;
setInterval(() => {
deg += 7;
play.style.top = (play.offsetTop += 5) + "px";
play.style.transform = "rotateZ(" + deg + "deg)";
if (play.offsetTop <= 0) play.style.top = 0 + "px"
if (play.offsetTop >= map.offsetHeight - play.offsetHeight) {
// deg = 90;
play.style.top = map.offsetHeight - play.offsetHeight + "px"
}
}, 100);
data()
}代碼要自己先看懂哦！
總結(jié)
到此這篇關(guān)于JavaScript實現(xiàn)像素鳥小游戲的文章就介紹到這了,更多相關(guān)js像素鳥小游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
驗證控件與Button的OnClientClick事件詳細解析
以下就是被我已知忽略的問題和解決方案，當我發(fā)覺這個問題的時候，冒出了一身冷汗，幸虧做了嚴格的服務(wù)器端驗證，不然可就慘了2013-12-12
javascript中萬惡的function實例分析，學習js的朋友可以參考下。2011-05-05
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)常見彈出層效果 ，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
js檢測客戶端不是firefox則提示下載...2007-04-04
javascript獲取設(shè)置div的高度和寬度兼容任何瀏覽器
Javascript如何獲取和設(shè)置div的高度和寬度，并且兼容任何瀏覽器，感興趣的朋友不妨看看下面的代碼或許有意想不到的收獲2013-09-09
這篇文章主要介紹當輸入框輸入數(shù)值的時候使用js去除所有的空格和禁止輸入空格的方法,需要的朋友可以參考下2014-06-06
今天小編就為大家分享一篇使用Layui搭建后臺管理界面的操作方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Javascript中的事件對象其實和.NET中繼承自EventArgs類的派生類類似，用來給事件處理程序傳遞狀態(tài)信息，從而進行相應(yīng)的操作。這一篇文章將講述Javascript事件對象中和實現(xiàn)拖拽功能相關(guān)的幾個屬性，并在最后將IE事件模型和標準DOM事件模型的差異封裝到一個類中，從而適應(yīng)所有的瀏覽器。2008-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)購物車的基本功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
js 截取或者替換字符串中的數(shù)字實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 截取或者替換字符串中的數(shù)字實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06