ES5项目-flybird-组团学

一、流程分析

项目展示与分析

流程：

背景滚动
开始界面
点击开始按钮进入游戏界面
壁垒移动
小鸟飞翔
分数累计
死亡检测

二、背景滚动

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Flybird</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
        <script src="js/sunck.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="mainScreen">
            <!-- 滚动界面 -->
            <div id="sliderMenu">
                <img src="img/banner.jpg" id="sliderPic1">
                <img src="img/banner.jpg" id="sliderPic2">
            </div>
        </div>
	</body>
</html>

style.css

*{
	margin: 0;padding: 0;
}

/*主屏幕*/
#mainScreen{
	width: 343px;
	height: 480px;
	position: relative;
	margin: 0 auto;
	background-image: url(../img/bg.jpg);
}
/*滚动界面*/
#sliderMenu{
	width: 343px;
	height: 14px;
	position: absolute;
	top: 422px;
	overflow: hidden;
}
#sliderPic1{
	left: 0px;
	position: absolute;
}
#sliderPic2{
	left: 343px;
	position: absolute;
}

sunck.js

window.onload = function() {
    // 背景滚动
    var sliderPic1 = document.getElementById("sliderPic1");
    var sliderPic2 = document.getElementById("sliderPic2");
    var sliderTimer = setInterval(function() {
        sliderPic1.style.left = sliderPic1.offsetLeft - 1 + "px";
        sliderPic2.style.left = sliderPic2.offsetLeft - 1 + "px";
        if (sliderPic1.offsetLeft <= -343) {
            sliderPic1.style.left = "343px";
        }
        if (sliderPic2.offsetLeft <= -343) {
            sliderPic2.style.left = "343px";
        }
    }, 50);
}

三、开始界面

index.html

        <div id="mainScreen">
						……
          
            <!-- 开始界面 -->
            <div id="startMenu">
                <div id="headLogo"><img src="img/bird0.png" id="startBird"></div>
                <div id="startBtn"></div>
            </div>
        </div>

style.css

/*开始界面相关*/
#startMenu{
	width: 343px;
	height: 422px;
	position: absolute;
}
#headLogo{
	width: 236px;
	height: 77px;
	position: absolute;
	left: 54px;
	top: 110px;
	background-image: url(../img/head.jpg);
}
#startBird{
	left: 200px;
	top: 15px;
	position: absolute;
}
#startBtn{
	width: 85px;
	height: 29px;
	left: 129px;
	top: 300px;
	background-image: url(../img/start.jpg);
	position: absolute;
}

sunck.js

window.onload = function() {
    ……
    
    //开始界面
    var headLogo = document.getElementById("headLogo");
    var startBird = document.getElementById("startBird");
    var speed = 1;
    var birdArr = ["img/bird0.png", "img/bird1.png"];
    var index = 1;
    var headTimer = setInterval(function() {
        //上下浮动
        if (headLogo.offsetTop >= 160) {
            speed = -1;
        }
        if (headLogo.offsetTop <= 110) {
            speed = 1;
        }
        headLogo.style.top = headLogo.offsetTop + speed + "px";

        //鸟动
        startBird.src = birdArr[index++];
        if (index == birdArr.length) {
            index = 0;
        }
    }, 50);
}

四、点击开始按钮进入游戏界面

index.html

        <div id="mainScreen">
						……
          
            <!-- 游戏界面 -->
            <div id="gameMenu">
                
            </div>
        </div>

style.css

/*游戏界面*/
#gameMenu{
	width: 343px;
	height: 422px;
	position: absolute;
	display: none;	
	overflow: hidden;
}

sunck.js

window.onload = function() {
    ……
    
    // 点击开始按钮进入游戏界面
    var startBtn = document.getElementById("startBtn");
    var startMenu = document.getElementById("startMenu");
    var gameMenu = document.getElementById("gameMenu");
    //对于开始界面的操作
    startBtn.addEventListener("click", function() {
        // 删除开始界面
        startMenu.parentNode.removeChild(startMenu);
        // 关闭上下移动定时器
        clearInterval(headTimer);
        // 显示游戏界面 
        gameMenu.style.display = "block";
    }, false);
}

五、壁垒移动

index.html

<script src="js/column.js" type="text/javascript" charset="utf-8"></script>

column.js

