原生js寫的flybird小遊戲

時間  2019-11-11
標籤 原生 寫的 flybird 遊戲 欄目 JavaScript 简体版
原文   原文鏈接

 

 

 

 

 

遊戲地址：http://www.zangzhihong.com/flybird/index.htmljavascript

html部分css

<!DOCTYPE html>html
  <!-- This html make by zzh 2017-11-9 -->
  <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   
  <!-- 未解決問題1，分數顯示的邏輯問題。2定時器未徹底清除的問題。 -->
  <!-- 製做該小遊戲的過程當中更加深入的理解了定時器的使用（定時器使用後在某些場合會產生定時器疊加，致使速度愈來愈快，在管道的向左移動中，定時器必須綁定在每一個管道上管道才能被正確的建立）
  ，以及單體單例模式的開發，對模塊化的概念有了更深的理解，對幀動畫的原理有了更加清晰的認識，對高級事件的用法更加熟悉 -->
  <!-- 後續須要改進的，遊戲中場景的自適應寬高而且能讓檢測碰撞正常檢測，對一些小地方的優化 -->
  <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
  <title>小蠢鳥</title>
  <!--<link rel="icon" href="favicon.png" type="images/bird0.png">-->
  <link rel="shortcut icon" href="images/bird0.png" type="image/png">
  <link rel="stylesheet" href="css/flybird.css" />
  </head>
   
  <body>
  <div id="container"><!--遊戲場景容器 -->
  <div class="head">  <!--遊戲場景界面的標題 -->
  <img src="images/head.jpg" />
  <span class="jump_bird"></span>
  </div>
  <div class="score"></div><!--遊戲場分數顯示 -->
  <div class="start"><!--遊戲開始按鈕 -->
  <img src="images/start.jpg" />
  </div>
  <div class="slider"><!--遊戲持續滑動的滑塊 -->
  <img src="images/slider.jpg" />
  <img src="images/slider.jpg" />
  </div>
  <div id="flybird"></div><!--小鳥 -->
  <div class="pipe"></div><!--管道容器 -->
  <div class="gameover"><!--遊戲結束界面 -->
  <img src="images/game_over.jpg" />
  </div>
  <div class="message"><!--遊戲結束界面顯示框 -->
  <img src="images/message.jpg" />
  </div>
  <div class="best_score"></div><!--最高成績顯示 -->
  <div class="result">
  <img src="images/ok.jpg" />
  </div>
  </div>
  <audio class='bgm' src="source/game_music.mp3" autoplay="autoplay" loop="loop"></audio><!--遊戲主背景音樂 -->
  <audio class='gameover_bgm' src="source/game_over.mp3" autoplay="autoplay"></audio><!--遊戲結束音樂 -->
  <audio class='up_bgm' src="source/bullet.mp3" autoplay="autoplay"></audio><!--點擊小鳥上升的音樂 -->
  </body>
  <script type="text/javascript" src="js/flybird.js"></script>
   
  </html>

 js部分java

