用純JS做俄羅斯方塊 簡要思路介紹(1)

2022-01-15 23:43:51 字數 3871 閱讀 9824

大家都知道俄羅斯方塊是一款大眾化的遊戲了,我很小的時候就玩過,今年已經25歲了,可以說俄羅斯方塊確實是歷史悠久,做俄羅斯方塊是我上個星期開始的想法。也許是由於自己從來沒有寫過這種東西吧,所以有生疏。**的話,只完成了一小部分,大概1/5左右吧。今天還是決定先寫一部分思路。

至於俄羅斯方塊的話,有很多的難點,如果有js去寫的話,要考慮到碰撞啊,邊界啊,下落等問題,本文這些問題大部分不會考慮到,只是提供一部分思路而已,開始已經說了,因為自己還沒寫完這個遊戲,但是又出於想寫部落格記錄,所以才有了這一系列的部落格。

回到正題,我們首先想一想,俄羅斯方塊需要什麼?我做乙個簡單的歸納。如果我簡單點說的話,就是乙個俄羅斯方塊物件,那麼這個物件裡又有些什麼東西呢?我們可以想象一下,有乙個平面直角座標系,這個平面直角座標系有x軸,有y軸,也有「每一等分」的距離(unit),而俄羅斯方塊就是乙個乙個的「格仔」,這些格仔從某乙個地方開始下落,某乙個地方停止下落,於是我們就規定了俄羅斯方塊的「下落區域」(area)。但是下落是乙個「動作」,所以我們還要有乙個類(這裡定義為operate),來控制動作的下落。

好了,先就介紹到這裡,我們再來做一段**性質的歸納,表示對上面的**做一段歸納。

/*俄羅斯方塊實體類*/

function tetris()

} //開始遊戲

document.getelementbyid("startgame").onclick=function();

}

那麼,當我們點選startgame的時候,開始遊戲,即執行start()方法。好,我們現在開始考慮area物件裡面到底需要什麼東西 function getarea(x,y,unit,id)引數需要帶入4個,前面3個剛才已經說了,第四個引數就是area的id。我們需要area這個物件,所以通過html**來設定id。大家玩過俄羅斯方塊的都知道,每一次觸底,都會新加乙個元素,而新的元素是「隨機」的,每當一行是滿的(這裡不考慮顏色不同的情況),就會消掉一行,當然我們一次形成了多行可消掉的方塊的時候,那麼我們就可以消掉多行。下面的是**,算是對上面的文字的乙個小小的總結,還沒有完成的**。

//獲得區域的橫座標和縱座標

function getarea(x,y,unit,id) }

//消掉所有的行

this.removefulllines=function()

} }

//和線性有關的東西(判斷是否滿了)

this.linesrelated=function(y)

//不明覺厲

} return true;

}; //去掉行

this.removelines=function(y)

};}

需要注意的一點是,俄羅斯方塊是「二維性質」的,所以我這裡定義了乙個board型別的二維陣列,即board[行][列](board[y][x]).好了,這裡我們當然還需要乙個類,這個類就是控制元素下落的「動作」的類,那麼這個下落「動作「的類裡應該有一些什麼東西呢?我們需要考慮邊界,於是有了(區域),我們要考慮俄羅斯方塊於是有了俄羅斯方塊物件(tetris),因為方塊的種類不同,有各種不同的形狀於是我們必須考慮方塊的類別(types),還有下乙個類別(nexttype),因為方塊有下乙個提示;我們需要考慮方塊在area中的位置於是有了(position),我們需要判斷遊戲是否暫停於是有了running,當然了,方塊下落的速度speed肯定也是要考慮到的,如果game over了那麼就要判斷遊戲是否停止stopped,當然了,方塊是乙個乙個的元素於是我們要考慮elements,當然了,最重要的還是下落(falldown).下面是定義的**:

var self=this; //當前物件

this.area=area;

this.tetris=tetris;

this.types=null; //方塊的型別;

this.nexttype=null; //下乙個型別

//初始化x和y

this.x=null;

this.y=null;

this.position=0; //初始位置

this.board=; //用來填充html元素的

this.elements=;

this.running=null; //是否在執行中

this.stopped=null; //是否停止

this.falldownid=null; //往下掉落的

