初学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. Micropython TurnipBit 青少年入门编程 交通灯实验

    不知道大家小时候对红绿灯的原理有什么研究过,我是农村的孩子直到初中才见到真实的红绿灯,当时我记得很清楚,在那个路口站了五六分钟就盯着红绿灯变换,搞不清原理,只觉得神奇.现在想来实在可笑,今天写这个的很 ...

  2. Devstack 安装OpenStack Pike版本(单机环境)

    问题背景 最近在研究OpenStack的时候,需要对其源代码进行调试,公司服务器上部署的OpenStack环境又不能随意的进行折腾,为了研究的持续性和方便性,就决定再自己的虚拟机上面使用Devstac ...

  3. PAT乙级-1063. 计算谱半径(20)

    在数学中,矩阵的"谱半径"是指其特征值的模集合的上确界.换言之,对于给定的n个复数空间的特征值{a1+b1i, ..., an+bni},它们的模为实部与虚部的平方和的开方,而&q ...

  4. NOIP2015 D2T3 洛谷2680 BZOJ4326 运输计划 解题报告

    前言:个人认为这是历年NOIP中比较简单的最后一题了,因此将自己的思路与大家分享. 题目大意: 给一棵无根树,给出m条路径.允许将树上的一条边的权值改为0.求m条路径长度最大值的最小值.n,m< ...

  5. 设计模式——享元模式（C++实现）

    #include <iostream> #include <string> #include <map> #include <vector> #incl ...

  6. 每个java初学者都应该搞懂的问题

    对于这个系列里的问题,每个学JAVA的人都应该搞懂.当然,如果只是学JAVA玩玩就无所谓了.如果你认为自己已经超越初学者了,却不很懂这些问题,请将你自己重归初学者行列.内容均来自于CSDN的经典老贴. ...

  7. shell脚本之for循环

    shell脚本之for循环 author :headsen  chen       2017-10-18    09:50:41 个人原创,转载请注明.否则依法追究法律责任 1,cat forloop ...

  8. response重定向的网址中有中文乱码的解决办法

    在servlet都是使用response对象来重定向到另一个页面:response.sendRedirect("--").现在遇到一个问题,网页的地址是带中文的,当执行到跳转命令的 ...

  9. centos7下更改docker镜像和容器的默认路径

    笔者近期在服务器上搭建docker环境,可由于笔者是普通用户,在安装的时候就跳了很多坑,现在记录一下. 一.docker权限问题 据官方解释,搭建docker环境必须使用root权限,或者sudo装, ...

  10. Redis --> Redis的接口介绍及使用

    Redis的接口介绍及使用 Redis是一个远程内存数据库,它不仅性能强劲,而且还具有复制特性以及为解决问题而生的独一无二的数据模型.Redis提供了5种不同类型的数据结构,各式各样的问题都可以很自然 ...