//make by zzh 2017-11-9 var Game = {     wrap: document.getElementById('container'),//獲取遊戲舞臺app

    head: document.getElementsByClassName('head')[0],//開始場景標題dom

    start: document.getElementsByClassName('start')[0],//開始按鈕ide

    bird: document.getElementById('flybird'),//小鳥模塊化

    message: document.getElementsByClassName('message')[0],//顯示信息oop

    result: document.getElementsByClassName('result')[0],//再玩一次優化

    game_over: document.getElementsByClassName('gameover')[0],//遊戲結束顯示的圖標

    bgm: document.getElementsByClassName('bgm')[0],//背景音樂

    gameover_bgm: document.getElementsByClassName('gameover_bgm')[0],//結束背景音樂

    up_bgm: document.getElementsByClassName('up_bgm')[0],//小鳥向上的背景音樂

    score_tip: document.getElementsByClassName('score')[0],//分數顯示模塊

    bestScore: document.getElementsByClassName('best_score')[0],//最高成績顯示模塊

    speed: 0,//初始速度

    score_index: 0,//初始化分數

    // max_score: 0,

    maxspeed: 10,//最大速度

    downtime: null,//定時器的初始狀態

    uptime: null,

    pipetime: null,

    pipecreatetime: null,

    init: function () {//遊戲場景初始化

        this.gameover_bgm.pause();

        this.up_bgm.pause();

        this.bgm.pause()

        var _this = this;

        this.result.onclick = function () {

            Game.playagain();         }         this.start.onclick = function () {//click start button begin game，開始遊戲

            _this.bgm.play()

            Game.score();

            _this.score_tip.style.display = "block";

            _this.head.style.display = 'none';

            _this.start.style.display = 'none';

            _this.bird.style.top = '200px';

            _this.bird.className = 'bird';

            Game.pipecreatetime = setInterval(Game.pipe, 3000);

            document.onclick = function () {

                _this.jump();             }

        }     },     down: function () {//bird fly to down

        Game.speed += 1;

        Game.bird.className = 'flybirddown';

        if (Game.speed >= Game.maxspeed) {

            Game.speed = Game.maxspeed;

        }         if (Game.bird.offsetTop >= 500 || Game.bird.offsetTop <= 0) {

            Game.gameover()         }         Game.bird.style.top = Game.bird.offsetTop + Game.speed + 'px';     },     up: function () { //bird fly to up

        Game.speed -=1;

        Game.bird.className = 'flybirdup';

        Game.up_bgm.play()

        if (Game.speed <= 0) {

            Game.speed = 0;

            clearInterval(Game.uptime);

            Game.downtime = setInterval(Game.down, 30);

        }

        Game.bird.style.top = Game.bird.offsetTop - Game.speed + 'px';     },     jump: function () {//bird jump methods

        Game.speed = Game.maxspeed;

        clearInterval(Game.uptime);

        clearInterval(Game.downtime);

        Game.uptime = setInterval(Game.up, 30);

    },     rand: function (min, max) { //input mini num and max mun create a  random

        return Math.floor(Math.random() * (max - min) + min);     },     pipe: function () {//create pipe

 

        var in_pipe = document.getElementsByClassName('pipe')[0];

        var sm_pipe = document.createElement('div');

        sm_pipe.className = 'sm_pipe';

        in_pipe.appendChild(sm_pipe);

        var topheight = Game.rand(80, 300);

        var bottomheight = 530 - 150 - topheight;

        if (Game.score_index >= 1000) {

            bottomheight = 530 - 125 - topheight;

        } else if (Game.score_index >= 2000) {

            bottomheight = 530 - 100 - topheight;

        } else if (Game.score_index >= 2000) {

            bottomheight = 530 - 75 - topheight;

        } else if (Game.score_index >= 3000) {

            bottomheight = 530 - 50 - topheight;

        }

        sm_pipe.innerHTML = '<div class="top_pipe"><div style="height:' + topheight + 'px"></div></div><div class="bottom_pipe"><div style="height:' + bottomheight + 'px"></div></div>'

        var maxwidth = Game.wrap.offsetWidth;

        sm_pipe.style.left = maxwidth + 'px';

        // sm_pipe.pipetime = null;

        clearInterval(sm_pipe.pipetime);

        sm_pipe.pipetime = setInterval(function () {

            maxwidth -= 3;

            sm_pipe.style.left = maxwidth + 'px';

            Game.collision()

            if (maxwidth <= -60) {

                clearInterval(sm_pipe.pipetime);

                in_pipe.removeChild(sm_pipe);

            }             if (sm_pipe.offsetLeft <= 30) {

                Game.score();             }         }, 30)

    },     collision: function () {//用小鳥去和生成的管道循環判斷是否碰撞

        var getallsm_pipe = document.getElementsByClassName('sm_pipe')

        for (var i = 0; i < getallsm_pipe.length; i++) {

            var top_pipe = getallsm_pipe[i].getElementsByClassName('top_pipe')[0];

            var bottom_pipe = getallsm_pipe[i].getElementsByClassName('bottom_pipe')[0];

            Game.knock(top_pipe, getallsm_pipe[i]);

            Game.knock(bottom_pipe, getallsm_pipe[i]);

        }     },     score: function () {//分數統計         Game.score_tip.innerHTML = '分數:' + Game.score_index;         Game.score_index++;

 

    },     knock: function (obj1, obj2) {//碰撞檢測

        var l1 = Game.bird.offsetLeft;//小鳥左邊距離邊框的距離

        var r1 = l1 + Game.bird.offsetWidth;//小鳥左邊距離邊框的距離加上本身的寬度

        var t1 = Game.bird.offsetTop;//小鳥距離上邊框的高度

        var b1 = t1 + Game.bird.offsetHeight//小鳥距離上邊框的高度加上自身的高度

        var l2 = obj2.offsetLeft;//管道距離左邊的距離

        var r2 = l2 + obj2.offsetWidth;//管道距離左邊的距離加上自身的寬度

        var t2 = obj1.offsetTop;//管道距離上邊的距離

        var b2 = t2 + obj1.offsetHeight;//管道距離上邊的距離加上管道自身高度的距離

        //判斷條件         if (r1 > l2 && l1 < r2 && b1 > t2 && t1 < b2) {

            Game.gameover()         }     },     gameover: function () {//遊戲結束

        Game.gameover_bgm.play();

     

         document.onclick=null;

        Game.bgm.pause();

        clearInterval(Game.downtime)

        clearInterval(Game.uptime)

        clearInterval(Game.pipecreatetime)

        clearInterval(Game.pipetime)

      

        // clearInterval(sm_pipe.pipetime);       

        Game.message.style.display = "block";

        Game.head.style.display = "none";

        Game.result.style.display = "block";

        Game.game_over.style.display = "block";

        Game.bird.style.top = '503px';

        Game.bestScore.style.display='block';

       if(localStorage.max_score){         if(Game.score_index>= localStorage.max_score)         {             localStorage.max_score= Game.score_index                                 Game.bestScore.innerHTML= localStorage.max_score

                        }else{                     Game.bestScore.innerHTML= localStorage.max_score                 }             }else{                 localStorage.max_score=0;             }

      

           },     playagain: function () {//再玩一次

        Game.bgm.play();

        Game.score_index = 0;

        Game.score();

        Game.bestScore.style.display='none';

        Game.head.style.display = 'none';

        Game.start.style.display = 'none';

        Game.bird.style.top = '200px';

        Game.bird.className = 'bird';

        Game.message.style.display = "none";

        Game.head.style.display = "none";

        Game.result.style.display = "none";

        Game.game_over.style.display = "none";

        Game.pipecreatetime = setInterval(Game.pipe, 3000);

 

        document.onclick = function () {

            Game.jump();         }     } } Game.init();

 

 

