【别踩白块小游戏】

最新推荐文章于 2024-06-21 16:41:46 发布

夜星639

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量4.6k

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_65923595/article/details/123793906

版权

别踩白块小游戏最初由Umoni Studio制作的一款休闲益智游戏，该游戏于2014年上线App Store.下面我们用JS代码模拟这款小游戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/Block.css">
</head>
<body>
    
    <div class="main" id="main">
        <div class="block_box" id="block_box"></div>
        <div class="cover" id="cover">
            <h1>别踩白块</h1>
            <span id="start">开始</span>
        </div>
    </div>
    <script src="./js/Block.js"></script>
    <script type="text/javascript">
        var block_box = document.getElementById('block_box');//获取元素
        var cover = document.getElementById('cover');//获取元素
        var start = document.getElementById('start');//获取元素
        var block = new Block(block_box);//创建对象实例
        block.init();//调用初始化方法
        start.onclick = function(){
            block.start();
            cover.style.display = 'none';
        }
    </script>
</body>
</html>



JS代码
function Block(container){
    this.container = container;  //定义容器div
    this.mainW = this.container.parentNode.clientWidth; //定义父元素宽度
    this.mainH = this.container.parentNode.clientHeight;//定义父元素高度
    this.scale = 1.58;//黑块的高度比
    this.height = parseInt(this.mainW/4*this.scale);//定义黑块高度
    this.top = -this.height; 
    this.speed = 2;//定义速度
    this.maxSpeed = 20;//定义最大速度
    this.timer = null;//定时器id
    this.state = true;//游戏状态
    this.sum = 0;//分数
}
Block.prototype = {
    init:function(){
        var _t = this;
        _t.mark();//显示初始分数
        _t.container.addEventListener("click",function(e){
            if(!_t.state){
                return false;
            }
            e = e || window.event;//获取事件对象
            var target = e.target || e.srcElement;//获取触发事件的元素
            if(target.className.indexOf('block') != -1){
                _t.sum++;//分数加1
                //显示分数
                document.getElementsByClassName("mark")[0].innerHTML = _t.sum;
                target.className = 'blank';//设置类名
            }else{
                _t.state = false;//变量赋值
                clearInterval(_t.timer);//停止移动
                _t.end();//游戏结束
                return false
            }
        })
    },
    mark:function(){
        var oMark = document.createElement("div");//创建div元素
        oMark.className = "mark";//设置类名
        oMark.innerHTML = this.sum;//设置HTML内容
        this.container.parentNode.appendChild(oMark);//添加元素
    },
    addRow:function(){
        var oRow = document.createElement('div');//获取div元素
        oRow.className = 'row';//设置类名
        oRow.style.height = this.height + 'px';//设置元素高度
        var blanks = ['blank','blank','blank','blank'];//定义数组
        var s = Math.floor(Math.random()*4);//获取0-3的随机数
        blanks[s] = "blank block";//为指定下标的数组元素赋值
        var oBlank = null;
        for(var i = 0;i < 4;i++){
            oBlank = document.createElement("div");//创建div元素
            oBlank.className = blanks[i];//设置类名
            oRow.appendChild(oBlank);//添加元素
        }
        var fChild = this.container.firstChild;//获取第一个子元素
        if(fChild == null){
            this.container.appendChild(oRow);//获取末尾添加元素
        }else{
            this.container.insertBefore(oRow,fChild);//在最前面添加元素
        }
    },
    move:function(){
       this.top += this.speed;//设置top值
       this.container.style.top = this.top + 'px';//设置元素位置
    },
    judge:function(){
        var _t = this;
            if(_t.top >= 0){
                _t.top = -this.height;//设置top值
                _t.container.style.top = _t.top + 'px';//设置元素位置
                _t.addRow();//添加一行
            }
            _t.speed = (parseInt(_t.sum/5)+1)*2;//根据单击的黑块总数提高速度
            if(_t.speed >= _t.maxSpeed){
                _t.speed = _t.maxSpeed;//设置移动速度为最大速度
            }
            var blocks = document.getElementsByClassName('block');//获取黑块
            for(var j = 0;j < blocks.length;j++){
                if(blocks[j].offsetTop >= _t.mainH){//如果黑块移动到界面底部
                    _t.state = false;
                    clearInterval(_t.timer);//停止移动
                    _t.end();//游戏结束
                }
            }
    },
    start:function(){
        var _t = this;
        for(var i = 0;i < 4;i++){
            _t.addRow();//添加一行
        }
        _t.timer = setInterval(function(){
            _t.move();//向下移动
            _t.judge();//游戏判断
        },30)
    },
    end:function(){
        var _t = this;
        if(!document.getElementById("result")){
            var result = document.createElement('div');//创建div元素
            result.className = 'result';//设置类名
            result.id = 'result';//设置id
            result.innerHTML = '<h1>GAME OVER</h1><h2 id="score">分数：'+_t.sum+'</h2><span id="restart">重新开始</span>';//设置HTML内容
            _t.container.parentNode.appendChild(result);//添加元素
        }else{
            var result = document.getElementById("result");//获取元素
            result.style.display = "block";//显示元素
            var score = document.getElementById("score");//获取元素
            score.innerHTML = "分数:" + _t.sum;//设置HTML内容
        }
        var restart = document.getElementById("restart");//获取元素
        restart.onclick = function(){
            _t.again();//重新开始游戏
            result.style.display = "none";//隐藏元素
            return false;
        }
    },
    again:function(){
        this.mainW = this.container.parentNode.clientWidth;//定义父元素宽度
        this.mainH = this.container.parentNode.clientHeight;//定义父元素高度
        this.scale = 1.58;//黑块的高度比
        this.height = parseInt(this.mainW/4*this.scale);//定义黑块高度
        this.top = -this.height;
        this.speed = 2;//定义速度
        this.timer = null;//定时器id
        this.state = true;//游戏状态
        this.sum = 0;//分数
        var _t = this;
        _t.container.innerHTML = "";//清空HTML内容
        document.getElementsByClassName('mark')[0].innerHTML = _t.sum;//显示初始分数
        _t.start();//开始游戏
    },
}


