俄羅斯經(jīng)典游戲——JS實(shí)現(xiàn)

想著做一個(gè)前端網(wǎng)頁(yè)游戲，就找了一個(gè)經(jīng)典小游戲俄羅斯方塊。游戲的邏輯實(shí)現(xiàn)可以用好多種語(yǔ)言C ，C++，JS。因?yàn)橄胍\(yùn)用自己上半年學(xué)過(guò)的東西實(shí)現(xiàn)，就選擇了JS。

開(kāi)發(fā)軟件和前端知識(shí)

網(wǎng)頁(yè)編輯用到的軟件是sublime,用到的前端知識(shí)主要是 HTML , CSS ，JavaScript。用到的模型是MVP模型。

接下來(lái)從以下幾個(gè)方面介紹游戲的實(shí)現(xiàn)：

• 游戲邏輯
• 游戲界面設(shè)置
• 界面跳轉(zhuǎn)實(shí)現(xiàn)
• 背景音效
• 難題及解決

1.游戲邏輯

游戲邏輯的實(shí)現(xiàn)主要是通過(guò)js實(shí)現(xiàn)，涉及到方塊的產(chǎn)生，運(yùn)動(dòng)，方塊到底部顏色變化，消行，計(jì)時(shí)計(jì)分器。
代碼結(jié)構(gòu)圖：

• 方塊的產(chǎn)生
  方塊分為三種在css中實(shí)現(xiàn)，none，current,done對(duì)應(yīng)的值為0 1 2。在css中設(shè)置三個(gè)方塊的樣式在網(wǎng)頁(yè)界面中顯示，none的位置代表沒(méi)有方塊，current代表正在下落的方塊，done表示已經(jīng)到底部的方塊。方塊的位置，主要通過(guò)二維數(shù)組及每個(gè)方塊的寬度記錄。方塊的種類(lèi)總共有7種，都放在squareFactory中。
• 方塊的運(yùn)動(dòng)
  運(yùn)動(dòng)分為左移，右移，下落，旋轉(zhuǎn)四部分，通過(guò)控制方向鍵實(shí)現(xiàn)，利用按鍵對(duì)應(yīng)的ascii碼實(shí)現(xiàn)。通過(guò)函數(shù)來(lái)實(shí)現(xiàn)，例如：

