这一次做一个好一点的，要求黑块自动下落，且速度逐渐加快

<!DOCTYPE html>

<html>

<head>

<!-- 禁用缩放功能 -->

<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>别踩白块2</title>

<style type="text/css">

    table{

        border: solid 5px;

        border-spacing: 0px;

        border-collapse: 0px;

        margin: auto;

        background-color: #FFF;

    }

    td{

        width: 80px;

        height: 100px;

        border: solid 1px;

    }

    .bgcolor{

        background: black;

    }

    #tr6 td{

        height: 0px;

        border: 0px;

    }

</style>

</head>

<body style="background: #008694; margin: 0px;">

    <div id="div1">

    <table>

        <caption style="font-size: 20px;">分数：<input id="text1" type="text">

        别踩白块

        </caption>

        <tr>

            <td></td><td></td><td></td><td></td>

        </tr>

        <tr>

            <td></td><td></td><td></td><td></td>

        </tr>

        <tr>

            <td></td><td></td><td></td><td></td>

        </tr>

        <tr id="tr5">

            <td></td><td></td><td></td><td></td>

        </tr>

        <tr>

            <td onmousedown="onMouthEvent(this)"></td>

            <td onmousedown="onMouthEvent(this)"></td>

            <td onmousedown="onMouthEvent(this)"></td>

            <td onmousedown="onMouthEvent(this)"></td>

        </tr>

        <tr id="tr6">

            <td></td><td></td><td></td><td></td>

        </tr>

    </table>

    </div>

    <div style="margin: auto; width: 340px; height: 40px; text-align: center;">

        <b style="font-size: 30px;">点击黑块开始游戏</b><br>

        注：方块的下落速度会越来越快，还没有人能突破300分,是时候表演真正的技术了！！！

        <!-- <input style="width: 150px; height: 40px;" type="button" value="开始" onclick="run()">

        <input style="width: 150px; height: 40px;" type="button" value="暂停" onclick="clearInterval(x)"> -->

    </div>

<script type="text/javascript">

    var inti;

    var count = 0;

    var oTextNode = document.getElementById("text1");

    function run(count) {

        var inti = setInterval(moveDown, 400-count*10);

        return inti;

    }

    //为方块初始化随机黑块

    function getShuiJiKuai(){

        var oTrNode = document.getElementsByTagName("tr");

        for(var i = 0; i < oTrNode.length - 1; i++){

            var randonNum = Math.floor(Math.random()*4);

            (oTrNode[i].children[randonNum] || oTrNode[i].childNodes[randonNum]).className = "bgcolor";

        }

    }

    getShuiJiKuai();

    function moveDown() {

        var oTrNode = document.getElementsByTagName("tr");

        //向下移动

        for(var i = oTrNode.length - 1; i > 0; i--){

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

                (oTrNode[i].children[j] || oTrNode[i].childNodes[j]).className = (oTrNode[i-1].children[j] || oTrNode[i-1].childNodes[j]).className;

                if((oTrNode[5].children[j] || oTrNode[5].childNodes[j]).className == "bgcolor"){

                    endGame();

                    return ;

                }

            }

        }

        //第一行清空

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

            (oTrNode[0].children[k] || oTrNode[0].childNodes[k]).className = "";

        }

        //第一行赋值

        var randonNum = Math.floor(Math.random()*4);

        (oTrNode[0].children[randonNum] || oTrNode[0].childNodes[randonNum]).className = "bgcolor";

    }

    function onMouthEvent(event) {

        var oTrNode = event.parentNode;

        //如果点击的是黑色方块

        if(event.className == "bgcolor"){

            clearInterval(inti);

            this.inti = run(count);

            event.className = "";

            count++;

            oTextNode.value = count;

        }else{

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

                if((oTrNode.children[k] || oTrNode.childNodes[k]).className == "bgcolor"){

                    endGame();

                    return ;

                }

            }

        }

        //最后一行有黑块没被点到

        /* var oTrNode = document.getElementsByTagName("tr");

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

            if(oTrNode[4].children[y] || oTrNode[4].childNodes[y]).className == "bgcolor"){

                alert("游戏结束,你的分数为："+count);

            }

        } */

    }

    function endGame() {

        clearInterval(inti);

        alert("游戏结束,你的分数为："+count);

        count = 0;

        oTextNode.value = count;

    }

    //onMouthEvent();

</script>

</body>

</html>

响应点击事件并没有用onclick而是用的onmouthdown,onclick是鼠标点击按下并松开才响应，而onmouthdown在鼠标点击按下时就响应了，他的响应速度更快

