组团学
学习方向
登录/注册

ES5项目-锅打灰太狼

阅读 (353)

一、流程分析

项目展示与分析

  • 开始静态界面
  • 点击开始读取进度条
  • 狼出洞
  • 打狼计分
  • 游戏结束统计

二、开始静态界面

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <div id="outer">
            <div id="fraction">0</div>
            <div id="time"></div>
            <div id="startMenu">
                <a href="#" id="start">Start</a>
            </div>
        </div>
    </body>
</html>

style.css

*{
	margin: 0;
	padding: 0;
	font-family: "微软雅黑";
}

#outer{
	background: url(../img/game_bg.jpg) 0 0 no-repeat;
	position: relative;
	width: 320px;
	height: 480px;
	margin: 0 auto;
}

#fraction{
	position: absolute;
	left: 65px;
	top: 13px;
	color: white;
}
#time{
	position: absolute;
	width: 180px;
	height: 16px;
	left: 63px;
	top: 66px;
	background: url(../img/progress.png) 0 0 no-repeat;
}
#startMenu{
	position: absolute; 
	width: 320px; 
	text-align: center; 
	left: 0; 
	top: 200px;
}

#start,#endMenu,#reload{
	line-height:50px; 
	font-size:30px; 
	font-weight:bold; 
	color:#F00; 
	display:block; 
	text-decoration:none;
}

三、点击开始读取进度条

index.html

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

sunck.js

window.onload = function(){
    //开始按钮
    var startBtn = document.getElementById("start");
    //开始菜单
    var startMenu = document.getElementById("startMenu");
    //进度条
    var timeLine = document.getElementById("time");
    startBtn.addEventListener("click", function(){
        startMenu.style.display = "none";
        
        //进度条
        timeLineTimer = setInterval(function(){
            if (timeLine.offsetWidth > 0){
                timeLine.style.width = timeLine.offsetWidth - 1 + "px";
            } else{
                //结束时刻
                //清除计时器
                clearInterval(timeLineTimer);
            }
        }, 200);
    });
}

四、狼出洞

index.html

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

wolfHouse.js

function WolfHouse() {
    this.houseElement = null;
    this.wolfElement = null;
    this.index = 0;
    this.showTimer = null;
    this.wolfType = null;

    this.createWolfHouse = function() {
        //狼窝
        this.houseElement = document.createElement("div");
        this.houseElement.style.position = "absolute";
    }
    this.createWolf = function() {
        this.wolfElement = document.createElement("img");
    }
    this.show = function(parent) {
        this.createWolfHouse()
        this.createWolf();
        this.houseElement.appendChild(this.wolfElement);
        parent.appendChild(this.houseElement);
    }
    
    this.wolfAction = function(point) {
        this.houseElement.style.left = point[0];
        this.houseElement.style.top = point[1];
        liftCircle = [0,1,2,3,4,5,4,3,2,1,0];
        
        this.wolfType = this.randomNum(0, 10) > 3 ? "h" : "x";
        var _this = this
        this.showTimer = setInterval(function(){
            if (_this.index < liftCircle.length){
                _this.wolfElement.src = "img/" + _this.wolfType + liftCircle[_this.index] + ".png";
                _this.index += 1;
            } else {
                _this.index = 0;
                _this.wolfElement.src = "";
                clearInterval(_this.showTimer);
            }
        }, 70);
    }

    this.randomNum = function(min, max) {
        return parseInt(Math.random() * (max - min) + min);
    }
}

sunck.js