function Column(name, width, height, left, speed){
    this.element = null;
    
    this.upElement = null;
    this.img1 = null;
    this.img2 = null;
    
    this.downElement = null;
    this.img3 = null;
    this.img4 = null;
    
    this.name = name;
    this.width = width;
    this.height = height;
    this.left = left;
    this.speed = speed;
    
    this.picUp1 = "img/up_mod.png";
    this.picUp2 = "img/up_pipe.png";
    this.picDown1 = "img/down_mod.png";
    this.picDown2 = "img/down_pipe.png";
    
    this.randomNum = function(min, max){
        return parseInt(Math.random()*(max-min+1)+min);
    }
    
    this.createColumn = function(){
        this.element = document.createElement("div");
        this.element.style.position = "absolute";
        this.element.style.width = this.width + "px";
        this.element.style.height = this.height + "px";
        this.element.style.left = this.left + "px";
        this.element.style.top = 0;
        // this.element.style.backgroundColor = "red";
        
        
        h1 = this.randomNum(100, 150);
        this.upElement = document.createElement("div");
        this.upElement.style.width = this.width + "px";
        this.upElement.style.height = h1 + "px";
        this.upElement.style.position = "absolute";
        this.upElement.style.left = 0;
        this.upElement.style.top = 0;
        // this.upElement.style.backgroundColor = "green";
        this.element.appendChild(this.upElement);
        this.img1 = document.createElement("img");
        this.img1.src = this.picUp1;
        this.img1.style.height = h1 - 60 + "px";
        this.img1.style.width = this.width + "px";
        this.img1.style.position = "absolute";
        this.img1.style.left = 0;
        this.img1.style.top = 0;
        this.upElement.appendChild(this.img1);
        this.img2 = document.createElement("img");
        this.img2.src = this.picUp2;
        this.img2.style.height = "60px";
        this.img2.style.width = this.width + "px";
        this.img2.style.position = "absolute";
        this.img2.style.left = 0;
        this.img2.style.top = h1 - 60 + "px";
        this.upElement.appendChild(this.img2);
        
        
        
        h2 = this.randomNum(100, 150);
        this.downElement = document.createElement("div");
        this.downElement.style.width = this.width + "px";
        this.downElement.style.height = h2 + "px";
        this.downElement.style.position = "absolute";
        this.downElement.style.left = 0;
        this.downElement.style.bottom = 0;
        // this.downElement.style.backgroundColor = "yellow";
        this.element.appendChild(this.downElement);
        this.img3 = document.createElement("img");
        this.img3.src = this.picDown1;
        this.img3.style.height = h2 - 60 + "px";
        this.img3.style.width = this.width + "px";
        this.img3.style.position = "absolute";
        this.img3.style.left = 0;
        this.img3.style.top = "60px";
        this.downElement.appendChild(this.img3);
        this.img4 = document.createElement("img");
        this.img4.src = this.picDown2;
        this.img4.style.height = "60px";
        this.img4.style.width = this.width + "px";
        this.img4.style.position = "absolute";
        this.img4.style.left = 0;
        this.img4.style.top = 0;
        this.downElement.appendChild(this.img4);
    }
    this.show = function(parent){
        this.createColumn();
        parent.appendChild(this.element);
    }
    this.move = function(){
        var _this = this;
        setInterval(function(){
            _this.element.style.left = _this.element.offsetLeft - _this.speed + "px";
            if (_this.element.offsetLeft < -45){
                _this.element.style.left = "490px";
                _this.changeStyle();
            }
        }, 20);
    }
    this.changeStyle = function(){
        h1 = this.randomNum(100, 150);
        this.upElement.style.height = h1 + "px";
        this.img1.style.height = h1 - 60 + "px";
        this.img2.style.top = h1 - 60 + "px";
        
        h2 = this.randomNum(100, 150);
        this.downElement.style.height = h2 + "px";
        this.img3.style.height = h2 - 60 + "px";
    }
}

sunck.js

window.onload = function() {
    ……

    // 壁垒移动
    startBtn.addEventListener("click", function() {
        setTimeout(function(){
            var column = new Column("c1", 62, 422, 343, 2);
            column.show(gameMenu);
            column.move();
            setTimeout(function(){
                var column = new Column("c2", 62, 422, 343, 2);
                column.show(gameMenu);
                column.move();
                setTimeout(function(){
                    var column = new Column("c3", 62, 422, 343, 2);
                    column.show(gameMenu);
                    column.move();
                }, 1800);
            }, 1800);
        }, 1800);
    }, false);
}

六、小鸟飞翔

index.html

<script src="js/bird.js" type="text/javascript" charset="utf-8"></script>

bird.js

var bird = {
    element: null,
    speed: 0,
    maxSpeed: 10,
    downImgArr: ["img/down_bird0.png", "img/down_bird1.png"],
    upImgArr: ["img/up_bird0.png", "img/up_bird1.png"],
    imgArr: null,
    flyTimer: null,
    wingTimer: null,
    
    createBird: function(){
        this.element = document.createElement("div");
        this.element.style.position = "absolute";
        this.element.style.left = "50px";
        this.element.style.top = "200px";
        this.element.style.backgroundImage = "url(img/bird0.png)";
        this.element.style.width = "40px"
        this.element.style.height = "26px";
    },
    show: function(parent){
        this.createBird();
        parent.appendChild(this.element);
    },
    
    fly:function(){
        var index = 0;
        this.wingTimer = setInterval(function(){
            if (bird.speed >= 0){
                //下
                bird.imgArr = bird.downImgArr;
            }else{
                //上
                bird.imgArr = bird.upImgArr;
            }
            bird.element.style.backgroundImage = "url(" + bird.imgArr[index++] + ")";
            if (index == 2){
                index = 0;
            }
        }, 30);
        
        this.flyTimer = setInterval(function(){
            bird.speed += 0.5;
            if (bird.speed >= bird.maxSpeed){
                bird.speed = bird.maxSpeed;
            }
            bird.element.style.top = bird.element.offsetTop + bird.speed + "px";
            if (bird.element.offsetTop >= 422-26 || bird.element.offsetTop <= 0){
                //游戏结束
            }
        }, 50);
    }
}

