在前面的五篇文章中，小編帶大家完成了網頁版2048小游戲的基本游戲邏輯。但是在游戲結束的gameover()方法中咱們只是簡單的通過alert來彈出一些信息，這樣的話只能出現下圖的效果。這樣的游戲，不管是設計者還是玩家都是十分難以接受的。所以咱們今天再來講講對于gameover界面的優化。

在開始編寫之前，大家可以去玩一玩原版本的手機游戲，看一下原版的游戲效果。在那個游戲中gameover的界面是在16個小格子上面生成一個透明的格子，并顯示出gameover、這次游戲所得的分數和restart重新開始的按鈕(如下圖所示)。

這樣通過這個設計好效果，咱們就可以來編寫代碼了。首先這個是在大格子上出現的一個覆蓋式的界面，那咱們就先來添加上這個界面。使用$獲取到大格子的信息然后添加一個新的div使用ID命名為gameover。Div中則是加上本次得分的文本段并顯示出score的數值。最后再添加一個數值并使用一個重新開始的方法restartgame()對點擊事件進行響應。

對于這個按鈕，可以和newgame方法一樣使用超文本鏈接標簽a來創建，再通過href來引用方法。也可以通過button使用onclick方法對restartgame()進行調用。在這里小編為了節省代碼編寫量，就直接使用a標簽進行命名，這樣寫好之后標簽就會直接響應CSS文件中樣式，不用再進行一次設置。

這樣就建好了gameover的顯示界面，然后咱們就要gameover的div進行設置了。這里同樣就先設定了一個變量獲取到gameove的div，再用.css進行設置。小編在這里設置時，使用了和大格子一樣的寬高，這樣才能讓這個gameover界面徹底覆蓋再游戲界面之上。而在設置背景顏色時，小編使用了一個0.5的參數，這個是讓背景顏色呈現一種半透明的樣式。這樣才能既顯示出16個小格子的數字狀態，又呈現出一個深色背景覆蓋的情況。

這樣就只剩下新引用的一個重新開始的方法還沒有編寫，因為也是對于主頁面進行操作，所以咱們繼續在main.js中進行編寫。

這個方法就比較簡單了，咱們只需要將新生成的這個gameover的div移除，再讓游戲分數歸0，數字格、棋盤格全部初始化，就可以解決這個問題了。小編就直接調用了初始化分數的updateScore方法和newgame方法了。

這樣一來，最后對于游戲gameover界面的簡單優化就完成了。可是，小編又發現了一個問題，如果再gameover出現之后，小編直接點擊了newgame按鈕，這樣就會出現數字格初始化完成，可是上面的gameover界面并沒有消失(如下圖)。

如果僅僅做到這種程度，那這個游戲還不夠嚴謹，所以小編就要在newgame方法最前面添加一個gameover的div移除的方法，這樣就可以說基本上將這個游戲還原完成了。

下面這個鏈接中，有小編編寫的2048網頁版的代碼，大家可以參考一下。

鏈接：https://pan.baidu.com/s/1CWFWtWfPVYk-X8cl1dcLPg

提取碼：6a4r

最后，小編再介紹一下設計游戲的一些小思路：

1、大家要去體驗不同的游戲，但不是作為玩家去體驗，而是從開發者的角度去體驗。

2、在體驗游戲的過程中要思考下面這幾個方面的內容：

①?游戲的布局。

②?游戲的邏輯。

③?如何優化游戲。

④?如何做出咱們自己想要的效果。

3、自己做游戲時，則需要考慮如何完成游戲畫面的布局：

①?游戲的樣式。

②?如何疊加圖片。

③?游戲的開場動畫：視頻、CG之類的。

4、再者要考慮如何完成游戲的交互功能：

①?比較簡單的可以使用腳本語言來實現。

②?比較復雜的則是需要使用專門的游戲引擎來完成，像是html和JavaScript的游戲引擎。

5、最關鍵的則是要學習游戲的算法和邏輯：

①?最開始的便是計算機的一些基礎算法

②?然后就是各種2D、3D、圓等圖像的算法。

6、最后則是要考慮怎么將這個游戲移植到其他平臺上。

這就是一個制作游戲的大致流程，希望大家讀過之后能有所收獲，如果大家有什么想法歡迎大家在公眾號上留言討論，或是加入咱們凌云網絡的QQ群大家一起學習各種計算機知識。

小編：池毓浩

排版：馬淑芳

長按掃碼和我們做朋友吧

總結

以上是生活随笔為你收集整理的html css js实现快递单打印_JS与HTML、CSS实现2048小游戏（六）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。