web前端 js写的俄罗斯方块

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/48101541

效果图:


代码:

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





阅读更多
换一批

没有更多推荐了,返回首页