俄罗斯方块JS游戏——黄文权

2024-09-05 12:21:02

字体：大中小

来源：转载

供稿：网友

俄罗斯方块——黄文权游戏规则：游戏由 ↑ ↓ → ← 方向键控制。
　　↑：方块变型
　　↓：加速下落
　　→：向右移动
　　←：向左移动
　　P：暂停或开始游戏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>俄罗斯方块-Download by http://www.vevb.com</title>    <style type="text/css">        #map{border:3px solid green;background-image:url(http://www.vevb.com/jscss/demoimg/201109/tetris_grid.gif);float:left;margin-right:20px;}        #preview{float:left;}        #previewArea{border:2px solid green;width:140px;height:168px;padding-left:28px;}        #map td{width:28px;height:28px;}        #preview td{width:28px;height:28px;}        #perviewTable{margin-top:56px;}        #score,#rank{font-size:20px;color:Red;font-weight:bold;}    </style>    <script type="text/javascript">        function Tetris(){}        Tetris.prototype={            BlogsSetting:[//方块设置                [                    [1,1,1,1],                    [0,0,0,0],                    [0,0,0,0],                    [0,0,0,0]                                 ],                [                    [1,1,1,0],                    [1,0,0,0],                    [0,0,0,0],                     [0,0,0,0]                 ],                [                    [1,1,1,0],                    [0,1,0,0],                    [0,0,0,0],                     [0,0,0,0]                 ],                [                    [1,1,1,0],                    [0,0,1,0],                    [0,0,0,0],                     [0,0,0,0]                 ],                [                    [1,1,0,0],                    [0,1,1,0],                    [0,0,0,0],                     [0,0,0,0]                 ],                [                    [0,1,1,0],                    [1,1,0,0],                    [0,0,0,0],                     [0,0,0,0]                ],                [                    [1,1,0,0],                    [1,1,0,0],                    [0,0,0,0],                     [0,0,0,0]                ]            ],            GameMap:[],//游戏地图，对应table中的td值            BlokWidth:28,//方块集的宽高，也就是http://www.vevb.com/jscss/demoimg/201109/tetris_grid.gif图片的宽高            HorizontalNum:10,//水平td数量            VerticalNum:18,//垂直td数量            BlokSize:4,//设置方块占用位置4 * 4            BlockWidth:0,//获取当前方块的非0的最大宽度            BlockHeight:0,//获取当前方块的非0的最大高度            CurrentIndex:0,//当前随机获得的索引            NextCurrentIndex:0,//获取下一个方块的索引            BlokCurrent:[],//当前方块            InitPosition:{},//当前方块运动的x,y            IsPlay:false,//是否开始游戏            IsOver:false,//游戏是否结束            IsOverIndex:0,//设置游戏结束的索引还有空几行            Score:0,            ScoreIndex:100,            ColorEnum: [[0, 0], [-28, 0], [-56, 0], [-84, 0], [-112, 0], [-140, 0], [-168, 0], [0, 0]], //颜色的枚举，对应BlogsSetting            CreateMap:function(){                //加载地图，设置其宽高，根据HorizontalNum,VerticalNum的数量决定                var map = document.getElementById("map");                var w = this.BlokWidth*this.HorizontalNum;                var h = this.BlokWidth*this.VerticalNum;                map.style.width=w+"px";                map.style.height=h+"px";                //加载地图对应的数组，初始化为0，当被占据时为1                for(var i=0;i<this.VerticalNum;i++){                    this.GameMap.push([]);                    for(var j=0;j<this.HorizontalNum;j++){                        this.GameMap[i][j]=0;                    }                }                //创建table td填充div根据HorizontalNum,VerticalNum的数量决定，创建HorizontalNum * VerticalNum的表格区域                var table = document.createElement("table");                table.id="area";                var tbody = document.createElement("tbody");                table.cellPadding=0;                table.cellSpacing=0;                table.appendChild(tbody);                for(var i=0;i<this.VerticalNum;i++){                    var tr = document.createElement("tr");                    for(var j=0;j<this.HorizontalNum;j++){                        var td = document.createElement("td");                        tr.appendChild(td);                    }                    tbody.appendChild(tr);                }                map.appendChild(table);                this.CreatePreViewMap();                this.CreateNextBlock();            },                        CreatePreViewMap:function(){//加载一个4*4的表格到预览区域                var preview = document.getElementById("previewArea");                var table = document.createElement("table");                table.id="perviewTable";                var tbody = document.createElement("tbody");                table.cellPadding=0;                table.cellSpacing=0;                table.appendChild(tbody);                for(var i=0;i<this.BlokSize;i++){                    var tr = document.createElement("tr");                    for(var j=0;j<this.BlokSize;j++){                        var td = document.createElement("td");                        tr.appendChild(td);                    }                    tbody.appendChild(tr);                }                preview.appendChild(table);            },            LoadPreview:function(index){//加载到预览区域                var previewTable = document.getElementById("perviewTable");                for(var i=0;i<this.BlogsSetting[index].length;i++){                    for(var j=0;j<this.BlogsSetting[index][i].length;j++){                        previewTable.rows[i].cells[j].style.backgroundImage="";                        if(this.BlogsSetting[index][i][j]==1){                            previewTable.rows[i].cells[j].style.backgroundImage="url(http://www.vevb.com/jscss/demoimg/201109/tetris.gif)";                            previewTable.rows[i].cells[j].style.backgroundPosition=this.ColorEnum[index][0]+"px"+" "+this.ColorEnum[index][1]+"px";                        }                    }                }            },            SettingBlock:function(){//设置地图中方块的背景图片                var tb = this.getTable();                for(var i=0;i<=this.BlockHeight;i++){                    for(var j=0;j<=this.BlockWidth;j++){                        if(this.BlokCurrent[i][j]==1){                            tb.rows[this.InitPosition.y+i].cells[this.InitPosition.x+j].style.backgroundImage="url(http://www.vevb.com/jscss/demoimg/201109/tetris.gif)";                            tb.rows[this.InitPosition.y+i].cells[this.InitPosition.x+j].style.backgroundPosition=this.ColorEnum[this.CurrentIndex][0]+"px"+" "+this.ColorEnum[this.CurrentIndex][1]+"px";                        }                    }                }            },            CanMove:function(x,y){//根据传过来的x,y，检测方块是否能左右下移动                if(y+this.BlockHeight>=this.VerticalNum)//判断是否有到最底部，如果到底部的话停止向下移动                    return false;                for(var i=this.BlockHeight;i>=0;i--){//检测方块的最高坐标相对应的地图的坐标是否有都等于1，如果有等于1说明地图放不下该方块                    for(var j=0;j<=this.BlockWidth;j++){                        if(this.GameMap[i][x+j]==1&&this.BlokCurrent[i][j]==1){                            this.IsOverIndex=i;                            this.IsOver=true;                        }                    }                }                for(var i=this.BlockHeight;i>=0;i--){//检测方块的移动轨迹在地图中是否有被标记为1，如果有被标记为1就是下一步的轨迹不能运行。                    for(var j=0;j<=this.BlockWidth;j++){                        if(this.GameMap[y+i][x+j]==1&&this.BlokCurrent[i][j]==1){//判断方块的下一步轨迹是否是1并且判断下一步方块的轨迹在地图中是否有为1。                            return false;                           }                    }                                         }                return true;            },            ClearOldBlok:function(){//当this.InitPosition.y>=0 也就是显示在地图的时候，每次左右下移动时清除方块，使得重新绘制方块                if(this.InitPosition.y>=0){                    for(var i=0;i<=this.BlockHeight;i++){                        for(var j=0;j<=this.BlockWidth;j++){                            if(this.BlokCurrent[i][j]==1){                                this.getTable().rows[this.InitPosition.y+i].cells[this.InitPosition.x+j].style.backgroundImage="";                            }                        }                    }                }            },            MoveLeft:function(){    //向左移动                var x = this.InitPosition.x-1;                if(x<0||this.InitPosition.y==-1)                    return;                if(this.CanMove(x,this.InitPosition.y)){                    this.ClearOldBlok();                    this.InitPosition.x=x;                }                this.SettingBlock();              },            MoveRight:function(){//向右移动                var x = this.InitPosition.x+1;                if(x+this.BlockWidth>=this.HorizontalNum||this.InitPosition.y==-1)                    return;                if(this.CanMove(x,this.InitPosition.y)){                    this.ClearOldBlok();                    this.InitPosition.x=x;                }                this.SettingBlock();              },            MoveDown:function(){//向下移动                var y = this.InitPosition.y+1;                if(this.CanMove(this.InitPosition.x,y)){//判断是否能向下移动，不能的话表示该方块停止运行，继续判断是否游戏结束，如果游戏还没结束重新创建个方块继续游戏                    this.ClearOldBlok();                    this.InitPosition.y=y;                    this.SettingBlock();                }                else{                    if(this.IsOver){                        window.clearTimeout(OverTime);                        this.GameOver();                        return;                    }                    this.SettingBlock();                    this.SettingGameMap();                    this.CheckFull();                    this.NewBlock();                    this.CreateNextBlock();                    return;                }                              },            ChangeBlock:function(){//向上方块变型                if(this.InitPosition.y==-1)                    return;                var newBlock = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];                for(var i=0;i<=this.BlockHeight;i++){                    for(var j=0;j<=this.BlockWidth;j++){                        newBlock[this.BlockWidth-j][i] = this.BlokCurrent[i][j];                    }                }                var temp = this.BlokCurrent;                this.ClearOldBlok();                this.BlokCurrent=newBlock;                this.BlockWidth=this.GetWidth(this.BlokCurrent);                this.BlockHeight=this.GetHeight(this.BlokCurrent);                if(this.InitPosition.x+this.BlockWidth>=this.HorizontalNum||!this.CanMove(this.InitPosition.x,this.InitPosition.y)){//this.InitPosition.x+this.BlockWidth>=this.HorizontalNum判断变型后x+它的宽度是否有超过地图的宽度                    this.BlokCurrent=temp;                    this.BlockHeight=this.GetHeight(this.BlokCurrent)                    this.BlockWidth=this.GetWidth(this.BlokCurrent);                }                this.SettingBlock();            },            CheckFull:function(){//检测是否有满行的                var arr=[];                for(var i=0;i<this.VerticalNum;i++){                    var flag=true;                    for(var j=0;j<this.HorizontalNum;j++){                        if(this.GameMap[i][j]==0){                            flag=false;                            break;                        }                    }                    if(flag){                        this.ClearFull(i);                    }                }                                },            ClearFull:function(index){//清除满行的，使上一行的背景图等于该行，并使上一行的坐标值等于该行，如果是第一行的话坐标值清0，背景清空                var tb = this.getTable();                if(index==0){                     for(var i=0;i<this.HorizontalNum;i++){                        this.GameMap[0][j]=0;                        tb.rows[i].cells[j].style.backgroundImage="";                    }                }                else{                    for(var i=index;i>0;i--){                        for(var j=0;j<this.HorizontalNum;j++){                            this.GameMap[i][j]=this.GameMap[i-1][j];                            tb.rows[i].cells[j].style.backgroundImage=tb.rows[i-1].cells[j].style.backgroundImage;                            tb.rows[i].cells[j].style.backgroundPosition=tb.rows[i-1].cells[j].style.backgroundPosition;                        }                    }                }                this.getScore().innerHTML=parseInt(this.getScore().innerHTML)+this.ScoreIndex;            },            NewBlock:function(){//创建方块，初始化数据                this.CurrentIndex=this.NextCurrentIndex;//获取下一个方块的索引作为当前索引                this.BlokCurrent=this.BlogsSetting[this.CurrentIndex];//根据获得的新索引重新获取方块                this.BlockWidth=this.GetWidth(this.BlokCurrent);//重新获取方块的最大宽值                this.BlockHeight=this.GetHeight(this.BlokCurrent);//重新获取方块的最大高值                this.GetInitPosition();//初始化方块出现的坐标            },            GameOver:function(){//游戏结束后补齐获得当前方块，补齐地图空白地方                var tb = this.getTable();                for(var i=this.IsOverIndex-1;i>=0;i--){//循环空白的IsOverIndex-1行，给空白的行补上当前方块，从最高值递件。减1是因为IsOverIndex获取的是被占据的行，所以减1为空白行。                    for(var j=0;j<=this.BlockWidth;j++){                        if(this.BlokCurrent[this.BlockHeight-i][j]==1){                            tb.rows[i].cells[this.InitPosition.x+j].style.backgroundImage="url(http://www.vevb.com/jscss/demoimg/201109/tetris.gif)";                            tb.rows[i].cells[this.InitPosition.x+j].style.backgroundPosition=this.ColorEnum[this.CurrentIndex][0]+"px"+" "+this.ColorEnum[this.CurrentIndex][1]+"px";                        }                    }                }                this.IsPlay=false;                alert("游戏结束");            },            SettingGameMap:function(){//设置游戏地图被占有的位置标记为1                for(var i=0;i<=this.BlockHeight;i++)                    for(var j=0;j<=this.BlockWidth;j++)                        if(this.BlokCurrent[i][j]==1){                            this.GameMap[this.InitPosition.y+i][this.InitPosition.x+j]=1;//减1是因为每次y加1，然后在去进行判断，所以当碰到方块或底部的时候要减去多加的1                        }            },            Start:function(){//游戏开始                this.IsPlay=true;                this.CurrentIndex=this.NextCurrentIndex;                this.BlokCurrent=this.BlogsSetting[this.CurrentIndex];                this.BlockWidth=this.GetWidth(this.BlokCurrent);                this.BlockHeight=this.GetHeight(this.BlokCurrent);                this.GetInitPosition();                this.MoveDown();                this.CreateNextBlock();            },            CreateNextBlock:function(){//获取下一个方块的索引，并显示在预览区域中                this.NextCurrentIndex=this.getRandom();                this.LoadPreview(this.NextCurrentIndex);            },            GetHeight:function(blokArr){//获取当前方块不是0的最大高值                for(var i=blokArr.length-1;i>=0;i--)                    for(var j=0;j<blokArr[i].length;j++)                        if(blokArr[i][j]==1)                            return i;            },            GetWidth:function(blokArr){//获取当前方块不是0的最大宽值                for(var i=blokArr.length-1;i>=0;i--)                    for(var j=0;j<blokArr[i].length;j++)                        if(blokArr[j][i]==1)                            return i;            },            GetInitPosition:function(){//获取方块的初始位置                this.InitPosition = {x:Math.floor((this.HorizontalNum-this.BlokSize)/2),y:-1};            },            getRandom:function(){//随机获得7种放块中的其中一种                return Math.floor(Math.random()*7);            },            getTable:function(){                return document.getElementById("area");            },            getScore:function(){                return document.getElementById("score");            },            getRank:function(){                return document.getElementById("rank");            }        }        var t = new Tetris();        var OverTime=null;        var IsPause=false;        var Speed=500;        var btn_start;        window.onload=InitGame;        function InitGame(){            t.CreateMap();            btn_start = document.getElementById("start");            btn_start.onclick=function(){                t.Start();                this.value="P 暂停游戏"                OverTime=setInterval(MoveBoxDown,Speed);                this.disabled="disabled";            }        }        function MoveBoxDown(){            t.MoveDown();        }        function KeyDown(e){            if(!t.IsPlay||t.IsOver)return;            e=e||window.event;            var keyCode = e.keyCode||e.which||e.charCode;            switch(keyCode){                case 37://左                    if(!IsPause)t.MoveLeft();                    break;                case 38://上                    if(!IsPause)t.ChangeBlock();                    break;                case 39://右                    if(!IsPause)t.MoveRight();                    break;                case 40://下                    if(!IsPause)t.MoveDown();                    break;                case 80://p 暂停or开始                    IsPause=!IsPause;                    if(IsPause){                        btn_start.value="P 开始游戏";                        window.clearInterval(OverTime);                    }                    else{                        btn_start.value="P 暂停游戏";                        OverTime=setInterval(MoveBoxDown,Speed);                    }                    break;            }        }    </script></head><body onkeydown="KeyDown(event)"><div id="map"></div><div id="preview">    <br />    <div id="previewArea"></div>    <div style="margin-top:10px;font-size:9pt;"><input id="start" type="button" value="开始游戏" /><br /><br />得分：<span id="score">0</span><br />目前排名：<span id="rank">游戏结束后统计</SPAN>
</div>
</div>
<div class=page1>
<p align="center" class="pageLink"></p>
</div>

<div class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557775.html'>JS挖箱子小游戏，网页游戏代码</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557777.html'>21点游戏，网页版</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div class="pinglun">

<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">

学习交流