CSS代码

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a,
img {
    border: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font: 12px/180% Arial, Helvetica, sans-serif, "微软雅黑";
}

.main {
    position: relative;
    margin: 10px auto;
    max-width: 380px;
    height: 600px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.ph-main {
    width: 100%;
    height: 100%;
    position: relative;
    border: none;
    margin: auto;
    overflow: hidden;
}

.block_box {
    position: absolute;
    top: -150px;
    width: 100%;
    height: auto;
}

.row {
    width: 100%;
    height: 150px;
}

.blank {
    float: left;
    width: 93px;
    height: 100%;
    background-color: #fff;
    border: 1px solid #000000
}

.block {
    background: #000000;
    cursor: pointer;
}

.mark {
    position: absolute;
    width: 40px;
    height: 20px;
    background-color: #e8e8e8;
    border-radius: 50%;
    top: 10px;
    left: 50%;
    margin-left: -20px;
    text-align: center;
    line-height: 20px;
    z-index: 1;
}

.cover,
.result {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    z-index: 2;
}

.cover h1,
.result h1 {
    color: #fff;
    height: 50px;
    line-height: 50px;
    font-family: '微软雅黑';
    margin-top: 35%;
}

.cover span,
.result span {
    display: block;
    width: 100px;
    height: 50px;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    margin: 50px auto;
    background: #6cd966;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    -webkit-box-shadow: 1px 1px 1px #999;
    box-shadow: 1px 1px 1px #999;
    text-shadow: 1px 1px 1px #fff;
}

.result h2 {
    color: #fff;
    height: 45px;
    line-height: 45px;
    font-family: '微软雅黑';
}

夜星639

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【别踩白块小游戏】

别踩白块小游戏最初由Umoni Studio制作的一款休闲益智游戏，该游戏于2014年上线AppStore.下面我们用JS代码模拟这款小游戏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo.
复制链接

扫一扫