java做别踩白块儿小游戏代码_原生JS实现别踩白块小游戏（一）

点击蓝字关注我们！每天获取最新的编程小知识！

源 / php中文网      源 / www.php.cn

对于前端开发人员来说，闲暇之余自己开发个小游戏打发时间，也是对自己基础技术的一种应用考验。那么别踩白块小游戏，相信大家并不陌生，这个小游戏我们可以通过原生js来实现，即便是前端初学者也可以轻松完成。

(视频版请点击本文末尾左下角：

下面我们就给大家分享一个原生js实现别踩白块小游戏的方法。

代码实例如下：

"en">

    "UTF-8">

    Title

 * {

        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;

 }

class="box">

    

"cont">

        

"go">

            点击开始

        

"main">

    

"count">

 var main = document.getElementById('main')

    go = document.getElementById('go')

    count = document.getElementById('count');

 cols = ['#1AAB8A', '#E15650', '#121B39', '#80A84E'];

 function CDiv(classname) {

        var Div = document.createElement('div')

        index = Math.floor(Math.random() * 4)

        Div.className = classname

        for (var i = 0; i < 4; i++) {

            var iDiv = document.createElement('div')

            Div.appendChild(iDiv)

        }

        if (main.children.length == 0) {

            main.appendChild(Div);

 } else {

            main.insertBefore(Div, main.children[0]);

 }

        Div.children[index].style.backgroundColor = cols[index];

 Div.children[index].className = "i";

 }

    function move(obj) {

        //默认速度与计分

 var speed = 5, num = 0;

 obj.timer = setInterval(function () {

            //速度

 var step = parseInt(getComputedStyle(obj, null)['top']) + speed;

 obj.style.top = step + 'px'

 if (parseInt(getComputedStyle(obj, null)['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 = '游戏结束';

 go.style.display = "block";

 }

                }

                obj.removeChild(obj.children[obj.children.length - 1]);

 }

            //点击与计分

 obj.onmousedown = 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 = '游戏结束';

 go.style.display = "block";

 }

                //盒子加速

 if (num % 10 == 0) {

                    speed++;

 }

            }

            //松开触发停止

 obj.onmouseup = function (event) {

            }

        }, 20)

    }

    go.children[0].onclick = function () {

        if (main.children.length) {

            //暴力清楚main里面所有盒子

 main.innerHTML = '';

 }

        //清空计分

 count.innerHTML = '游戏开始';

 //隐藏开始盒子

 this.parentNode.style.display = "none";

 move(main);

 }

前台效果如下图：

当我们点击开始时，游戏开始。点击有颜色的方块即可得分，并且随着分数的增加，页面方块移动的速度也会加快。

点击到白块时，游戏结束。

本篇文章就是关于原生js实现别踩白块小游戏的方法分享介绍，感兴趣的朋友可以直接复制上述代码，在本地进行测试。那么在后期的文章中，会继续为大家介绍别踩白块小游戏具体的实现方法。