初学Javascript做的一个别踩白块小游戏，代码简陋，如下：

 <!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>别踩白块</title>

 <style type="text/css">

     table{

         border: solid 5px;

         border-spacing: 0px;

         margin: auto;

         background-color: #FFF;

     }

     td{

         width: 80px;

         height: 100px;

         border: solid 1px;

     }

     .bgcolor{

         background: black;

     }

 </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>

             <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>

     </table>

     </div>

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

         <b>点击黑块开始游戏</b>

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

         <input style="width: 150px; height: 40px;" type="button" value="暂停"> -->

     </div>

 <script type="text/javascript">

     function getShuiJiKuai(){

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

         for(var i = 0; i < oTrNode.length; 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;

             }

         }

         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";

     }

     //setInterval(moveDown, 500);

     var count = 0;

     function onMouthEvent(event) {

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

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

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

             moveDown();

             count++;

             oTextNode.value = count;

         }else{

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

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

             count = 0;

             oTextNode.value = "";

         }

     }

     //onMouthEvent();

 </script>

 </body>

 </html>

　　点击之后，黑块才能往下落，只能在最后一行点击

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

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

    这一次做一个好一点的,要求黑块自动下落,且速度逐渐加快 <!DOCTYPE html> <html> <head> <!-- 禁用缩放功能 --> &l ...

  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. 'net’ 不是内部命令或外部命令，也不是可运行的程序或批处理文件

    我的电脑-->属性-->高级-->环境变量 path的变量值新加: %SystemRoot%\system32 修改完成后,需要重新打开cmd命令行,否则不会生效的.

  2. c# redis 操作类库推荐：StackExchange.Redis.Extensions

    StackExchange是一个优秀的c# redis客户端,但是存在操作略为繁琐的弊端,为了简化操作,使用 StackExchange.Redis.Extensions成为了一个非常值得推荐的选择. ...

  3. Canvas 画布组件（官网翻译）

    Canvas画布 The Canvas is the area that all UI elements should be inside. The Canvas is a Game Object w ...

  4. 使用证书创建request请求

    之前写过的程序,都是普通http request. 这是第一次使用,记录下. private static X509Certificate2 GetCert(string certId,StoreLo ...

  5. 黄金K线理论简述

    黄金K线理论简述 [Ⅰ]． 隐藏在K线背后的多空搏杀 黄金K线的多空搏杀理论,说到底,其核心就是研判K线时,必须从多空搏杀的角度去认知,否则仅仅从表面到表面,是无法掌握K线精髓的.具体来说,多方和空方 ...

  6. fail2ban防止SSH暴力破解

    [root@kazihuo /srv]# wget https://github.com/fail2ban/fail2ban/archive/0.8.14.tar.gz [root@kazihuo / ...

  7. 元组tuple基本操作

    创建一个元组 tuple1=(1,2,3,4,5,6,7,8) tuple的标志仿佛是(),但是,有()不一定是元组,没有()不一定不是元组 tuple2=(1)#tuple2是一个整型 tuple3 ...

  8. 笔记：I/O流-对象序列化

    Java 语言支持一种称为对象序列化(Object Serialization)的非常通用的机制,可以将任何对象写入到流中,并在之后将其读回,首先需要支持对象序列化的类,必须继承与 Serializa ...

  9. flex布局之兼容

    Android 2.3 开始就支持旧版本 display:-webkit-box; 4.4 开始支持标准版本 display: flex; IOS  6.1 开始支持旧版本 display:-webk ...

  10. MYSQL数据库学习十六 安全性机制

    16.1 MYSQL数据库所提供的权限 16.1.1 系统表 mysql.user 1. 用户字段 Host:主机名: User:用户名: Password:密码. 2. 权限字段 以“_priv”字 ...