1. 程式人生 > >從技術角度談如何開發一款微信聯網小遊戲

從技術角度談如何開發一款微信聯網小遊戲

微信自從有了 “跳一跳” 後微信小遊戲就開始迅速火爆起來,為跟上這股潮流,相信很多開發者都想探一探微信小遊戲是如何開發的。下面我就從技術的角度說說一下微信小遊戲如何開發的。

附:本文適合有開發經驗的人,關於如何建立微信小遊戲賬號和使用微信小遊戲開發工具就不再贅述,不瞭解的可以到微信小遊戲開發者後臺閱讀相關文件。

相關技能

拋開表面看本質,揭開微信小程式這件外套,從程式碼層面上來看,其實質就是一些 HTML5、css3 和 JavaScript 程式碼。所以微信小遊戲既不是原生遊戲(只能執行在微信中),也不完全等同H5遊戲。其實質確是面向的H5遊戲的開發者。可以說小遊戲是使用HTML5技術搭建,具有原生體驗的微信內遊戲產品。

實現一個單人版的微信小遊戲,比如俄羅斯方塊這種,主要的技術就是用jQuery原生JavaScript(實現遊戲邏輯)、CSS3(控制遊戲畫面)、加上一點DOM操作;

比如HTML5版本的傳奇世界。是基於H5遊戲引擎實現的。其主要技術:JavaScript 、H5遊戲引擎、瀏覽器API、網路通訊等。

- 開發語言

微信小遊戲只支援 JavaScript,所以遊戲邏輯相關的開發那就是JavaScript, 不過也可以使用可以編譯成JavaScript的TypeScript。

- 遊戲庫API

主要包含 HTML5的 Canvas 2D API和 WebGL API 使用任何一種API都可以完成遊戲最重要的渲染功能。

- 網路模組

實現網路對戰是需要一定的網路程式設計基礎,熟悉網路通訊相關協議,同時還要自己搭建聯網的伺服器來維護小遊戲客戶端之間的通訊。

遊戲開發

總的來說開發一款小遊戲分為兩種情況,第一種是不引用遊戲渲染引擎,遊戲聯網引擎,使用常規的開發方法,自己實現場景渲染和網路對戰開發。第二種是使用遊戲渲染引擎和遊戲聯網引擎。

完全自主研發

第一步:擬定遊戲開發方案,設計遊戲UI圖片。遊戲開發方案就是確定要開發什麼樣的遊戲,達到什麼樣的效果。設計遊戲UI圖片可以使用相關軟體如PS/CAD等。

第二步:搭建遊戲前端框架遊戲場景畫面渲染架構設計。使用HTML5和CSS3設計遊戲場景的架構,封裝好UI層處理的介面,待遊戲邏輯開發時,只需要呼叫介面即可操作UI顯示效果。

第三步:遊戲邏輯處理架構設計和實現。常用的軟體設計模式都是MVC模式,就是UI、業務邏輯和資料控制都是分開來的,使用JavaScript實現遊的邏輯控制和遊戲資料儲存。設計一套框架,同樣以介面的形式呼叫,在設計一套把UI和遊戲邏輯聯絡在一起的程式。

第四步:遊戲網路對戰伺服器搭建和伺服器程式架構設計與實現。上一步把基本遊戲邏輯都實現了,但是畢竟是互動遊戲,要實現網路通訊那還得設計一套伺服器通訊程式,用於遊戲實現網路對戰功能。伺服器程式開發有多重選擇,這裡就根據開發者自己決定。

第五步:遊戲客戶端與服務端聯調。開發好服務模組,要確保遊戲執行的穩定性和邏輯的正確性,需要花一定的時間進行聯調工作。

使用引擎工具

第一步:擬定遊戲開發方案,設計遊戲UI圖片,這裡和前面的一樣。

第二步:使用遊戲渲染引擎開發工具開發遊戲邏輯。不需要開發者關心遊戲的介面是如何渲染的,開發者只要關心遊戲實現的邏輯,對應遊戲畫面渲染可直接呼叫引擎介面來實現畫面效果。

第三步:遊戲聯網聯調。

Matchvs為例,開發者不需要自己搭建伺服器和編寫伺服器網路通訊程式,直接呼叫聯網引擎的介面,簡單易用。下面舉例說明:

先呼叫註冊介面registerUser獲取使用者資訊。

