2018-06-25

踩黑白块

大家好,现在随着手机和电脑的广泛的应用,手机和电脑似乎已经成了不可分割的一部分,那么我们在生活中多多少少都会玩过小游戏,或者有的小伙伴们喜欢打网游,今天我就给大家介绍一个踩黑白块的小游戏,这个代码是如何实现的呢,让我们先来看一下效果图;
2018-06-25_214842.png

](https://upload-images.jianshu.io/upload_images/12852423-ca12a1f179ae3e48.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://upload-images.jianshu.io/upload_images/12852423-6845e41d79dfeb1c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这里都是用纯div生成的,没有用到图片,究竟是怎么实现的这种效果呢,让我们来看一下下面的代码;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#cont {
margin-top:100px;
width: 400px;
height: 400px;
border-top:1px solid blue;
position: relative;
/隐藏顶部/
overflow: hidden;
}
#main {
width: 400px;
height: 400px;
/去掉红框/
/* border:1px solid red; */
position: relative;
top:-100px;
}
.row {
height: 100px;
}
.row div {
width: 98px;
height: 98px;
border:1px solid gray;
float: left;
}
.black {
background: black;
}
</style>
</head>
<body>
<input type="text" id="fen" value="0" disabled>
<div id="cont">
<div id="main"></div>
</div>
</body>

<script>
function Youxi(){
// 获取main节点对象
this.main = document.getElementById('main');
this.interval = ''; // 定时器
this.over = false; // 有是否结束的标志
this.sudu = 1; // 初始化下降速度

    // 创建DIV的方法
    this.cdiv = function(classNames){
        // 创建一个div节点对象
        var div = document.createElement('div');
        // 根据传入的值,创建不同class属性的div
        if(classNames){
            div.className = classNames;
        }
        return div;
    }
    //一次生成一行div
    this.crow = function(init){
        var row = this.cdiv('row');
        // 获取0-3的随机数
        var k = Math.floor(Math.random()*4)
        // 每行div根据随机数,随机设置一个黑块
        for(var i=0;i<4;i++){
            // 随机出现黑块
            if(i==k){
                row.appendChild(this.cdiv('black'));
            }else{
                row.appendChild(this.cdiv());
            }
        }
        return row;
    }

    // 初始化运行
    this.init = function(){
        // 循环创建4行,并添加到main中
        for(var i = 0;i<4;i++){
            var row = this.crow();
            this.main.appendChild(row);
        }
        // 绑定点击事件
        this.clicks();
        // 设置定时器,使DIV动起来
        this.interval = window.setInterval('start.move()' , 15);
    }
    
    // 绑定点击事件
    this.clicks = function(){
        // 因为在其他作用域中要使用本对象,
        // 防止this指向冲突,将this赋值给一个新的变量,在其他作用域中使用新的变量代替this
        var that = this;
        // 为整个main绑定点击事件
        this.main.onclick = function(ev){
            // 通过事件对象,获取具体点击的节点
            var focus = ev.target;
            // 如果游戏已经结束了
            if(that.over){
                alert('别挣扎了,游戏已经结束了!');
            }
            // 如果点击的元素有值为black的class属性,
            // 证明用户点击的是黑色块
            else if(focus.className == 'black'){
                // 获取文本框节点对象
                var score = document.getElementById('fen');
                // 将文本框的值获取并加1后重新复制
                var sc = parseInt(score.value)+1;
                score.value = sc;
                // 将黑块变白
                focus.className = '';
                // 如果此行被点击过,给这一行发一个'同行证'
                focus.parentNode.pass = true;
                // 得分每增加5,下降速度提高0.5个像素点
                if(sc%5 == 0){
                    that.sudu += 0.5;
                }

            }else{
                // 点击的不是黑块,结束游戏
                window.clearInterval(that.interval);
                // 游戏已经结束了
                that.over = true;
                alert('游戏已结束')
            }
        }
    }

    // 每调用一次 main 的top值加2像素,main就会向下移动2像素
    // 我们只需要不断调用move,就会让main不断下降
    this.move = function(){
        // 获取top值
        var t = getComputedStyle(this.main, null)['top'];
        var tops = parseInt(t);
        // 如果tops大于1,证明一行下降结束
        if(tops>1){
            // 如果此行没有通行证,游戏结束
            if(this.main.lastChild.pass==undefined){
                window.clearInterval(this.interval);
                // 游戏已经结束了
                this.over = true;
                alert('游戏已结束')
            }else{ // 如果有通行证
                // 如果大于5行,删除最后一行
                if(this.main.children.length>=5) {
                    this.main.removeChild(this.main.lastChild);
                }
            }
            // 下降结束一行,则在最顶部增加一行,完成下降的连续性
            var row = this.crow();
            this.main.insertBefore(row,this.main.firstChild);
            // 并重新隐藏新加的一行
            this.main.style.top = '-100px';
        }else{
            // 定时器每调用一次,top 值修改一次
            // 完成下降动作
            this.main.style.top = tops + this.sudu +'px';
        }
    }
}

var start = new Youxi();
start.init();

</script>
</html>

我们对它进行了简单的封装,使其更有耦合性,根据上面的注释,我们实现的思路是:

整体思路:

先玩几次,思考大概的实现思路;

1:创建基本的静态页面;

2:让div动起来

3:动态创建Div

4:动起来后,填补缺失的div

5:随机创建黑块

6:绑定点击事件

7:点击判断输赢

8:游戏结束后的限制处理

9:黑块触底的处理

10:加分

11:加速

注意变量作用域和this指向的问题

insertBefore、firstChild、getComputedStyle、appendChild、createElement、Math.random、Math.floor

1(1)创建一个初始化运行的方法:循环生成4行div,为了使其用户体验更好,我们先生成4行div这样只要一点开浏览器,立马就会生成4行白块,这里是一个小技巧;(2)生成一个控制器,用来控制开始移动的方法;(3)生成一个点击事件
2(1)根据逻辑,我们先写循环创建一个div(2)在封装一次生成一行div
3(1)再写出move,根据我们的注释理清楚逻辑关系;

编程使我更快乐.
有兴趣的同学记得关注一波呗!
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 230,182评论 6 543
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 99,489评论 3 429
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 178,290评论 0 383
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 63,776评论 1 317
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 72,510评论 6 412
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,866评论 1 328
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,860评论 3 447
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 43,036评论 0 290
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 49,585评论 1 336
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 41,331评论 3 358
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 43,536评论 1 374
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 39,058评论 5 363
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,754评论 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 35,154评论 0 28
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 36,469评论 1 295
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 52,273评论 3 399
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 48,505评论 2 379

推荐阅读更多精彩内容

  • 1、Activity生命周期? onCreate() -> onStart() -> onResume() -> ...
    王培921223阅读 2,400评论 0 11
  • 效果图 代码 首先我们看布局文件 布局文件很简单,主要就是使用了一个StackView,这里我们给它加了一个属性l...
    王培921223阅读 1,012评论 0 0
  • 专业考题类型管理运行工作负责人一般作业考题内容选项A选项B选项C选项D选项E选项F正确答案 变电单选GYSZ本规程...
    小白兔去钓鱼阅读 9,048评论 0 13
  • 久未遇的落雪 难得的染白了这一片红泥黑瓦 以雪作别,似要化了那一片的离愁 遥望 看那纷纷洒洒的豪情 似一杯烈酒 欲...
    飒南阅读 294评论 0 1
  • 我希望我说的每一句话你都能听得见。 2016年8月2日 外公的手机坏了,这已经是这半年里摔坏的第三个手机了。从老人...
    段童阅读 195评论 0 0