方块无法下滑，怎么解决啊？？

最新推荐文章于 2020-01-30 20:54:03 发布

原创最新推荐文章于 2020-01-30 20:54:03 发布 · 443 阅读

CC 4.0 BY-SA版权

本文演示如何使用JavaScript创建动态交互表格，并实现元素在表格内的上下移动。通过定义表格行数、列数和单元格大小，我们创建了一个表格实例，并在页面加载时填充表格。此外，文章还介绍了一个函数来模拟元素的下落过程，以及如何通过检查元素是否触及表格边界来控制其移动。最后，通过定时器实现元素的连续下落效果。

程序代码：

var tire_rows=20;
var tire_cols=15;
var cell_size =100;
function   test(rows,cols,cellwidth,cellheight){
	
	var table =document.createElement("table");
	for(var i=0;i<rows;i++)
	{
		var row=table.insertRow(i);
		for(var j=0;j<cols;j++)
			{
			   var cell =row.insertCell(j);
			   cell.style.cellwidth+"px";
			   cell.style.cellheight+"px";
			}
	}

	return table;
	
}


var tire_table;
var currentfall =[
                  {x:tire_cols/2-1,y:0},
                  {x:tire_cols/2,y:0},
                  {x:tire_cols/2,y:1},
                  {x:tire_cols/2+1,y:1},
                  
                  ];


 window.onload =function()
 {
	var tire_table= test(tire_rows,tire_cols,800,600);
	 tire_table.border=1;
	 tire_table.style.borderCollapse="collapse"; 
	document.body.appendChild(tire_table);
	
	for(var i=0;i<currentfall.length;i++)
	{
	
	  var cur =currentfall[i];
	  tire_table.rows[cur.y].cells[cur.x].style.backgroundColor ="blue";
	
	}
		
	setInterval(fall,1000);
	
 };



function fall()
{
	
	for(var i=0;i<currentfall.length;i++)
	{	  
	  var cur =currentfall[i];	  
	  tire_table.rows[cur.y].cells[cur.x].style.backgroundColor ="white";
	  
	}
	
	
	var canfall=false;
	
	for(var i=0;i<currentfall.length;i++)
	{
	  var cur =currentfall[i];
	  if(cur.y>=tire_rows-1)
	  {
		  canfall =false;
		  
		  break;
	  }
	}
	

	if (canfall) {
		for ( var i = 0; i < currentfall.length; i++) {
			var cur = currentfall[i];
			cur.y++;
			
		}
	}
	

	
	for(var i=0;i<currentfall.length;i++)
	{
	
	  var cur =currentfall[i];
	  
	  tire_table.rows[cur.y].cells[cur.x].style.backgroundColor ="blue";
	  
	}
}