登入使用者:一個login 請求介面,一個loginResponse回撥介面檢查是否登入成功。

加入房間只要呼叫JoinRoom介面,然後就會返回JoinRoomResponse 回撥,介面引數會告訴你現在有哪些人在房間和一些房間的資訊等。還包括主動建立房間、踢人、斷線重連功能。所有介面使用方式都是一樣的。

總結

選擇通過什麼樣的方式開發微信小遊戲,主要根據自身的情況來定。完全自主研發的話會比較費時費力,(對網路通訊協議不是特別熟悉得自行購買伺服器)如果前端開發初學者或者想快速上線一款遊戲的話,建議還是你藉助引擎工具,可以減少開發時間和資金開銷。

當然,以上的步驟只是一個大致的流程,如果對自主研發或是引擎使用感興趣的,以後我再找個時間給大家詳細說說。

相關推薦

技術角度如何開發聯網遊戲

微信自從有了 “跳一跳” 後微信小遊戲就開始迅速火爆起來,為跟上這股潮流,相信很多開發者都想探一探微信小遊戲是如何開發的。下面我就從技術的角度說說一下微信小遊戲如何開發的。 附:本文適合有開發經驗的人,關於如何建立微信小遊戲賬號和使用微信小遊戲開發工具就不再贅述,不瞭解

零基礎開發程式商城

一個朋友問我能不能幫忙做個商城?我一個完整網頁都寫不出的 Android 開發者,我該怎麼拒絕呢?好吧,看在小程式這麼火的形勢下,我還是答應了!找了個開源專案,差不多花了三天時間搞定。本場 Chat 主要是講一個開源的微信小程式商城的安裝執行除錯及資料修改,包括前臺和後臺的開

如何零基礎開發程式外掛?

  前不久,微信釋放了一個重磅新能力:微信小程式外掛功能。有了它,小程式開發者就可以通過這個功能,強化自身小程式能力;小程式服務提供商也可以用它,為開發者、使用者提供強大的小程式功能支援,進一步拓展小程式能力。如何從零開發一個外掛呢?今天,小豬CMS就來手把手,教你如何從零開

如何快速開發商城程序?

消息 定位 bsp 相對 weixin 經驗 運營 上線 未來 小程序的價值相信已經不用我多說,未來大部分應用場景都將使用微信小程序進行研發。開發一套商城小程序需要哪些步驟,怎麽開通?快搞定小編來為大家解疑。 第一步:確定商城小程序產品功能、UI風格 在設計小程序的時

提升活動現場互動氛圍,會動平臺上線5互動遊戲產品

微信互動小遊戲 微信互動 互動小遊戲 活動現場互動 微會動 移動互聯網、智能手機、社交媒體的快速普及,使得以微信為主的移動終端成為展商和觀眾在互聯網搜索引擎外,獲取會議等市場活動信息的另一重要入口,也成為了近幾年會議企業營銷轉戰的必爭之地。其實所有企業都可以互聯網+,只要找到你的用戶場景。

編輯器,始於顏值,忠於人品,陷於才華

優秀 操作 尋找 模式 吸引力 現在 自己的 nag 聊天 現如今,隨著科技的進步,互聯網的發展,手機 成了人手必備的交流溝通工具,而微信自然而然的占據了較大的使用率。我們使用微信聊天,看訂閱號。訂閱號裏面吸引人眼球的當屬於那些題目有吸引力,圖片精美,內容有深度的文章。 現

介紹 客服平臺系統

近10億的微信使用者帶來的6000億的市場,創造了微營銷模式。微營銷模式下,幾乎所有公司或個人都開始在微信上開發客戶,隨著微信客戶數量的壯大,為了更好地服務客戶,不少人選擇為微信個人號使用聚播客服系統,那麼聚播微信個人號客服系統都有哪些功能呢? 多賬號統一接入,個人號聚合運

網頁遊戲開發實踐——走過的坑

最近在做一個專案,客戶要求在微信內執行。 首先嚐試cocos2d-x進行開發,後來發現有很多函式在微信瀏覽器(和QQ瀏覽器用的相同的核心)內不能正常執行,在其他瀏覽器內調的好好的效果,用微信瀏覽器完全沒顯示。

450多H5遊戲原始碼之H5遊戲原始碼大集合持續更新中

