前言

這是關於初學者的文章，他們希望通過一些簡單的方法開始在網絡中開發遊戲開發，而不使用任何重型工具。本文提供了一個簡單的步驟，開始使用html / css和javascript的2d遊戲開發。在這裡，我將介紹如何創建一個圖像拼圖遊戲，您可以在其中拖放圖像部分進行交換和重新排列零件以形成完整的圖像。

你可以在線玩這個遊戲：http://www.ikinsoft.com/3ddemo/puzzle/puzzle.html

遊戲規則

遊戲的規則很簡單。你只需要拖放破碎的圖像來交換它。您需要以形成正確圖像的方式交換它們。將拖放圖像部件所需的步驟數。所以，您可能希望考慮並嘗試以儘可能最小的步驟進行。右側提供正確的圖像供您參考。

遊戲畫面如下所示：

遊戲畫面截圖

遊戲代碼說明

我們將遊戲的代碼分成3部分：Html，Css和Javascript。Html部分包含形成遊戲佈局的簡單標籤。CSS提供了一些響應式設計，Javascript部分包含遊戲的主要邏輯。遊戲的幾個重要步驟如下：

打破圖像

對於圖像看起來像分為nxn不同的部分，每側的部件n數量在哪裡，nxn li元素已被使用在一個ul。每個的顯示屬性li已設置為內嵌塊，以使其顯示為網格。每個背景圖像li被設置為僅顯示圖像的1 /（n×n）部分，並且相應地設置背景圖像的位置。data-value屬性已被分配給每個li以標識該片段的索引。

代碼如下：

打碎圖片代碼

在這裡，您可以看到使用簡單background-image和background-position風格實現了破壞的效果。在已經設置了博爾森圖像之後，按照正確的順序，隨機化方法用於隨機化片段。在遊戲中，用戶必須重新排列片段以形成完整的圖像。

gridSize表示圖像需要在每一側（水平和垂直）分割多少部分。硬編碼值400是盒子的大小。請注意，您可能想要擺脫這個硬編碼的值。我將在下一次更新中用一個變量來更新。基於gridSize，我將拼圖的級別分為3部分：容易，中等和難易。容易3x3格，中4x4和硬5x5。您可以通過更改相應的單選按鈕的值，以不同的方式實現相同的方式。

隨機斷開零件

在設置圖像損壞的部分後，如前面代碼塊的最後一行所示，隨機化方法用於隨機分割碎片。為此，創建一個小型通用隨機化函數來隨機化任何jquery元素集合。

隨機化方法的實現如下：

隨機斷開零件代碼

在這裡，我們只是簡單地循環給定選擇器的每個子元素，並根據隨機數改變其位置。隨機數應在0和收集中的元素數之間。

拖放圖片碎片

為了使每個碎片拖動，使用了jquery draggable插件。請確保您的頁面中包含jquery-ui.js以實現可拖放/可拖放功能。

拖放圖片碎片代碼

正如您在上述代碼片段中可以看到的，每次下降之後，isSorted 都將被調用來檢查這些片段是否已被排序。正在根據包含li元素的data-value屬性檢查每個片段的排序。如果片段被排序，則表示圖片已完成。

設置樣式

已經使用了一個非常小的css來使其變得簡單易懂。所使用的css允許頁面響應，您可以在平板電腦或手機中玩遊戲。沒有使用css的第三方庫，以便您可以輕鬆瞭解本機css樣式。

計數步驟

計數步驟或任何用戶操作是任何遊戲中最常見的部分。這也是通過一個簡單的步驟實現的。在每次下降之後，它檢查圖像是否形成。如果是，遊戲結束，如果沒有，則將stepCount 變量遞增1.然後，stepCount 使用jquery 更新UI。

計時器

計時器也是大多數遊戲的重要組成部分之一。基於讀者提供的反饋，已經實現了一個基本的計時器來檢查完成拼圖所需的秒數。計時器正在遊戲開始時啟動，tick 每秒鐘調用 方法來更新計時器。Tick方法一旦從start方法調用，然後每秒鐘調用自身（使用JavaScript SetTimeout）並使用JQuery更新UI中使用的時間。當圖片完成時，遊戲結束，最後計時，並在使用JQuery的輸出中顯示。

下面是定時器方法的實現：

計時器代碼

請注意，getTime（）方法給出自01/01/1970以來通過的毫秒數。如果您建議更好的方法來計算兩個DateTime 在javascript 之間的時間，我將不勝感激。我不想依靠1000毫秒的差距setTimeout()來增加1秒。

級別

根據用戶的反饋，遊戲中添加了3個難度級別：1.輕鬆2.中等3.硬。在我們的例子中，選擇容易設置3x3矩陣中的難題，4x4矩陣中的中等，硬設置為5x5矩陣。

瀏覽器兼容性

為了簡單起見，我避免使用Html 5或CSS 3，以便它可以在大多數瀏覽器中使用。由於使用了JQuery版本，此遊戲可能不適用於較早的瀏覽器<IE8。如果您希望在舊版本的舊版本中使用此遊戲，您可以將腳本引用替換為較舊的JQuery版本（1.9或更早版本）。最新的JQuery版本不支持舊版瀏覽器。

上文的示例網址應該在大多數最新的瀏覽器中運行。已經在IE 11和Google Chrome中測試過。