初學Javascript做的一個別踩白塊小游戲，代碼簡陋，如下： 點擊之後，黑塊才能往下落，只能在最後一行點擊 ...
初學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>
點擊之後，黑塊才能往下落，只能在最後一行點擊
