Puzzlescript,一種開發H5益智遊戲的引擎
譯者 | 陳峻
審校 | 孫淑娟
目前,在企業與客戶(B2C)領域,無論是Web應用還是內部軟體,通常可以被分為:釋出、搜尋、執行和對話四種類型。本文著眼於第五種類別:個人娛樂類。我將和您逐步探索一個開源式的HTML5益智遊戲的開發過程和平臺。
若干年前,著名的遊戲製作人Stephen Lavelle為Increpare公司開發了Puzzlescript工具。它是專門針對推箱子式遊戲,來制定遊戲規則的指令碼和平臺。當然,此類推箱子式遊戲,可能對您說過於原始,我們完全可以使用其Puzzlescript庫開發出屬於自己的各種有趣的變體小遊戲。
1.定義遊戲的規則、級別和塊
讓我們首先從創作者的角度來審視Puzzlescript平臺:所有遊戲都可以被分為不同的級別。玩家角色可以使用箭頭鍵,或“W”、“A”、“S”和“Z”鍵來移動和操作。任何級別的關卡都是由畫素較差的塊物件所組成。這些物件的排列方式會逐漸變得複雜,並形成阻止您獲勝的障礙。在原版的推箱子游戲中,可被推動的物體包括:牆壁、板條箱、以及帶有圓點的地板。您只有完成一個關卡,才能進入下一個關卡。
有了前面的基礎,咱們來討論一下如何定義自己的遊戲規則,設計關卡,繪製元件,以及使用Puzzlescript指令碼來編寫遊戲程式碼。
首先,我們可以設定如下規則:如果玩家向某個板條箱移動,那麼該板條箱本身也應朝著相同的方向移動:
[> Player | Crate] -> [> Player | > Crate]
這代表了推箱子中的標準互動邏輯。程式程式碼可以將其解讀為“將左側的模式(玩家移動到帶有固定板條箱的正方形處)替換為右側(玩家移動到正方形,板條箱移動到下一個正方形)”。在準備解讀的過程中,您需要考慮遊戲引擎如何去檢查那些即將發生的動作,進而重新繪製遊戲。如果您是一名Z時代的益智遊戲玩家的話,可以參考“Baba is You”這款熱門遊戲的基本邏輯。
下面讓我們詳細討論一個名為Manic Ammo的特殊Puzzlescript遊戲的程式碼。該遊戲基於某人被困在彈藥掩體中的故事背景。當您點選底部的“hack”連結後,便可以看到螢幕被分成了三個視窗。
右上角的視窗允許您按照當前編譯的方式運行遊戲。因此,如果您單擊它,並按下空格鍵,遊戲會在此視窗中進行。而我們更感興趣的是位於左側的原始碼視窗。您可以看到“物件”標題,以及下方一長串格式化的資料。它表示的是遊戲將以5×5的方塊的視覺效果予以呈現。而且,其基本顏色由帶有數字程式碼所定義。
例如,下圖中的“玩家”角色便是由黑色和粉紅色的頭部所組成,其腹部為黃色。
上述清單的其餘部分按照不同的標題被區別開來,其中的“規則”部分就包含了您較為熟悉的Puzzlescript程式碼:
===== RULES ===== [Bang] -> [background] [boom] -> restart [> player][Droid] -> [> player][> Droid] [> Player | Shell] -> [> Player | > Shell] [> Droid | Shell] -> [> Droid | > Shell]
由上述程式碼可知,玩家可以像我們前面的例子那樣,以推箱子的方式,去推動某個掩體。
通過這樣的快速訪問方式,其他遊戲開發者能夠通過對現有程式碼的增、刪、調整,來迅速構建自己的遊戲。例如,您可以通過在上述規則下,新增一行程式碼,來修改遊戲的規則,並觸發遊戲並從頭開始構建:
[> Player | target] -> [target | > Player]
可見,“Winconditions”是完成一個關卡所需要滿足的單一規則。值得一提的是,黑客也可以運用上述方式,去破壞現有的遊戲邏輯與執行。
============== WINCONDITIONS ============== All Player on Target
當然,這也是一種參與應用程式修改的直接方式。遊戲開發者完全可以將應用程式碼上傳到GitHub處,然後要求其他開發者將其克隆到本地執行,以避免Web狀態對於遊戲體驗帶來的實際影響。從理論上說,這是一種“低摩擦”的參與方法(例如:通過新增程式碼行,來檢視同一個頁面上發生的變化)將有助於將參與者逐步通過實際程式碼的除錯,來提高遊戲程式設計的水平,並最終成為全棧式遊戲創造者。
2.Puzzlescript平臺
使用Puzzlescript編寫小遊戲無疑是對開發和設計技能的一項很好的測試。當您在公司的實際專案中開發和支援某些應用或工具時,您可能會注意到這樣一種實踐邏輯:某個工具或應用只有擁有了專業的社群和廣泛的使用者,才能得到蓬勃的發展與迭代。Puzzlescript同樣適用這個道理。經歷了十來年的發展,Puzzlescript已經擁有了成熟的論壇,以及一大批忠實的擁護者,其中不乏內容創作者、設計師、黑客、玩家、維護者、以及策展人。就連Stephen本人也在持續對該平臺進行補充與開發。
下面,我來看看如何在該平臺上搜索和運行遊戲。在展覽庫頁面上,您可以通過遊戲的名稱或作者姓名來進行搜尋。如果您比較熟悉該平臺的話,也可以使用其他一些標籤元資料。由於每個遊戲都可以被表示為一個連結,因此其他網站可以根據自己的展示意願,通過使用URL,進行有效的遊戲策劃。例如Philschatz網站便是按照遊戲的大小和挑戰難度來進行分類的。實際上,平臺的所有當前遊戲列表都會被儲存在一個json檔案中,便於您匯出自己的索引,或是託管到itch.io之類的平臺上。
3.小結
通過上文討論,我們瞭解了什麼是Puzzlescript,推箱子類遊戲的基本原理,以及如何定義相關規則。同時,我們也討論了使用者該如何建立自己的遊戲,如何修改他人的作品,以及如何通過論壇與其他開發者、乃至某個遊戲的作者直接進行溝通與交流。鑑於該平臺本身構建在開源的Github上,您何不自行設計一款小型遊戲,來練習一下自己的全棧平臺開發能力呢?
原文連結:https://thenewstack.io/puzzlescript-a-devs-guide-to-an-html5-puzzle-game-engine/
陳峻 (Julian Chen),51CTO社群編輯,具有十多年的IT專案實施經驗,善於對內外部資源與風險實施控,專注傳播網路與資訊保安知識與經驗。
- Spring中實現非同步呼叫的方式有哪些?
- 帶引數的全型別 Python 裝飾器
- 整理了幾個Python正則表示式,拿走就能用!
- SOLID:開閉原則Go程式碼實戰
- React中如何引入CSS呢
- 一個新視角:前端框架們都卷錯方向了?
- 編碼中的Adapter,不僅是一種設計模式,更是一種架構理念與解決方案
- 手寫程式語言-遞迴函式是如何實現的?
- 一文搞懂模糊匹配:定義、過程與技術
- 新來個阿里 P7,僅花 2 小時,做出一個多執行緒永動任務,看完直接跪了
- Puzzlescript,一種開發H5益智遊戲的引擎
- @Autowired和@Resource到底什麼區別,你明白了嗎?
- CSS transition 小技巧!如何保留 hover 的狀態?
- React如此受歡迎離不開這4個主要原則
- LeCun再炮轟Marcus: 他是心理學家,不是搞AI的
- Java保證執行緒安全的方式有哪些?
- 19個殺手級 JavaScript 單行程式碼,讓你看起來像專業人士
- Python 的"self"引數是什麼?
- 別整一坨 CSS 程式碼了,試試這幾個實用函式
- 再有人問你什麼是MVCC,就把這篇文章發給他!