俄羅斯方塊JS游戲——黃文權(quán)

2024-09-05 12:21:02

字體：大中小

供稿：網(wǎng)友

俄羅斯方塊——黃文權(quán) 游戲規(guī)則：游戲由 ↑ ↓ → ← 方向鍵控制。
　　↑：方塊變型
　　↓：加速下落
　　→：向右移動
　　←：向左移動
　　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.companysz.com</title>    <style type="text/css">        #map{border:3px solid green;background-image:url(http://www.companysz.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:[//方塊設(shè)置                [                    [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:[],//游戲地圖，對應(yīng)table中的td值            BlokWidth:28,//方塊集的寬高，也就是http://www.companysz.com/jscss/demoimg/201109/tetris_grid.gif圖片的寬高            HorizontalNum:10,//水平td數(shù)量            VerticalNum:18,//垂直td數(shù)量            BlokSize:4,//設(shè)置方塊占用位置4 * 4            BlockWidth:0,//獲取當前方塊的非0的最大寬度            BlockHeight:0,//獲取當前方塊的非0的最大高度            CurrentIndex:0,//當前隨機獲得的索引            NextCurrentIndex:0,//獲取下一個方塊的索引            BlokCurrent:[],//當前方塊            InitPosition:{},//當前方塊運動的x,y            IsPlay:false,//是否開始游戲            IsOver:false,//游戲是否結(jié)束            IsOverIndex:0,//設(shè)置游戲結(jié)束的索引還有空幾行            Score:0,            ScoreIndex:100,            ColorEnum: [[0, 0], [-28, 0], [-56, 0], [-84, 0], [-112, 0], [-140, 0], [-168, 0], [0, 0]], //顏色的枚舉，對應(yīng)BlogsSetting            CreateMap:function(){                //加載地圖，設(shè)置其寬高，根據(jù)HorizontalNum,VerticalNum的數(shù)量決定                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";                //加載地圖對應(yīng)的數(shù)組，初始化為0，當被占據(jù)時為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;                    }                }                //創(chuàng)建table td填充div根據(jù)HorizontalNum,VerticalNum的數(shù)量決定，創(chuàng)建HorizontalNum * VerticalNum的表格區(qū)域                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的表格到預(yù)覽區(qū)域                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){//加載到預(yù)覽區(qū)域                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.companysz.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(){//設(shè)置地圖中方塊的背景圖片                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.companysz.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){//根據(jù)傳過來的x,y，檢測方塊是否能左右下移動                if(y+this.BlockHeight>=this.VerticalNum)//判斷是否有到最底部，如果到底部的話停止向下移動                    return false;                for(var i=this.BlockHeight;i>=0;i--){//檢測方塊的最高坐標相對應(yīng)的地圖的坐標是否有都等于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)){//判斷是否能向下移動，不能的話表示該方塊停止運行，繼續(xù)判斷是否游戲結(jié)束，如果游戲還沒結(jié)束重新創(chuàng)建個方塊繼續(xù)游戲                    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(){//創(chuàng)建方塊，初始化數(shù)據(jù)                this.CurrentIndex=this.NextCurrentIndex;//獲取下一個方塊的索引作為當前索引                this.BlokCurrent=this.BlogsSetting[this.CurrentIndex];//根據(jù)獲得的新索引重新獲取方塊                this.BlockWidth=this.GetWidth(this.BlokCurrent);//重新獲取方塊的最大寬值                this.BlockHeight=this.GetHeight(this.BlokCurrent);//重新獲取方塊的最大高值                this.GetInitPosition();//初始化方塊出現(xiàn)的坐標            },            GameOver:function(){//游戲結(jié)束后補齊獲得當前方塊，補齊地圖空白地方                var tb = this.getTable();                for(var i=this.IsOverIndex-1;i>=0;i--){//循環(huán)空白的IsOverIndex-1行，給空白的行補上當前方塊，從最高值遞件。減1是因為IsOverIndex獲取的是被占據(jù)的行，所以減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.companysz.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("游戲結(jié)束");            },            SettingGameMap:function(){//設(shè)置游戲地圖被占有的位置標記為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(){//獲取下一個方塊的索引，并顯示在預(yù)覽區(qū)域中                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   class="70qarhlowxag"   id="map"></div><div   class="70qarhlowxag"   id="preview">    <br />    <div   class="70qarhlowxag"   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">游戲結(jié)束后統(tǒng)計</SPAN>
</div>
</div>
<div   id="70qarhlowxag"   class=page1>
<p align="center" class="pageLink"></p>
</div>

<div   id="70qarhlowxag"   class="fenxiang">

<div style="text-align:left">上一篇：<a href='/wen/2024/09-05/1557775.html'>JS挖箱子小游戲，網(wǎng)頁游戲代碼</a></div>
<br>
<div style="text-align:left">下一篇：<a href='/wen/2024/09-05/1557777.html'>21點游戲，網(wǎng)頁版</a></div>
<br>
<script src=/d/js/acmsd/gao21.js></script>

</div>

<div   id="70qarhlowxag"   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">

學(xué)習(xí)交流