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

<!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. java抽象类注意问题

    当知道一个类的子类将不同的实现某个方法时,把该类声明为抽象类很有用,可以共用相同的父类方法,不必再定义. 抽象类和抽象方法的关系:含有抽象方法的类一定是抽象类,抽象类里不一定含有抽象方法. 抽象类存在 ...

  2. IM-iOS退出后台接受消息，app退出后台能接收到推送

    App被失活状态的时候可以走苹果的APNS:但是在活跃的时候却接受不到推送! 那就用到本地推送:UILocalNotification 消息神器. 处理不好可能会有很多本地推送到来,那么问题来了要在什 ...

  3. QTcreator打包发布可运行程序（基于QT5.7）

    完成C++界面程序后,我们还需要对程序进行Release,然后进行打包,才可以直接运行.我在这期间绕了一个大弯,现在记录下来我的做法供参考. 正确步骤 第一步:将构建程序改为Release,然后构建项 ...

  4. object转字符串

    1.obj.tostring() obj为空时,抛异常. 2.convert.tostring(obj) obj为空时,返回null: 3.(string)obj obj为空时,返回null:obj不 ...

  5. 读取超大Excel（39万行数据）

    有个学长需要处理Excel数据,Excel数据共有39W,将数据读取后处理并导出数据.最开始尝试了 NPOI ,发现NPOI 并不能完成该项任务,随后尝试引用的com组件:Microsoft.Offi ...

  6. IntelliJ IDEA 源值1.5已过时，将在未来所有版本中删除

    1. 修改Maven的Settings.xml文件添加如下内容 <profile> <id>jdk-1.8</id> <activation> < ...

  7. NGINX详解

    目录 1.    基础概念    1 2.    版本选择    1 3.    服务安装    1 4.    模块说明    1 5.    配置说明    1 5.1    目录结构    1 ...

  8. ECMAScript 6入门 - 变量的解构赋值

    定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...

  9. 二分查找的变种(Java实现)

    普通二分查找: 先回顾一下普通的二分查找 注意:二分查找有这样一个问题:当数组中数有重复时,比如 {3,3,3,3} 这个数组,二分查找3时,返回的是arr[1],也就是说二分查找并不会返回3第一次出 ...

  10. Spring容器中Bean的生命周期