初学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. 互联网产品mysql数据库设计总结

    mysql数据库性能不比oracle数据库,所以设计上,和oracle有一些不同.下面总结一些互联网产品的数据库设计. 1.主键 主键可以使用bigint(20) unsigned也可以使用varch ...

  2. java继承与覆写小练习

    最近学习java到了继承的部分,写个小程序用以巩固. import java.util.Scanner;//导入输入包public class testfather { public static v ...

  3. Xamarin Forms中WebView的自适应高度

    在Xamarin.Forms中,WebView如果嵌套在StackLayout和RelativeLayout中必须要设置HeightRequest和WidthRequest属性才会进行渲染.可是在实际 ...

  4. 设计模式——职责链模式（C++实现）

    #include <iostream> #include <string> using namespace std; class Handler { public: Handl ...

  5. 笔记：Jersey REST API 设计

    REST 统一接口 REST 使用 HTTP 协议的通用方法作为统一接口的标准词汇,REST 服务所提供的方法信息都在 HTTP 方法里,每一种HTTP请求方法都可以从安全性和幂等性两方面考虑,这对正 ...

  6. 插入排序—直接插入排序(Straight Insertion Sort)

    基本思想: 将一个记录插入到已排序好的有序表中,从而得到一个新,记录数增1的有序表.即:先将序列的第1个记录看成是一个有序的子序列,然后从第2个记录逐个进行插插入到已入,直至整个序列有序为止. 要点: ...

  7. RabbitMQ的安装和配置

    在Windows下进行rabbitMQ的安装 第一步:软件安装 如果安装rabbitMQ首先安装基于erlang语言支持的OTP软件,然后在下载rabbitMQ软件进行安装(安装过程都是下一步,在此不 ...

  8. New UWP Community Toolkit - XAML Brushes

    概述 上一篇 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾.接下来会针对每个重要更新,结合 SDK 源代码和调用代码详细讲解. 本篇我们 ...

  9. Mybatis-no getter for property named 'col_name' in 'class com.xxx.onebean'

    Mybatis中出现该异常 There is no getter for property named 'col_name' in 'class com.xxx.onebean 意思是onebean这 ...

  10. JavaEE GenericServlet 解析

    从 上一篇 文章中可以看到,直接实现 Servlet 接口需要实现其所有方法,而这通常不是好的做法.相反,一种相对较好的做法是给出一个实现类来默认实现其所有方法或者部分方法,并开放给子类.而子类再在此 ...