用javascript做别踩白块游戏2

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

<!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的更多相关文章

用javascript做别踩白块游戏1
初学Javascript做的一个别踩白块小游戏,代码简陋,如下: <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --&g ...
ios-高仿别踩白块游戏的实现
先看下效果图片前几天看到一个游戏叫别踩白块,下载量还挺大几百万了都,下载下来玩了玩看了看,这个游戏还挺简单的.俗话说想一千遍,一万遍不如动手做一遍来的实在.昨晚以及今天白天闲的没事就开搞了,下午六点 ...
jquery之别踩白块游戏的实现
转载请注明出处http://www.cnblogs.com/Wxtrkbc/p/5687112.html 前端学习要告一段落了,也没机会写什么像样的东西,然后无意中想起某人以前给我玩了一下别踩白块的游 ...
C++用EGE简单实现别踩白块游戏
本项目已开源:https://github.com/wmpscc/AvoidBlank 关于EGE 介绍:EGE(Easy Graphics Engine),是windows下的简易绘图库,是一个类似 ...
JS实现别踩白块小游戏
最近有朋友找我用JS帮忙仿做一个别踩白块的小游戏程序,但他给的源代码较麻烦,而且没有注释,理解起来很无力,我就以自己的想法自己做了这个小游戏,主要是应用JS对DOM和数组的操作. 程序思路:如图:将游 ...
cocos2dx游戏开发——别踩白块学习笔记（二）——经典模式的实现
一.创建GameScene以及GameLayer 就是简单创建一个Scene而已,在此就不多说啦~,可以参照我的打飞机的学习笔记(2). 二.添加一个开始栏很简单,就是调用Block中的create ...
jquery 简单的别踩白块小游戏
写写简单的东西,效果如图: 1.html代码 <div class="warp"> <div class="title"> <h3 ...
Cocos2d-x 3.2 之别踩白块（第三篇）
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
别踩白块儿游戏源码Android版
这个项目有带说明文档,大家可以看看源码附件的说明文档吧,“别踩白块儿”是目前非常火的一款游戏,游戏非常简单刺激.关于具体怎么火法怎么玩我就不多说了,相信看到本文的朋友们都非常地清楚. 什么游戏火,我们 ...

随机推荐

handsontable自定义渲染
本文主要介绍在使用Handsontable过程中,对加载的数据进行字体颜色.样式(style).数据格式化,对齐方式的处理,并添加自定义图片和单机事件功能. 代码如下: <!DOCTYPE ht ...
Attrib +s +a +h +r 隐藏文件原理与破解
制作了一个PE启动盘,不过这个启动盘不能深度隐藏,否则没效果,可以又想不让别人看见PE启动盘的一些内容,防止别人误删或者修改,于是就想找一种可以隐藏文件的方法,普通的隐藏文件的方法如下:
null和undefined的异同
相同点: 都表示值得空缺,二者往往可以互换,用“==”相等运算符判断两个是相等的,要用“===”判断. 在希望值是布尔类型的地方,他们的值都是假值,和“false”类似. 都不包含属性和方法. 使用& ...
WBS
Need 需求分析: 为了满足中老年人因工作忙碌而无暇阅读的痛苦,我们设计推广出一款听书软件.可以给中老年人带来的好处是不再受繁琐的听书软件的束缚,操作简单,携带便捷. Approach 实现方法: ...
Linux新手的最佳包管理器
一个 Linux 新用户应该知道他或她的进步源自于对 Linux 发行版的使用,而 Linux 发行版有好几种,并以不同的方式管理软件包. 在 Linux开发中,包管理器非常重要,知道如何使用多种包 ...
SpringtMVC中配置 <mvc:annotation-driven/> 与 <mvc:default-servlet-handler/> 源码解析
上一篇有提到,当有.无这两个标签时,SpringtMVC 底层所采用的 HandlerMapping 以及 HandlerAdapter 是不一样的.现在就来进行源码调试,揭开 SpringtMVC ...
javascript中函数的闭包自调用
话不多说, 直接上代码 // 定义一个变量outerParam, 然后使用一个闭包函数给该变量初始化var outerParam = (function testClosure(param) { // ...
Servlet的三个域对象
我们在开发javaweb项目的时候,经常会遇到jsp和Servet之间互相传值,既然有传值,就要有对象来传,这里先说Servlet的三大域对象,request,session,application他 ...
Java基本包装类型
基本类型的对象包装,也就是将常用的基本数据类型包装成对象 byte Byte short Short int Integer long Long boolean Boolean float Float ...
java 5并发中的阻塞队列ArrayBlockingQueue的使用以及案例实现
演示一个阻塞队列的使用 public class BlockingQueueTest { public static void main(String[] args) { //创建一个包含三个元素的阻 ...

用javascript做别踩白块游戏2

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

随机推荐

热门专题