原生JS实现《别踩白块》游戏,兼容IE

hulan 发布于 07-30 22:50 浏览:43 类型:原创 - 随笔 分类:HTML/CSS - comment 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            *{ margin: 0; padding: 0; } 
            .box {
                margin: 50px auto 0 auto;
                width: 400px;
                height: auto;
                border:  solid 1px #222;
            }  
            #cont {             
                width: 400px;
                height: 600px;              
                position: relative;
                overflow: hidden;

            }
            #go {
                width: 100%;
                height: 600px;
                position: absolute;
                top: 0;
                font: 700 60px '微软雅黑';
                text-align: center;             
                z-index: 99;
            }
            #go span {
                cursor: pointer;
                background-color: #fff;
                border-bottom:  solid 1px #222;
            }
            #main {

                width: 400px;
                height: 600px;
                position: relative;
                top: -150px;
            }
            .row {
                width: 400px;
                height: 150px;
            }
            .row div {
                width: 99px;
                height: 149px;
                border: solid 1px #222;
                float: left;
                border-top-width: 0;
                border-left-width: 0;
                cursor:  pointer;
            }
            #count {
                border-top: solid 1px #222;
                width: 400px;
                height: 50px;
                font: 700 36px/50px '微软雅黑';
                text-align: center;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <!-- 布局 -->       
        <div id="cont"> 
            <div id="go">
                <span>Game start</span>      
            </div>            
            <div id="main">
            </div>
        </div> 
        <div id="count"></div>
    </div>                        
    </body>
    <script>
        //得当前样式
        function getStyle(obj,arrt){
            //兼容IE
            return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
        }
        var main = document.getElementById('main');
        var go = document.getElementById('go');
        var count = document.getElementById('count');
        var cols = ['#1AAB8A','#E15650','#121B39','#80A84E'];
        //动态创建div
        function cDiv(classname){
            //创建div
            var oDiv = document.createElement('div');
            //随机值
            var index = Math.floor(Math.random()*4);
            //行 添加相应的class类
            oDiv.className = classname; 
            //创建行之后再动态创建4个小div并添加到行里面               
            for(var j =0;j<4;j++){
                var iDiv = document.createElement('div');                           
                oDiv.appendChild(iDiv);                     
            }
            //然后把行添加到main里面
            //判断需要添加的位置
            if(main.children.length == 0){
                main.appendChild(oDiv);
            }else {
                main.insertBefore(oDiv, main.children[0]);
            }           
            //随机给行里面的某一个div添加背景色        
            oDiv.children[index].style.backgroundColor = cols[index];
            //标记颜色盒子
            oDiv.children[index].className = "i";
        }
        //移动div
        function move(obj){
            //关闭上一个定时器
            clearInterval(obj.timer);
            //默认速度与计分
            var speed = 5,num = 0;
            //定时器管理与开启定时器
            obj.timer = setInterval(function(){
                //速度            
                var step = parseInt(getStyle(obj,'top')) + speed;
                //移动盒子
                obj.style.top =  step + 'px';
                //判断并创建新的盒子
                if(parseInt(getStyle(obj,'top')) >= 0){                   
                    cDiv('row');
                    obj.style.top =  -150 + 'px';
                }

                //删除边界外的盒子
                if(obj.children.length == 6){
                    //删除前,如果有盒子没有点击则结束游戏
                    for(var i = 0;i<4;i++){
                        if(obj.children[obj.children.length - 1].children[i].className == 'i'){
                            //游戏结束
                            obj.style.top = '-150px';
                            count.innerHTML = '游戏结束,最高得分: ' + num;
                            //关闭定时器
                            clearInterval(obj.timer);
                            //显示开始游戏
                            go.children[0].innerHTML = 'Renew game';
                            go.style.display = "block";                            

                        }
                    }                   
                    obj.removeChild(obj.children[obj.children.length - 1]);
                }
                //点击与计分
                obj.onclick = function(event){
                    //点击的不是白盒子  
                    // 兼容IE
                    event = event || window.event;
                    if((event.target? event.target : event.srcElement).className == 'i'){
                        //点击后的盒子颜色
                        (event.target? event.target : event.srcElement).style.backgroundColor = "#bbb";
                        //清除盒子标记
                        (event.target? event.target : event.srcElement).className = '';
                        //计分
                        num++;
                        //显示得分
                        count.innerHTML = '当前得分: ' + num;
                    }else {
                        //游戏结束
                        obj.style.top = 0;
                        count.innerHTML = '游戏结束,最高得分: ' + num;
                        //关闭定时器
                        clearInterval(obj.timer);
                        //显示开始游戏
                        go.children[0].innerHTML = 'Renew game';
                        go.style.display = "block";

                    }
                    //盒子加速
                    if(num%20 == 0){
                        speed++;
                    }

                }                           
            },20) 
        } 
        //开始游戏
        go.children[0].onclick = function(){
            //开始前判断main里面是否有盒子,有则全部删除
            if(main.children.length){
                //暴力清楚main里面所有盒子
                main.innerHTML = '';
            }
            //清空计分
            count.innerHTML = '游戏开始';           
            //隐藏开始盒子
            this.parentNode.style.display = "none";
            //调用定时器
            move(main);
        }   

    </script>
</html>

 

标签:
z
给个赞 7 人点赞
收藏 0 人收藏
hulan 作者

这家伙什么都没留下

作者最新