<！DOCTYPE HTML>
<HTML LANG = "EN">
<HEAD>
<メタ文字コード= "UTF-8">
<タイトル>ドキュメント</ TITLE>
<スタイルタイプ= "テキスト/ cssの">
* {
マージン：0;
パディング：0;
}
#fbWrap {
幅：350px;
高さ：480PX。
背景：URL（ "IMG / bg.jpg"）;
背景サイズ：100％100％。
位置：相対;
オーバーフロー：隠されました;
マージン：0自動;
}
#head {
位置：絶対。
左：は50px;
}
背景：URL（ "IMG / bird0.png"）。
位置：絶対;
右：0;
トップ：20ピクセル;
幅：40ピクセル;
高さ：26px;
背景サイズ：100％100％。
}
#scoring {
位置：絶対。
左：50％;
トップ：40ピクセル;
Zインデックス：2。
フォントサイズ：は50px;
}
#menu {
位置：絶対。
左：40％;
トップ：60％;
}
#bird {
位置：絶対。
左：30px;
トップ10％;
表示：なし;
z屈折率：10。
}
.die {
遷移：0.5秒。
トップ：393px重要;！
z屈折率：99。
}
#ductWrap李{
位置：絶対。
トップ：0;
左：350px;
幅：62px;
高さ：423px;
リストスタイル：なし。
}
.duct_up {
背景：URL（ "IMG / up_mod.png"）リピートY;
高さ：120ピクセル;
位置：相対;
}
.duct_up IMG {
位置：絶対。
底：0。
}
.duct_down {
背景：URL（ "IMG / down_mod.png"）リピートY;
高さ：203px;
位置：絶対;
下：0;
幅：100％;
}
.duct_down IMG {
位置：絶対。
トップ：0;
}
</スタイル>
</ HEAD>
<BODY>
<オーディオ自動再生= "自動再生"プリロード= "自動"
SRC = "game_music.mp3">
你的浏览器不支持オーディオ标签
</オーディオ>
の<divのid = "fbWrap ">
<div要素のid ="
<IMG SRC = "IMG / head.jpg" ALT = "">
<div要素のid = "得点">
0
</ div>
<divのID = "メニュー">
<IMGのid = "開始" SRC = "IMG /スタート」ALT = "">の.jpg
</ div>
<divのID = "鳥">
<IMG SRC = "IMG / down_bird1.png" ALTを= "">
</ div>
<ulのID = "ductWrap">
</ UL>
</ div>
</ BODY>
<スクリプトタイプ= "テキスト/ javascriptの">
//开始按钮
VAR startBtn = document.querySelector（ "＃開始"）;
//ヘッド
VARヘッド=ドキュメント。querySelector（ "＃ヘッド"）;
//鳥
VAR鳥= document.querySelector（ "＃鳥"）;
//オーディオ
document.querySelector ductWrap = VAR（ "＃ductWrap"）;
// divのストアのスコアを取得
するvarスコア= document.querySelector（ "＃スコアリング"）;
//パイプラインタイマー作成
VAR createDuctTimer =ヌル;
//パイプラインの動きを削除するかどうかタイマー
VAR = falseにisDelTimer;
startBtn.onclick =関数は、（）{
ボタンと非表示のヘッドスタート//
; this.parentNode.style.display = "なし"
head.style.display = "なし";
//表示鳥の
鳥= .style.display "ブロック";
//鳥移動速度
bird.speed = 0;
//移動鳥
bird.moveTimerはのsetInterval（関数（=）{ moveTimer =のsetInterval（関数（）{
bird.speed + = 0.5。
IF（bird.offsetTop <= 0）{
バード。style.top = "0PX"。
}他IF（bird.offsetTop> = 394）{
; bird.style.top = "394px"
てclearInterval（bird.moveTimer）;
audio.src = "game_over.mp3";
文献=関数.onmousedown（E）{
//デフォルトイベント防ぐ
VAR EV = E || window.eventを、
ev.preventDefaultを（）;
};
//着陸するとき鳥が死んだとき
// 1：タイマー作成するクリアパイプライン
てclearIntervalを（createDuctTimer）;
// 2：クリア導管モバイルタイマー
isDelTimer = trueに;
}
IF（bird.speed <= 0）{
bird.children [0] .SRC = "IMG / up_bird0.png"。
}他{
bird.children [0] .SRC = "IMG / down_bird0.png"。
}
= bird.offsetTop + bird.speed + "PX" bird.style.top。
//碰撞检测
VAR ductRow = document.querySelectorAll（ "duct_row。"）;
用（VAR i = 0; I <ductRow.length; I ++）{
VAR isCrash = crashFn（鳥、ductRow [I]）。
IF（isCrash == TRUE）{
//更换音乐
audio.src = "game_over.mp3"。
//清除小鸟移动
てclearInterval（bird.moveTimer）。
てclearInterval（createDuctTimerを）;
//クリアモバイルダクト
=真isDelTimerに、
bird.classNameは= "ダイ";
document.onmousedown =関数（E）{
VARのEV E = || window.event;
ev.preventDefault（）;
};
}
}
}、30）;
//鳥上方移動
document.onmousedown =関数（E）{
//デフォルトイベント停止
するvar EV Eを= || window.event;
ev.preventDefault（）;
bird.speed = -5;
audio.src = "bullet.mp3";
}
//パイプライン作成
createDuctTimer =たsetInterval（関数（）{
VARダクト=のdocument.createElement（ "LI" ）;
パイプライン//上のランダム高
VAR upHeight = randFn（62、261 ）、
下部ダクトの高さ//
VAR downHeight = 423 - upHeight - 100;
duct.innerHTML =「< DIV CLASS = "duct_upのduct_row"スタイル = "高さ： '+ upHeight +' PX"> <IMG SRC = "IMG / up_pipe.png"> </ div> <divのクラス= "duct_down duct_row"スタイル=「高さ： " + downHeight + 'PX "> < IMG SRC =" IMG / down_pipe.png「> </ div>';
最初の発生の位置//導管
duct.l = 350;
//は、分析のために（ボル導管に入れます点か）
duct.scoreBol = trueに;
//パイプ移動
duct.moveTimer =たsetInterval（関数（）{
duct.l - = 3。
duct.style.left = duct.l + "PX"。
IF（duct.l <= -62）{
//パイプ除去
ductWrap.removeChild（ダクト）;
てclearInterval（duct.moveTimer）;
}そうIF（duct.l <= -31）{//パイプ未満-31場合である場合、鳥の代表者
（真の== duct.scoreBol）{IF
; score.innerHTMLは=のparseInt（score.innerHTML）+ 10
}
duct.scoreBol = falseに;
}
//死んだ鳥、タイマーを削除する
（isDelTimer IF =真へ=）{
てclearInterval（duct.moveTimer）;
}
}、30）
パイプductWrapに挿入//
ductWrap.appendChild（ダクト）。
}、3000）;
}
//ランダム関数の
関数randFnは（MIN、MAX）{
*（最大-分+ 1）のparseInt（Math.random（リターン）+分）;
}
//衝突検出
機能crashFn（OBJ1、OBJ2） {
VAR obj1Left = obj1.offsetLeft;
VAR = obj1Left obj1Right + obj1.offsetWidth;
VAR = obj1Top obj1.offsetTop;
VAR = obj1Top obj1Bottom + obj1.offsetHeight;
VAR = obj2Left obj2.parentNode.offsetLeft;
VAR = obj2Left obj2Right + obj2.offsetWidth ;
VAR = obj2Top obj2.offsetTop。
VAR = obj2Top obj2Bottom + obj2.offsetHeight;
// 1：OBJ1は等しいの右に左より大きいOBJ2
// 2：OBJ1上部OBJ2以下であります
3 @：以下、左OBJ1の右側に等しいOBJ2ある
@ 4：下部OBJ1 OBJ2がより小さい又は上部に等しい
IF（obj1Right> = obj2Left && obj1Bottom> = obj2Top && obj1Left <= obj2Right && obj1Top <= obj2Bottom）{
//有します衝突
trueに復帰;
}他{
//無衝突
falseに復帰;
}
}
</ SCRIPT>
</ HTML>
元の記事https://www.jianshu.com/p/9361a94df4da
唯一の教育目的のために再現