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

<!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. Angular2 - 概述

    *Hi DAI, 我想学习 Angular2, 我应该怎么开始? 关于学习 Angular2, 我认为你应该按照下面的列表 概述: 在您为 Angular2 应用程序编写第一个代码之前, 这将为您提供 ...

  2. RHEL7 网卡绑定

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

  3. OSI模型和TCP/IP协议族(一)

    1990年以前,再数据通信和组网文献中占主导地位的分层模型是开放系统互连(Open System Interconnnection,OSI)模型.当时所有人都认为OSI模型将是数据通信的最终标准,然而 ...

  4. 利用CVE-2017-11882拿到持久性shell

    利用CVE-2017-11882拿到持久性shell 近日微软又爆出一个严重漏洞,利用该漏洞可以直接拿到目标机shell.这么好玩的东西怎么能错过了,于是搭建环境复现了一把. 首先去GitHub上下载 ...

  5. Asp.Net MVC 实现将Easy-UI展示数据下载为Excel 文件

    在一个项目中,需要做一个将Easy-UI界面展示数据下载为Excel文件的功能,经过一段时间努力,完成了一个小Demo.界面如下: 但按下导出Excel后,Excel文件将会下载到本地,在office ...

  6. 如约而至，Java 10 正式发布！

    3 月 20 日,Oracle 宣布 Java 10 正式发布. 官方已提供下载:http://www.oracle.com/technetwork/java/javase/downloads/ind ...

  7. git使用.gitignore设置不生效或不起作用的问题

    偶然遇到的问题,记录如下: 通常我们在push项目时,会有些配置文件或本地文件不想上传到服务器上 这时候我们会通过设置.gitignore  文件 一般设置成这样: # 20170418 by 51a ...

  8. JAVA常见简答题

    一.基础知识 1．简述使用文本编辑器和 JDK 创建并运行 Java 应用程序的基本步骤. 答:①打开文本编辑器输入 Java 源程序: ②保存文件,文件名为源程序中 public 修饰类的类名,扩展 ...

  9. 多进程浏览器、多线程页面渲染与js的单线程

    线程与进程 说到单线程,就得从操作系统进程开始说起.在早期的操作系统中并没有线程的概念,进程是能拥有资源和独立运行的最小单位,也是程序执行的最小单位.任务调度采用的是时间片轮转的抢占式调度方式,而进程 ...

  10. [poj3349]Snowflake Snow Snowflakes_hash

    Snowflake Snow Snowflakes poj-3349 题目大意:给出n片雪花,每片雪花有6个角,每个角有一个权值.如果两片雪花中能够各选出一个点,使得从该点顺时针或者逆时针转,得到的权 ...