180行原生js代碼實現簡易版飛行的小鳥遊戲

/**原理簡單,(簡單碰撞判斷,定時器運用)複製代碼直接運行便可,若是沒有聲音文件,則去除幾處調用遊戲聲效的代碼便可**/javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            body{
                overflow: hidden;
            }
            #bird{
                width: 30px;
                height: 30px;
                font-size: 11px;
                background-color: tomato;
                position: absolute;
                left: 500px;
                top :50px;
            }
        </style>
    </head>
    <body>
        
        <div id="bird">
            Enter開始
        </div>
        <audio id="baMusic" >
            <source src="video/score.mp3" ></source>
        </audio>
        <audio id="overMusic" >
            <source src="video/gameover.mp3" ></source>
        </audio>
        <audio id="readyMusic" >
            <source src="video/ready.mp3"  muted autoplay></source>
        </audio>
        <script type="text/javascript">
            window.onload = function(){
                var bird = document.getElementById("bird");
                var sc = document.getElementById("baMusic");
                var over = document.getElementById("overMusic");
                var ready = document.getElementById("readyMusic");
                var startBtn = document.getElementById("startBtn");
                var speed = 0;
                var visiWidth = document.documentElement.clientWidth;
                var visiHeight = document.documentElement.clientHeight;
                var die = false; // 默認未死亡
                var score = 0;
                var birdTimer;  //鳥自由落體定時器
                var gaming = false; //默認遊戲未開始
                
                /*鍵盤監聽按enter開始遊戲*/
                document.onkeydown = function(event){
                    event = event||window.event;
                    if(gaming){
                        speed = speed - 20;
                        if(!die){
                            dump();
                        }
                    }else{
                        if(event.keyCode==13){
                            bird.innerHTML="正在遊戲";
                            gaming = true;
                            gameStart();
                            fly();
                            var rnadzTimer = setInterval(function(){
                                getRandomZz(); 
                            },1500);  // 隔指定時間生成柱子.
                        }
                    }
                    
                };
                
                
                function fly(){
                    clearInterval(birdTimer);
                     birdTimer = setInterval(function(){
                        var curTop = parseInt(bird.offsetTop);
                        if(curTop >= visiHeight-50 || curTop <= 0){
                            clearInterval(birdTimer);
                            die = true;
                            gameOver();
                            document.onkeydown = null;
                            return;
                        }
                        speed +=1;
                        bird.style.top = (curTop + speed) + "px";
                    },50);
                }
                
                
                function getRandomZz(){
                    var zzTimer ;
                    var kx = getRandom(250,600); //留多少空隙
                    var zzTop = document.createElement("div");
                    var zzBtm = document.createElement("div");
                    var randHeight = getRandom(50,300);
                    var randWidthTop = getRandom(50,150);
                    zzTop.moveData = visiWidth;
                    zzTop.style.height = randHeight+"px";
                    zzTop.style.width = randWidthTop+"px";
                    zzTop.style.backgroundColor = "green";
                    zzTop.style.position = "absolute";
                    zzTop.style.left = "100%";
                    
                    // 設置底部柱子
                    zzBtm.moveData = visiWidth;
                    zzBtm.style.height = (visiHeight -  randHeight -kx)+"px";
                    zzBtm.style.width = randWidthTop+"px";
                    zzBtm.style.backgroundColor = "green";
                    zzBtm.style.position = "absolute";
                    zzBtm.style.left = "100%";
                    zzBtm.style.top = (randHeight+kx)+"px";
                    document.body.appendChild(zzTop);
                    document.body.appendChild(zzBtm);
                    
                    zzTimer = setInterval(function(){
                        if(die){
                            clearInterval(zzTimer);
                            return;
                        }
                        zzTop.moveData--;
                        zzTop.style.left = zzTop.moveData + "px";
                        zzBtm.style.left = zzTop.moveData + "px";
                        if(zzTop.moveData<=-150){
                            score++;
                            getScore();
                            clearInterval(zzTimer);
                        }
                        // 檢測碰撞
                        if(isKnock(bird,zzTop)||isKnock(bird,zzBtm)){
                            die = true;
                            clearInterval(zzTimer);
                            clearInterval(birdTimer);
                            gameOver();
                            alert("得分:" + score * 5);
                        }
                    },3);
                    
                }
                
                function gameStart(){
                    ready.src="video/ready.mp3";
                    ready.play();
                }
                
                function getScore(){
                    sc.src="video/score.mp3";
                    sc.play();
                }
                function gameOver(){
                    over.src="video/gameover.mp3";
                    over.play();
                }
                function dump(){
                    over.src="video/jump.mp3";
                    over.play();
                }
        }
        
        
        /**
         *隨機返回一個n-m的整數 
         */
        function getRandom(n,m){
            return parseInt(Math.random()*(m-n)) +n;
        }
        
        /*
         * 碰撞檢測方法,若是碰撞則返回true
         * obj1 第一個dom 對象
         * obj2 第二個dom 對象
         * */
        function isKnock(obj1,obj2){
            if(obj1.offsetLeft + obj1.offsetWidth > obj2.offsetLeft &&
               obj2.offsetLeft + obj2.offsetWidth > obj1.offsetLeft &&
               obj1.offsetTop + obj1.offsetHeight > obj2.offsetTop &&
               obj2.offsetTop + obj2.offsetHeight > obj1.offsetTop){
                        return true;
            }
            return false;   
        }
            
        </script>
    </body>
</html>css

相關文章
相關標籤/搜索