初学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. SLIC superpixel算法

    标题 SLIC superpixel算法 作者 YangZheng 联系方式 263693992 SLIC算法是simple linear iterative cluster的简称,该算法用来生成超像 ...

  2. 【MyBatis】MyBatis自动生成代码查询之爬坑记

    前言 项目使用SSM框架搭建Web后台服务,前台后使用restful api,后台使用MyBatisGenerator自动生成代码,在前台使用关键字进行查询时,遇到了一些很宝贵的坑,现记录如下.为展示 ...

  3. systemd的作用

    早上群上讨论了一下systemd的作用,还导致了一个人的直接退群,出于求知心理,搜索了一些systemd,对此也作出了一些相应的整理: 一.systemd的诞生: 学习嵌入式bootloader与ke ...

  4. CentOS配置本地yum源

    如果CentOS服务器处在内网环境中时,如果缺少依赖手动安装那么会非常麻烦,要花费很多时间来寻找rpm包,现在如果搭建本地的yum源,就非常方便了,使用yum源首先需要一个CentOS安装镜像,去官网 ...

  5. leaflet渲染mapbox gl的矢量数据

    准备条件 1.mapbox-gl.js mapbox-gl.css 2.leaflet-mapbox-gl.js https://github.com/mapbox/mapbox-gl-leaflet ...

  6. READ TABLE 的用法

    SORT ITAB BY '你想比较的列'. " 排序以增加二分查找的速度 READ TABLE itab with key 'itab中某列' = ‘目标列' BINARY SEARCH. ...

  7. JavaScript对象入门指南

    前言 不少开发对JavaScript实现面向对象编程存在一知半解,并且不少的在项目实践中写的都是面向过程编程的代码,因此,希望能从零入手介绍面向对象的一些概念到实现简单的面向对象的例子让大家包括我自己 ...

  8. 【重要】使用Git命令行上传到GitHub上

    [本人GitHub账号:] 用户名:chenhongshuang 密码:shuangshuang6300 邮箱:2452420371@qq.com 进入GitHub账号后 1·新建项目文件名称例dem ...

  9. 以太坊挖矿源码：ethash算法

    本文具体分析以太坊的共识算法之一:实现了POW的以太坊共识引擎ethash. 关键字:ethash,共识算法,pow,Dagger Hashimoto,ASIC,struct{},nonce,FNV ...

  10. Vue之九数据劫持实现MVVM的数据双向绑定

    vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...