用javascript做别踩白块游戏2
这一次做一个好一点的，要求黑块自动下落，且速度逐渐加快
<!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>别踩白块2</title> <style type="text/css"> table{ border: solid 5px; border-spacing: 0px; border-collapse: 0px; margin: auto; background-color: #FFF; } td{ width: 80px; height: 100px; border: solid 1px; } .bgcolor{ background: black; } #tr6 td{ height: 0px; border: 0px; } </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 id="tr5"> <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> <tr id="tr6"> <td></td><td></td><td></td><td></td> </tr> </table> </div> <div style="margin: auto; width: 340px; height: 40px; text-align: center;"> <b style="font-size: 30px;">点击黑块开始游戏</b><br> 注：方块的下落速度会越来越快，还没有人能突破300分,是时候表演真正的技术了！！！ <!-- <input style="width: 150px; height: 40px;" type="button" value="开始" onclick="run()"> <input style="width: 150px; height: 40px;" type="button" value="暂停" onclick="clearInterval(x)"> --> </div> <script type="text/javascript"> var inti; var count = 0; var oTextNode = document.getElementById("text1"); function run(count) { var inti = setInterval(moveDown, 400-count*10); return inti; } //为方块初始化随机黑块 function getShuiJiKuai(){ var oTrNode = document.getElementsByTagName("tr"); for(var i = 0; i < oTrNode.length - 1; 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; if((oTrNode[5].children[j] || oTrNode[5].childNodes[j]).className == "bgcolor"){ endGame(); return ; } } } //第一行清空 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"; } function onMouthEvent(event) { var oTrNode = event.parentNode; //如果点击的是黑色方块 if(event.className == "bgcolor"){ clearInterval(inti); this.inti = run(count); event.className = ""; count++; oTextNode.value = count; }else{ for(var k = 0; k < 4; k++){ if((oTrNode.children[k] || oTrNode.childNodes[k]).className == "bgcolor"){ endGame(); return ; } } } //最后一行有黑块没被点到 /* var oTrNode = document.getElementsByTagName("tr"); for(var y = 0; y < 4; y++){ if(oTrNode[4].children[y] || oTrNode[4].childNodes[y]).className == "bgcolor"){ alert("游戏结束,你的分数为："+count); } } */ } function endGame() { clearInterval(inti); alert("游戏结束,你的分数为："+count); count = 0; oTextNode.value = count; } //onMouthEvent(); </script> </body> </html>
响应点击事件并没有用onclick而是用的onmouthdown,onclick是鼠标点击按下并松开才响应，而onmouthdown在鼠标点击按下时就响应了，他的响应速度更快
手感不太好，尤其是用手机测试的时候，我想到的几个解决办法
1：添加一块公共点击面积，即两列之间添加一个公共区域，避免点击在线条中间的时候无效，更易于增强点击的精确性，
2：增加向下滑动时各行之间的衔接性，一次只下移一小段距离
