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

<!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. SQL Server将自己的查询结果作为待查询数据子列之一

    嵌套子查询是SQL语句中比较常用的一种查询方法,开发过程中遇到查询需要将自己的某列作为待查询的数据,在参考别人的SQL语句的写法终于实现了自己需要的功能. 查询语句如下: SELECT DISTINC ...

  2. leetcode【14题】Longest Common Prefix

    题目:Longest Common Prefix 内容: Write a function to find the longest common prefix string amongst an ar ...

  3. repo 和git的用法

    1. 服务器版本下载: repo init -u git@192.168.1.11:i700t_60501010/platform/manifest.git-b froyo_almond -m M76 ...

  4. 2018-3 WebStorm最新版本破解方法

    今天重新打开WebStorm发现之前输入的License Server没法用了,不能通过WebStorm的检测,搜索良久,终于找到了最新版本WebStorm的破解方法. 在激活页面选择License ...

  5. PAT乙级-1056. 组合数的和(15)

    给定N个非0的个位数字,用其中任意2个数字都可以组合成1个2位的数字.要求所有可能组合出来的2位数字的和.例如给定2.5.8,则可以组合出:25.28.52.58.82.85,它们的和为330. 输入 ...

  6. c++中回调函数和函数指针的使用

    #include "stdafx.h" #include <iostream> //#include <string> using namespace st ...

  7. Unity服务端链接MySQL数据库

    链接数据库,可以分为以下几个流程: 链接MySQL(数据库地址.端口.用户名.密码) 选择数据库 执行sql语句 关闭数据库 转换为代码如下: using System; using MySql.Da ...

  8. angularJS前台传list数组，后台springMVC接收数组

    有时候需要在前台自定义对象,然后把对象封装在list中,在传送到后台,这样的思想也比较合理 1. 前台代码 $scope.saveScore = function () { $scope.userSc ...

  9. 笔记：Maven 聚合和继承

    聚合模块 我们希望一次构建两个或更多项目,而不是到每个模块的目录下分别执行mvn命令,Maven 聚合这一特性就是为该需求服务的, 为了使用聚合,我们必须创建一个聚合模块,通过该模块与其他项目聚合,并 ...

  10. Java DualPivotQuickSort 双轴快速排序 源码 笔记

    DualPivotQuicksort source code 这个算法是Arrays.java中给基本类型的数据排序使用的具体实现.它针对每种基本类型都做了实现,实现的方式有稍微的差异,但是思路都是相 ...