手感不太好，尤其是用手机测试的时候，我想到的几个解决办法
1：添加一块公共点击面积，即两列之间添加一个公共区域，避免点击在线条中间的时候无效，更易于增强点击的精确性，
2：增加向下滑动时各行之间的衔接性，一次只下移一小段距离

用javascript做别踩白块游戏2的更多相关文章

  1. 用javascript做别踩白块游戏1

    初学Javascript做的一个别踩白块小游戏,代码简陋,如下: <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --&g ...

  2. ios-高仿别踩白块游戏的实现

    先看下效果图片 前几天看到一个游戏叫别踩白块,下载量还挺大几百万了都,下载下来玩了玩看了看,这个游戏还挺简单的.俗话说想一千遍,一万遍不如动手做一遍来的实在.昨晚以及今天白天闲的没事就开搞了,下午六点 ...

  3. jquery之别踩白块游戏的实现

    转载请注明出处http://www.cnblogs.com/Wxtrkbc/p/5687112.html 前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游 ...

  4. C++用EGE简单实现别踩白块游戏

    本项目已开源:https://github.com/wmpscc/AvoidBlank 关于EGE 介绍:EGE(Easy Graphics Engine),是windows下的简易绘图库,是一个类似 ...

  5. JS实现别踩白块小游戏

    最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游 ...

  6. cocos2dx游戏开发——别踩白块学习笔记（二）——经典模式的实现

    一.创建GameScene以及GameLayer 就是简单创建一个Scene而已,在此就不多说啦~,可以参照我的打飞机的学习笔记(2). 二.添加一个开始栏 很简单,就是调用Block中的create ...

  7. jquery 简单的别踩白块小游戏

    写写简单的东西,效果如图: 1.html代码 <div class="warp"> <div class="title"> <h3 ...

  8. Cocos2d-x 3.2 之 别踩白块（第三篇）

    ***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...

  9. 别踩白块儿游戏源码Android版

    这个项目有带说明文档,大家可以看看源码附件的说明文档吧,“别踩白块儿”是目前非常火的一款游戏,游戏非常简单刺激.关于具体怎么火法怎么玩我就不多说了,相信看到本文的朋友们都非常地清楚. 什么游戏火,我们 ...

随机推荐

  1. 详解QT5.10.0搭载OpenCV3.4.0环境配置步骤说明

    一.准备工作: 1下载Qt5.10.0 和 Qt Creator 4.5.0软件(http://download.qt.io/official_releases/qt/) 2.下载opencv3.40 ...

  2. CSS备战春招の二

    CSS:层叠样式表 CSS注释形式:/*  */ class 选择器有别于id选择器,class可以在多个元素中使用 id属性不要以数字开头,以数字开头在特定浏览器中不起作用 类名的第一个字符不要使用 ...

  3. RHEL7 网卡绑定

     //bond(主要用于6系统) nmcli connection add type bond mode balance-rr con-name bond0 ifname bond0 ipv4.met ...

  4. Python之list列表方法详解

    # 列表test = [11, 22, 33, 44, 55, 22]# append方法,在test列表末尾增加一个元素# append(self, p_object) 参数:p_object:待添 ...

  5. EXCEL VLOOKUP函数怎么返回多列结果

    一般VLOOKUP函数只能返回一列的结果,本例介绍如何一次性返回多列结果.   工具/原料   Excel 函数使用方法说明:     首先,原始数据包括姓名.工号.性别和籍贯信息.现在需要根据姓名同 ...

  6. VS 2017 开发安卓环境搭建 问题总结

    VS 2017可以开发安卓啦,之前一直想尝试开发安卓,但是由于时间忙, Java只学了个基础,不如C#熟练所以一直没有机会接触安卓开发.既然需要利用VS2017开发安卓,那么第一步就是了解VS2017 ...

  7. MapReduce浅析

    很早之前就用过Hadoop,但对MapReduce中的具体数据流向过程一直不甚明了,用Python Streamming的方式写了几个MapReduce,对这个过程有了一定的认识. 首先我们知道,Ma ...

  8. openlayers渲染mapbox gl的vector tile

    准备条件 https://openlayers.org/en/v4.6.5/build/ol.js https://cdn.polyfill.io/v2/polyfill.min.js DEMO &l ...

  9. POJ1331 Multiply(strtol函数练习)

    题目链接:http://poj.org/problem?id=1331 主要介绍strtol函数: long int strtol(const char *nptr,char **endptr,int ...

  10. 读headFirst设计模式 - 工厂模式

    每次写博客都不知道要怎么引入要写的主题,挺头疼的一件事.今天就直接开门见山,今天要学的就是工厂模式,工厂就是批量生产制造东西的地方.在这里,工厂就是批量生产对象的地方. 学习书上的例子 假如你现在有一 ...