用javascript做别踩白块游戏1

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

用javascript做别踩白块游戏2
这一次做一个好一点的,要求黑块自动下落,且速度逐渐加快 <!DOCTYPE html> <html> <head>  &l ...
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版
这个项目有带说明文档,大家可以看看源码附件的说明文档吧,“别踩白块儿”是目前非常火的一款游戏,游戏非常简单刺激.关于具体怎么火法怎么玩我就不多说了,相信看到本文的朋友们都非常地清楚. 什么游戏火,我们 ...

随机推荐

R实战第五篇：绘图（ggplot2）
ggplot2包实现了基于语法的.连贯一致的创建图形的系统,由于ggplot2是基于语法创建图形的,这意味着,它由多个小组件构成,通过底层组件可以构造前所未有的图形.ggplot2可以把绘图拆分成多个 ...
django Forbidden
Forbidden (CSRF cookie not set.)解决方法 Forbidden (CSRF cookie not set.):xxx解决方法:在django项目的settings.py文 ...
python自动拉取备份压缩包并删除3天前的旧备份
业务场景,异地机房自动拉取已备份好的tar.gz数据库压缩包,并且只保留3天内的压缩包文件,用python实现 #!/usr/bin/env python import requests,time,o ...
object转字符串
1.obj.tostring() obj为空时,抛异常. 2.convert.tostring(obj) obj为空时,返回null: 3.(string)obj obj为空时,返回null:obj不 ...
python 全栈开发，Day3(正式)
一.基础数据类型基础数据类型,有7种类型,存在即合理. 1.int 整数主要是做运算的 .比如加减乘除,幂,取余 + - * / ** %...2.bool 布尔值判断真假以及作为条件变量3. ...
js中判定this的规则
判定this new绑定:新建对象; var bar = new foo(); 明确绑定(call.apply,bind):指定对象; var bar = foo.call(obj) 隐含绑定:环境对 ...
使用Angular CLI进行单元测试和E2E测试
第一篇文章是: "使用angular cli生成angular5项目" : http://www.cnblogs.com/cgzl/p/8594571.html 第二篇文章是: & ...
笔记：Maven 插件及配置详解
插件使用配置用户能够自己选择将某个插件目标绑定到生命周期的某个阶段上,例如创建项目的源码JAR包,内置的插件绑定关系并没有涉及这个任务,mavent-source-plugin 可以帮助我们完成该任 ...
bootbox的使用
/* * className为green的方法 */ function alertMsgG(msg,title,fn){ bootbox.alert({ buttons: { ok: { label: ...
memcache图形化管理工具MemAdmin
给大家介绍一款 memcache图形化管理工具: MemAdmin 下载地址: http://www.junopen.com/memadmin/ wget http://www.junopen.com ...

用javascript做别踩白块游戏1

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

随机推荐

热门专题