这一次做一个好一点的，要求黑块自动下落，且速度逐渐加快
<!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：增加向下滑动时各行之间的衔接性，一次只下移一小段距离