this.speed=null; //速度

這麼一說有點頭暈,我們選乙個切入點吧,我們的切入點就是如何構造方塊。大家應該知道俄羅斯方塊的幾種形狀吧,比如t形,l形,口形等等,那麼我們可以想象一下,把俄羅斯方塊定義成乙個二維陣列,然後有元素的地方為1,沒元素的地方為0來構造形狀,如下面的**:

/*方塊的組合方式,用陣列進行組合(二維陣列)

用0,1表示是否有方塊存在,如果是0:不存在,1:存在,

以下的邏輯就可以非常的清楚了。*/

this.blockcomplex=[

[ [0,0,1],[1,1,1],[0,0,0] //_|

], [ [1,0,0],[1,1,1],[0,0,0] //l

], [ [0,1,0],[1,1,1],[0,0,0] //t

], [ [0,0,0],[1,1,1],[0,0,0] //--

], [ [0,0,0],[0,1,1],[0,1,1] //口

], [ [0,1,1],[0,1,0],[1,1,0] //z

] ];

好了,形狀構造好之後,我們當然需要考慮程式的效能方面的問題,於是我建立了如下的getter方法,來判斷是遊戲是否在執行中等。

/*一連串的getter方法

分別是速度,x,y軸,執行和停止的getter方法*/

this.getspeed=function()

this.getx=function()

this.gety=function()

this.isrunning=function()

this.isstopped=function()

當然了,我們如果要」重新開始遊戲「,肯定是要建立乙個方法reset(),說白一點,就是恢復遊戲開始的狀態。

//重置(初始化)

this.reset=function()

如果這個俄羅斯方法觸底的話,那麼肯定是會觸發下乙個俄羅斯方塊的開始於是我們這裡肯定要有乙個方法, 內容我還沒想好,就給乙個架子吧。我直接返回true了。

this.mayplace=function()

下面的是最重要的方法,就是我們的替換方塊的方法。先來簡單做乙個介紹,我也不知道自己能不能講好,大家想想在乙個座標系中,方塊如果下落了,肯定是y--,畢竟方塊是向下方下落的,當然,我們還需要有線條,假設我們一直在堆方塊的話,這個線肯定是會增加的,還有我們的方塊本身就是div,肯定是乙個掉落div的過程,而這些div,肯定是在area範圍內的。我們不妨想一想,第一步,我們來建立乙個空的board,就是面板,然後往這個面板裡面填充東西呢?

//建立空物件,即所有的都為0的物件,並返回物件

this.createempty=function(x,y)

}/*個人感覺這個功能應該是加速往下掉落的方法?不明覺厲*/

if(lines)

if(foundlines)

}

需要注意的是,當下乙個俄羅斯方塊(隨機)的形成是隨機的,所以我們需要定義乙個random方法。其實每次下落都是乙個reset的迴圈,只是遊戲還沒有結束而已。

//隨機數,產生1~6的

function random(i)

至於全部的**我就不貼了,因為還沒寫完,只是對這幾天寫**的乙個總結而已,高手可以無視我寫的**。

純JS俄羅斯方塊

俄羅斯方塊 tetris,俄文 是一款電視遊戲機和掌上遊戲機遊戲,它由俄羅斯人阿列克謝 帕基特諾夫發明,故得此名。俄羅斯方塊的基本規則是移動 旋轉和擺放遊戲自動輸出的各種方塊,使之排列成完整的一行或多行並且消除得分。由於上手簡單 老少皆宜,從而家喻戶曉,風靡世界。那麼,我們的問題來了,學挖掘機技術哪...

用C 實現俄羅斯方塊

include using namespace std 構造完成標誌 bool sign false 建立數獨矩陣 int num 9 9 函式宣告 void input void output bool check int n,int key int dfs int n 主函式 int main ...

Js實踐之俄羅斯方塊

前言 回顧下js部分的知識 學習理解俄羅斯方塊遊戲的具體實現思想 具體實現 實現看下具體的實現效果,實現效果如下 本次實現是簡易版的俄羅斯方塊包含基本俄羅斯方塊的基本功能,本次實現的俄羅斯方塊的基本功能有 形狀顯示 形狀變換 形狀累積 形狀顯示 本次實現是html css js,對於形狀的顯示實際上...