sunck.js

window.onload = function() {
    ……

    // 小鸟飞翔
    startBtn.addEventListener("click", function(){
        bird.show(gameMenu);
        setTimeout(function(){
            bird.fly();
            function play(event){
                if (event.keyCode == 32){
                    bird.speed = -10;
                }
            }
            document.addEventListener("keydown", play, false);
        }, 1000);
    });
}

七、分数累计

index.html

<script src="js/judge.js" type="text/javascript" charset="utf-8"></script>

        <div id="mainScreen">
            ……
          
            <!-- 分数计数器 -->
            <ul id="score">
                <li><img class="scoreImg" src="img/0.jpg"></li>
                <li><img class="scoreImg" src="img/0.jpg"></li>
                <li><img class="scoreImg" src="img/0.jpg"></li>
                <li><img class="scoreImg" src="img/0.jpg"></li>
            </ul>
        </div>

style.css

/* 分数计数器 */
#score{
    list-style: none;
    position: absolute;
    bottom: -2px;
    left: 115.5px;
    display: none;
}
#score li{
    float: left;
}

sunck.js

    // 分数累计
    startBtn.addEventListener("click", function(){
        document.getElementById("score").style.display = "block";
        judge.imgs = document.getElementsByClassName("scoreImg");
    });

column.js

    this.move = function() {
        var _this = this;
        setInterval(function() {
            _this.element.style.left = _this.element.offsetLeft - _this.speed + "px";
            if (_this.element.offsetLeft < -45) {
                _this.element.style.left = "490px";
                _this.changeStyle();
                
                judge.score += 1;
                judge.scoreDetection();
            }
        }, 20);
    }

judge.js

var judge = {
    score: 0,
    imgs: null,
    
    scoreDetection: function(){
        var g = judge.score % 10;
        var s = parseInt(judge.score / 10) % 10;
        var b = parseInt(judge.score / 100) % 10;
        var q = parseInt(judge.score / 1000);
        
        var nums = [q, b, s, g];
        for(var i = 0; i < nums.length; i++){
            var img = judge.imgs[i];
            var path = "img/"+nums[i]+".jpg";
            img.src = path;
        }
    },
}

八、死亡检测

sunck.js

    startBtn.addEventListener("click", function(){
        setTimeout(function(){
            var column = new Column("c1", 62, 422, 343, 2);
            column.show(gameMenu);
            column.move();
            judge.columns.push(column.element);
            setTimeout(function(){
                var column = new Column("c1", 62, 422, 343, 2);
                column.show(gameMenu);
                column.move();
                judge.columns.push(column.element);
                setTimeout(function(){
                    var column = new Column("c1", 62, 422, 343, 2);
                    column.show(gameMenu);
                    column.move();
                    judge.columns.push(column.element);
                }, 1800);
            }, 1800);
        }, 1800);
    }, false);

judge.js

var judge = {
    score: 0,
    imgs: null,
    columns: null,

    ……
  
    dieDetection: function() {
        setInterval(function(){
            for (var i = 0; i < judge.columns.length; i++){
                var column = judge.columns[i];
                if (column.offsetLeft < bird.element.offsetLeft+bird.element.offsetWidth && column.offsetLeft>bird.element.offsetLeft-column.offsetWidth){
                    var walls = column.getElementsByClassName("wall");
                    //进行碰撞检测
                    if (judge.pzjcFunc(walls[0], bird.element) || judge.pzjcFunc(walls[1], bird.element)){
                        judge.gameOver();
                    }
                }
            }
        }, 20);
    },
    pzjcFunc: function(obj1, obj2) {
        var obj1Left = obj1.offsetLeft;
        var obj1Width = obj1Left + obj1.offsetWidth;
        var obj1Top = obj1.offsetTop;
        var obj1Height = obj1Top + obj1.offsetHeight;

        var obj2Left = obj2.offsetLeft;
        var obj2Width = obj2Left + obj2.offsetWidth;
        var obj2Top = obj2.offsetTop;
        var obj2Height = obj2Top + obj2.offsetHeight;

        if (!(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top)) {
            return true;
        }
        return false;
    },
    gameOver: function(){
        for (var i = 0; i < 100; i++){
            clearInterval(i);
        }
    }
}

sunck.js

    //死亡检测
    startBtn.addEventListener("click", function(){
        judge.dieDetection();
    });

bird.js

var bird = {
    ……
  
    fly:function(){
        ……
        
        this.flyTimer = setInterval(function(){
            ……
            if (bird.element.offsetTop >= 422-26 || bird.element.offsetTop <= 0){
                //游戏结束
                judge.gameOver();
            }
        }, 50);
    }
}