/ /左移的判斷 Square.prototype.canLeft = function(isValid) {var test = {};test.x = this.origin.x;test.y = this.origin.y-1;//相應(yīng)的檢測(cè)的位置也要改變；return isValid(test, this.data);//返回的值可以確定是否可以下降； } Square.prototype.left = function() {this.origin.y = this.origin.y-1; } //調(diào)用左移函數(shù) var left = function() {//判斷是否能夠下降if(cur.canLeft(isValid)) {// 進(jìn)行下移函數(shù)是先清理數(shù)據(jù)，再設(shè)置原點(diǎn)；clearData();cur.left();setData();refreshDiv(gameData, gameDivs);}}

以上兩個(gè)函數(shù)分別處于square.js和game.js. square.js中存放方塊的運(yùn)動(dòng)的函數(shù)，在game.js中被調(diào)用。

• 方塊到達(dá)底部的顏色變化以及消行
  設(shè)置一個(gè)函數(shù)去判斷方塊下面是否到達(dá)底部，如果有就返回改變方塊，讓done方塊代替current，沒(méi)有就返回繼續(xù)下落。消行函數(shù)要判斷數(shù)組中一行是否都有方塊，如果有就調(diào)用清除數(shù)據(jù)函數(shù)進(jìn)行清除。在消行函數(shù)中可以記錄消行數(shù)傳值給積分函數(shù)。
• 計(jì)時(shí)，計(jì)分器
  計(jì)時(shí)功能的實(shí)現(xiàn)通過(guò)利用方塊的下落時(shí)間間隔，比如設(shè)置每隔200ms方塊下落，在時(shí)間函數(shù)中計(jì)數(shù)有5個(gè)即為1s。還要給計(jì)時(shí)器中的時(shí)間設(shè)置一個(gè)上限，當(dāng)時(shí)間等于上限時(shí)，游戲結(jié)束。計(jì)分主要是通過(guò)消行函數(shù)的傳值實(shí)現(xiàn)的，設(shè)置一個(gè)addscore變量存放。
• 增加游戲難度
  利用計(jì)數(shù)器每隔10s調(diào)用一次從底部加一行方塊的函數(shù)，產(chǎn)生一行隨機(jī)方塊，通過(guò)math.ceil實(shí)現(xiàn).
  設(shè)置關(guān)卡，主要通過(guò)改變方塊下落的速度實(shí)現(xiàn)。

for(var i=0; i<lineNum; i++){var line = [];//每一行有十個(gè)方塊，就生成十個(gè)for(var j=0; j<10; j++){// 把生成的方塊push到line數(shù)組中；line.push(Math.ceil(Math.random()*2)-1);}// 把每一行push到二維數(shù)組中；lines.push(line);}

2.游戲界面

游戲的界面通過(guò)二維數(shù)組實(shí)現(xiàn)，二維數(shù)組的建立在js中。在html中主要實(shí)現(xiàn)游戲的外框，以及界面的美化。
設(shè)置背景色，邊框主要用css。用css3的知識(shí)設(shè)置一個(gè)3d按鈕。還有信息界面，關(guān)卡界面…

涉及到的是簡(jiǎn)單的前端css，都可以實(shí)現(xiàn)。用到的position定位比較多，由于界面都要放在同一個(gè)位置，界面是否顯示通過(guò)display實(shí)現(xiàn)，下來(lái)介紹界面的跳轉(zhuǎn)。

3.界面的跳轉(zhuǎn)

界面的跳轉(zhuǎn)主要通過(guò)按鈕的onclick事件調(diào)用函數(shù)。比如：點(diǎn)擊開(kāi)始游戲按鈕，調(diào)用new game函數(shù)，讓開(kāi)始界面的display屬性為none；開(kāi)始界面的覆蓋就消失，游戲界面顯示。

<a href="#" class="btn3 btn" onclick="newGame()" >開(kāi)始游戲</a> <script>function newGame(){var local = new Local();local.start();// 開(kāi)始界面消失begin.style.display="none";backgroundMusic.play();//背景音樂(lè)設(shè)置；backgroundMusic.style.loop="infinite";} </script>

同樣的，如果點(diǎn)擊操作說(shuō)明，就讓開(kāi)始界面display：none；操作說(shuō)明界面為display：block;顯示。

4.背景音效

游戲怎么能沒(méi)有背景音樂(lè)，所以就去找俄羅斯方塊經(jīng)典的音樂(lè)，由于各種問(wèn)題，找到的音頻很短，但是可以用js的一個(gè)屬性讓背景音樂(lè)在開(kāi)始之后結(jié)束之前循環(huán)播放loop:infinite;

<audio src="audio/tetris.mp3" id="backgroundMusic" loop="infinite" autostart="true"></audio>

要在js中建立一個(gè)變量比如backgroundmusic存放id，在開(kāi)始游戲中調(diào)用backgroundmusic.play();開(kāi)始播放。
在結(jié)束游戲的函數(shù)中用backgroundmusic.pause()結(jié)束。
還有方塊固定到底部的聲音，消行的聲音，是在對(duì)應(yīng)的函數(shù)中實(shí)現(xiàn)。這個(gè)不用loop:infinite;因?yàn)檫@個(gè)音效很短，而且只在函數(shù)實(shí)現(xiàn)時(shí)調(diào)用。

5.問(wèn)題及解決

• 重新游戲頁(yè)面刷新
  重新游戲的設(shè)置剛開(kāi)始只是刪除了數(shù)據(jù)，但是發(fā)現(xiàn)原有的方塊并不會(huì)消失，只是在js中刪除了數(shù)組，界面上依然存在，這個(gè)問(wèn)題用了好幾天的時(shí)間。最后大佬的幫助下找到了
  **location.reload(true);**可以實(shí)現(xiàn)從服務(wù)器端重新載入頁(yè)面，瀏覽器重新從服務(wù)器請(qǐng)求資源,在http請(qǐng)求頭中不會(huì)包含緩存標(biāo)記。

location.reload(true); 推薦一篇博客：https://blog.csdn.net/sinat_17775997/article/details/80263724

location.replace()和location.reload()函數(shù)，二者有什么區(qū)別？
location.reload();有兩個(gè)參數(shù)一個(gè)是默認(rèn)的false，另一個(gè)是true。如果要從服務(wù)器端重新加載頁(yè)面就選擇true。
location.replace(url),該方法通過(guò)指定URL替換當(dāng)前緩存在歷史里（客戶(hù)端）的項(xiàng)目，因此當(dāng)使用replace方法之后，你不能通過(guò)“前進(jìn)”和“后退”來(lái)訪(fǎng)問(wèn)已經(jīng)被替換的URL。

總結(jié)

js真的是需要很強(qiáng)的邏輯思維，自己的知道的還是太少了。好多可以直接用的方法都不知道。還有就是寫(xiě)代碼一定要認(rèn)真！！！否則找bug真的難受。我也是前端菜鳥(niǎo)，如果有錯(cuò)誤請(qǐng)?jiān)谠u(píng)論區(qū)指正。

總結(jié)

以上是生活随笔為你收集整理的俄罗斯方块经典游戏——JS实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。