用javascript做别踩白块游戏1

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

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <!-- 禁用缩放功能 -->
  5 <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">
  6 <title>别踩白块</title>
  7 
  8 <style type="text/css">
  9     table{
 10         border: solid 5px;
 11         border-spacing: 0px;
 12         margin: auto;
 13         background-color: #FFF;
 14     }
 15     td{
 16         width: 80px;
 17         height: 100px;
 18         border: solid 1px;
 19     }
 20     
 21     .bgcolor{
 22         background: black;
 23     }
 24 </style>
 25 </head>
 26 <body style="background: #008694; margin: 0px;">
 27     <div id="div1">
 28     <table>
 29         <caption style="font-size: 20px;">分数：<input id="text1" type="text">
 30         别踩白块
 31         </caption>
 32         <tr>
 33             <td></td><td></td><td></td><td></td>
 34         </tr>
 35         <tr>
 36             <td></td><td></td><td></td><td></td>
 37         </tr>
 38         <tr>
 39             <td></td><td></td><td></td><td></td>
 40         </tr>
 41         <tr>
 42             <td></td><td></td><td></td><td></td>
 43         </tr>
 44         <tr>
 45             <td onmousedown="onMouthEvent(this)"></td>
 46             <td onmousedown="onMouthEvent(this)"></td>
 47             <td onmousedown="onMouthEvent(this)"></td>
 48             <td onmousedown="onMouthEvent(this)"></td>
 49         </tr>
 50     </table>
 51     </div>
 52     <div style="margin: auto; width: 340px; height: 40px; text-align: center; font-size: 30px;">
 53         <b>点击黑块开始游戏</b>
 54         <!-- <input style="width: 150px; height: 40px;" type="button" value="开始">
 55         <input style="width: 150px; height: 40px;" type="button" value="暂停"> -->    
 56     </div>
 57     
 58 <script type="text/javascript">
 59     function getShuiJiKuai(){
 60         var oTrNode = document.getElementsByTagName("tr");
 61         for(var i = 0; i < oTrNode.length; i++){
 62             var randonNum = Math.floor(Math.random()*4);
 63             (oTrNode[i].children[randonNum] || oTrNode[i].childNodes[randonNum]).className = "bgcolor";
 64         }
 65     }
 66     getShuiJiKuai();
 67     
 68     function moveDown() {
 69         var oTrNode = document.getElementsByTagName("tr");
 70         for(var i = oTrNode.length - 1; i > 0; i--){
 71             for(var j = 0; j < 4; j++){
 72                 (oTrNode[i].children[j] || oTrNode[i].childNodes[j]).className = (oTrNode[i-1].children[j] || oTrNode[i-1].childNodes[j]).className;
 73             }
 74         }
 75         
 76         for(var k = 0; k < 4; k++){
 77             (oTrNode[0].children[k] || oTrNode[0].childNodes[k]).className = "";
 78         }
 79         var randonNum = Math.floor(Math.random()*4);
 80         (oTrNode[0].children[randonNum] || oTrNode[0].childNodes[randonNum]).className = "bgcolor";
 81     }
 82     //setInterval(moveDown, 500);
 83     
 84     var count = 0;
 85     function onMouthEvent(event) {
 86         var oTrNode = document.getElementsByTagName("tr");
 87         var oTextNode = document.getElementById("text1");
 88         if(event.className == "bgcolor"){
 89             moveDown();
 90             count++;
 91             oTextNode.value = count;
 92         }else{
 93             var oTextNode = document.getElementById("text1");
 94             alert("游戏结束,你的分数为："+count);
 95             count = 0;
 96             oTextNode.value = "";
 97         }
 98     }
 99     //onMouthEvent();
100 </script>
101 </body>
102 </html>

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

posted @ 2018-01-30 18:23  TwoIce  阅读(583)  评论(1)  编辑  收藏  举报