window.onload = function() {
    //开始按钮
    var startBtn = document.getElementById("start");
    //开始菜单
    var startMenu = document.getElementById("startMenu");
    //进度条
    var timeLine = document.getElementById("time");
    startBtn.addEventListener("click", function() {
        startMenu.style.display = "none";

        //进度条
        timeLineTimer = setInterval(function() {
            if (timeLine.offsetWidth > 0) {
                timeLine.style.width = timeLine.offsetWidth - 1 + "px";
            } else {
                //结束时刻
                //清除计时器
                clearInterval(timeLineTimer);
                clearInterval(wolfTimer);
            }
        }, 200);
    });


    //狼出洞
    //洞穴坐标
    function randomNum(min, max) {
        return parseInt(Math.random() * (max - min) + min);
    }
    arrPos = [
        ["98px", "115px"],
        ["17px", "160px"],
        ["15px", "221px"],
        ["30px", "294px"],
        ["122px", "274px"],
        ["207px", "296px"],
        ["200px", "212px"],
        ["187px", "142px"],
        ["100px", "192px"]
    ];
    startBtn.addEventListener("click", function() {
        //创建三个狼窝备用
        var outer = document.getElementById("outer");
        var wh1 = new WolfHouse();
        wh1.show(outer);
        var wh2 = new WolfHouse();
        wh2.show(outer);
        var wh3 = new WolfHouse();
        wh3.show(outer);
        wolfHouses = [wh1, wh2, wh3];
        
        //狼出洞
        wolfTimer = setInterval(function() {
            //确定需要几个狼窝
            var whNum = 2;
            var flag = randomNum(0, 14);
            if (flag <= 1) {
                whNum = 3;
            } else if (flag <= 5) {
                whNum = 2;
            } else {
                whNum = 1;
            }
            //几个狼窝对应几个位置坐标
            var pointArr = [];
            while (1) {
                var p = arrPos[randomNum(0, 9)];
                if (pointArr.indexOf(p) == -1) {
                    pointArr.push(p);
                    if (pointArr.length == whNum) {
                        break;
                    }
                }
            }
            //出洞
            for (var i = 0; i < whNum; i++) {
                wolfHouses[i].wolfAction(pointArr[i]);
            }
        }, 2000);
    });
}

五、打狼计分

wolfHouse.js

function WolfHouse() {
		……
    this.debounce = function(fn, wait) {
        var timer = null;
        var context = null;
        var args = null;

        var later = function() {
            fn.apply(context, args);
        }

        return function() {
            content = this;
            args = arguments;
            if (timer) {
                clearTimeout(timer);
            }
            var callNow = !timer;
            timer = setTimeout(function() {
                timer = null;
            }, wait);
            if (callNow) {
                later();
            }
        }
    }

    this.createWolfHouse = function() {
        this.houseElement = document.createElement("div");
        this.houseElement.style.position = "absolute";
        var _this = this;

        function fn() {
            //停止正常动画定时器
            clearInterval(_this.showTimer);

            //分数
            var fraction = document.getElementById("fraction");
            if (_this.wolfType == "h") {
                fraction.innerHTML = parseInt(fraction.innerHTML) + 10;
            } else {
                fraction.innerHTML = parseInt(fraction.innerHTML) - 10;
            }
            
            // 打击
            var index = 5;
            var self = _this;
            var hitTimer = setInterval(function() {
                if (index < 10) {
                    self.wolfElement.src = "img/" + self.wolfType + index + ".png";
                    index++;
                } else {
                    clearInterval(hitTimer);
                    self.index = 0;
                    self.wolfElement.src = "";
                }
            }, 90);
        }
        this.houseElement.addEventListener("click", this.debounce(fn, 500), false);
    }
  	……
}

六、游戏结束统计

index.html

        <div id="outer">
            <div id="fraction">0</div>
            <div id="time"></div>
            <div id="startMenu">
                <a href="#" id="start">Start</a>
            </div>
            <div id="endMenu"></div>
            <a href="#" id="reload">重新开始</a>
        </div>

style.css

#start,#endMenu,#reload{
    color: red;
    text-decoration: none;
    font-size: 30px;
    font-weight: bold;
    line-height: 50px;
}

#endMenu{
    position: absolute;
    width: 320px;
    top: 200px;
    left: 0;
    text-align: center;
    display: none;
}
#reload{
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
}

sunck.js

window.onload = function() {
    //开始按钮
    var startBtn = document.getElementById("start");
    //开始菜单
    var startMenu = document.getElementById("startMenu");
    //进度条
    var timeLine = document.getElementById("time");
    //结束菜单
    var endMenu = document.getElementById("endMenu");
    //重新开始按钮
    var reloadBtn = document.getElementById("reload");

    startBtn.addEventListener("click", function() {
        startMenu.style.display = "none";
        //进度条
        timeLineTimer = setInterval(function() {
            if (timeLine.offsetWidth > 0) {
                timeLine.style.width = timeLine.offsetWidth - 1 + "px";
            } else {
                //结束时刻
                //清除计时器
                clearInterval(timeLineTimer);
                clearInterval(wolfTimer);

                //出现结束语
                endMenu.innerHTML = "game over!<br/>你的得分是:" + fraction.innerHTML
                endMenu.style.display = "block";
                //出现重新开始
                reloadBtn.style.display = "block";
                //重新开始
                reloadBtn.onclick = function() {
                    window.location.reload();
                }
            }
        }, 200);
    });
}

wolfHouse.js

//分数
fraction = document.getElementById("fraction");
需要 登录 才可以提问哦
头像
：
回复