CSS部分

html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
#container {
position: relative;
top:0;
left:0;
overflow:hidden;
width: 343px;
height: 600px;
background:url('../images/bg.jpg');
background-size:100% 100%;
background-repeat:repeat;
margin:0 auto;
}
.head {
position: absolute;
top: 100px;
left: 50px;
animation: title 1s infinite alternate;
}
.jump_bird {
position: absolute;
top: 8px;
left: 190px;
width:40px;
height:26px;

animation: bird .4s infinite alternate;
}
.start{
position:absolute;
top:290px;
left:120px;
}
.slider{
position:absolute;
width:690px;
top:530px;
animation:slider 3s linear infinite;
}
.slider img{
float: left;
}
#flybird{
position:absolute;
top:200px;
left:50px;
}
.bird {
width: 40px;
height: 30px;
animation: bird .4s infinite alternate;
}
.flybirddown {
width: 40px;
height: 30px;
animation: birddown .4s infinite alternate;
}
.flybirdup {
width: 40px;
height: 30px;
animation: birdup .4s infinite alternate;
}
@keyframes slider{
0%{
left:0;
}

100%{
left:-343px;
}
}
@keyframes title{
0% {
top: 100px;

}

100% {
top: 120px;

}
}
@keyframes bird {
0% {

background: url('../images/bird0.png');
}

100% {

background: url('../images/bird1.png')
}
}
@keyframes birddown{
0% {
background: url('../images/down_bird0.png');
}

100% {
background: url('../images/down_bird1.png')
}
}
@keyframes birdup {
0% {
background: url('../images/up_bird0.png');
}

100% {
background: url('../images/up_bird1.png')
}
}

.sm_pipe{
position:absolute;
top:0;
width:62px;
height:530px;
}
.top_pipe {
width: 100%;
position: absolute;
top: 0;
background: url(../images/up_mod.png);
}
.top_pipe div {
background: url(../images/up_pipe.png) 0 bottom no-repeat;
}
.bottom_pipe {
width: 100%;
position: absolute;
bottom: 0;
background: url(../images/down_mod.png);
}
.bottom_pipe div {
background: url(../images/down_pipe.png) 0 top no-repeat;
}
.gameover {
display: none;
position: absolute;
top: 103px;
left: 46px;
animation:over 1s linear;
}
.message{
display:none;
position:absolute;
top:165px;
left:25px;
}
.result {
display: none;
position: absolute;
top: 338px;
left: 105px;
animation: ok 1s linear;
}
.score {
display: none;
position: absolute;
top: 80px;
left: 120px;
width:100px;
height:50px;
z-index:10;
color:#0094ff;
font-size:20px;
font-weight:bold;
text-align:center;
}
.best_score{
display: none;
position: absolute;
top: 257px;
left: 202px;
width: 100px;
text-align: center;
font-size: 20px;
color: red;
font-weight: bold;
}
@keyframes over{
0%{
top:-10px;
}
100%{
top:103px;
}
}

@keyframes ok{
0% {
left: 0px;
}

100% { left: 105px; }}

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程