今天把本博主近幾年來收集整理的近450多款H5小遊戲原始碼釋出出來,所有的原始碼都是我經過測試執行無誤的,以後我還會不定時更新的,因為原始碼是打包整合的,一個一個更新太煩,所以我都是一批一批的更新的,一段時間後我會把近期整理測試的一批原始碼更新上去,所以感興趣的可以持續關注,

HTML5遊戲之推箱子

經典的推箱子是一個來自日本的古老遊戲,目的是在訓練你的邏輯思考能力。在一個狹小的倉庫中,要求把木箱放到指定的位置,稍不小心就會出現箱子無法移動或者通道被堵住的情況,所以需要巧妙的利用有限的空間和通道,合理安排移動的次序和位置,才能順利的完成任務。推箱子游戲是一種老少皆宜的益

demo遊戲:飛機大戰從無到有

微信demo遊戲飛機大戰從無到有   現在建立新專案會預設給飛機大戰的demo,這裡給大家從基礎開始講解遊戲的從無到有是怎麼實現的。   具體實現步驟: 建立背景圖->背景圖運動起來->建立飛機並隨背景圖一起動->控制飛機移動->飛機發射子彈->建立

零到,使用實時音視頻 SDK 一起開發 Zoom 吧

暴露 返回 詳細 ack 滿足 html 說了 scribe Once zoom(zoom.us) 是一款受到廣泛使用的在線會議軟件。相信各位一定在辦公、會議、聊天等各種場景下體驗或者使用過,作為一款成熟的商業軟件,zoom 提供了穩定的實時音視頻通話質量,以及白板、聊

開發即時通訊App,這幾步開始

聯系 多功能 數據監控 live 裁剪 ren vertica super 聯系人 歡迎大家前往騰訊雲+社區,獲取更多騰訊海量技術實踐幹貨哦~ 本文由騰訊雲視頻發表於雲+社區專欄 關註公眾號“騰訊雲視頻”,一鍵獲取 技術幹貨 | 優惠活動 | 視頻方案 “晚上去哪吃

零到,使用實時音視訊 SDK 一起開發 Zoom 吧

zoom(zoom.us) 是一款受到廣泛使用的線上會議軟體。相信各位一定在辦公、會議、聊天等各種場景下體驗或者使用過,作為一款成熟的商業軟體,zoom 提供了穩定的實時音視訊通話質量,以及白板、聊天、螢幕共享、PPT放映等常用功能。但是在當今瀏覽器成為端上主流的時代,實時音視訊又怎甘於落後呢?相比

開發筆記APP——神馬筆記WhatsNote

從零開發一款筆記APP——神馬筆記WhatsNote 一、主要功能 二、開發過程 三、優質的筆記應用 四、附錄 一、主要功能 筆記的主要功能分為三個部分: 管理 目錄——

“零”開發知識圖譜應用產品

課程介紹 本達人課展現了從“零”開始完成一個知識圖譜應用產品開發過程的完整實錄。 這裡的“零”,意味著對讀者的“零 Python 程式語言基礎”以及“零知識圖譜知識基礎”的要求。本次課程的學習,猶如讀者與作者共同進行的一次徒手攀巖歷程,只要讀者按著作者的思路,邊學邊實踐,最終將勇攀知識和技術的懸

開發簡單的百度程式(由程式遷移過來)

開發一款簡單的百度小程式(由微信小程式遷移過來) 百度小程式剛出兩個月不久,上個週末閒來無事,看了一下百度小程式的文件,百度下程式的文件跟微信的差不了多少,就是一些api和語法會有一點差別,基本上能寫微信小程式的都能很快學會百度小程式!不過百度小程式的開發者工具真的沒有微信的好。我寫

開發APP 三、Java Web後端登陸介面的設計

一、邏輯設計: 在設計好並做完註冊介面後,我們就需要做登陸介面了,其實登陸介面非常的簡單,去資料庫中驗證其使用者名稱和密碼(當然,傳輸的資料要進行加密,我們會在後面統一加密方法),如果正確,那麼要傳回其相應的token,使用者得到其token之後,以後就可以使用這個tok

零開始開發Android App

Google在I/O 2014上推出Material Design(材料設計)規範後,被外界稱讚:“Google 第一次在設計方面超越了Apple。”,隨著Android5.0的市場佔有率增加,Material Design越來越被開發者和使用者所接受。本文內容旨在介紹Material Design在具體