您的位置：首页 > Web前端

web前端 js写的俄罗斯方块

2015-08-30 08:13 369 查看

效果图：

代码：

html：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>俄罗斯方块</title>
<script src="js01Dia.js"></script>
</head>
<body>
</body>
</html>

js:

/**
* Created by hao on 2015/8/29.
*/
//表格的行数
var TRIES_ROWS = 16;
//表格的列数
var TRIES_COLS = 10;
//单元格的宽高
var WidHei =20;
//    创建表格的函数
var table;
var createTable=function(rows , cols, cellWidth, cellHeight)
{
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.width = cellWidth+"px";
cell.style.height = cellHeight+"px";
}
}
return table;

}
//数组，找到图形方块的位置(也就是图形方块)
var currentFall = [
{x: TRIES_COLS/2-1, y:0},
{x: TRIES_COLS/2, y:0},
{x: TRIES_COLS/2, y:1},
{x: TRIES_COLS/2+1, y:1}

];
//当页面加载完成时，调用该函数中的代码：
window.onload = function()
{
var table=createTable( TRIES_ROWS , TRIES_COLS,WidHei,WidHei );
table.border=1;
//  表格的边框线为单线
table.style.borderCollapse="collapse";
document.body.appendChild(table);
setInterval("fall()",500);

//遍历数组currentFall中的元素
for(var i=0;i<currentFall.length;i++){
var cur=currentFall[i];
table.rows[cur.y].cells[cur.x].style.backgroundColor="red";

}

}
//方块向下掉
var fall= function()
{
//遍历数组currentFall中的元素,背景是白色
for(var i=0;i<currentFall.length;i++){
var cur=currentFall[i];
table.rows[cur.y].cells[cur.x].style.backgroundColor="white";

}
//判断到底的时候就不要再掉了。
var canFall =true;
//遍历数组currentFall中的元素
for(var i=0;i<currentFall.length;i++){
if(currentFall[i].y>=TRIES_ROWS-1){
canFall = false;
break;
}

}
//如果能往下掉
if(canFall){
//遍历数组currentFall中的元素
for(var i=0;i<currentFall.length;i++){
var cur=currentFall[i];
cur.y ++;

}
}else{
//    如果不能往下掉，则开启一个新的方块
}

//遍历数组currentFall中的元素，背景是红色
for(var i=0;i<currentFall.length;i++){
var cur=currentFall[i];
table.rows[cur.y].cells[cur.x].style.backgroundColor="red";

}
};
参考视频：
http://www.chuanke.com/?mod=student&act=study&courseid=93303

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航