1. 程式人生 > >網頁遊戲開發入門教程一(webgame+design)

網頁遊戲開發入門教程一(webgame+design)

 一、簡單的程式框架。
webgame
程式構成:三大部分。第一是資料流程。第二是程式。第三是美術。其中,資料流程包括了功能。也只有在功能中才能體現資料流程。資料流程相當的麻煩,後面再討論。比如最簡單的賣買產品。要實現這個功能。那麼需要有產品基礎表、產品詳細表、商店表、揹包表。如果擴充套件性更強,相應的雙表是少不不了的。表的問題都簡單了。關鍵是這個物品有什麼用。這樣物品的來源,一大堆資料,物品的走向,又是一大堆資料。最後,這些資料得繞成一個圈。繞圈是一件困難的事情。特別是功能和道具多了起來的時候。難度是2n次方。

在繞圈之前,如果你比較熟練設計模式。那麼這個過程可以簡化。難度由2n次方變為1

只需要有控制器、事件工廠、抽象道具工廠這三個虛類;再加上定時器,任務編輯器,這兩個通用類。即可以構建一個健壯、高擴充套件的webgamewebgame裡控制器幾乎可以等同於頁面。隨便採用一種模板技術即能很方便的處理。事件工廠是一個抽象類,所有的事件,如打工、戰鬥、移動等都由事件工廠的生產。並且介面相同,方便控制器控制。工廠模式。抽象道具工廠是一個抽象類,所有的道具,如城市、地圖、裝備等,都由抽象道具工廠生產。並且介面相同工廠模式事件與道具的結合又是一個橋接模式。

美術:
UI
。簡潔漂亮的介面總會有好處。小圖示。道具,地圖,裝備。一類至少10個吧?大體上百把個是需要的。程式分5個部分:伺服器定時器。(

C語言或自己設定伺服器)定時迴圈執行某一段程式碼。而這段程式碼主要是根據資料庫的資料進行更新。這個可以找個C語言程式設計師來做。對於C語言程式設計師來講,這個功能是相當的簡單。當然,具體的處理資料的判斷和操作資料庫,需要你自己寫。讓C語言程式設計師給你段標準程式碼就行了。完全支援sql語句的。php的話,可以配置corn實現。但是不管是什麼作業系統,配置的時間最低是1分鐘。所以,如果你要處理1秒鐘重新整理一次的情況。你還需要專門的定時器程式來處理,或者被定時執行的php需要包含sleep().當然,即使有即時互動,可以不管伺服器端。只處理互動的雙方的客戶端。jsajax實現。功能頁面、功能函式。主要就是資料存取,判斷,資料走向。
用上抽象類,會比較輕鬆。不過子類的爆炸是少不了的了。
ajax
函式。(可選)某些需要偽即時的功能要用到。為了讓遊戲看起來酷一點。用吧。
javascript
函式。(可選)模擬客戶端的資料計算。也就是webgame的與時間相關的資料。分為兩部分。一部分是真實資料,是由伺服器端的定時器計算的。另一部分是隻有初始值,客戶端顯示用的。不需要即時同步,僅僅需要模擬同步就行。這裡還包括一些漂亮的UI特效。畢竟是遊戲。資料庫。一大堆基礎資料表和詳細資料表。基礎資料表:比如等級1到等級100的使用者的屬性初始值。詳細資料表:每個使用者的具體屬性。資料庫上,儘量優化。結構上能用1位元組的就別用2位元組。

二、一個詳細的例子。單純的討論資料流程是件痛苦的事情。討論程式而不給程式碼也是比較痛苦。這裡用的是php+mysql的。同時,這個例子沒有用到類。如果時間充足的話,今年年底,我會提供一個帶即時互動的簡單webgame程式碼和核心類來說明使用了設計模式的好處。那就按一個超簡單的webgame的方式來討論。配上適當的程式碼。應該有所幫助。不足的地方也請大家指出,對我個人也是幫助。我們不去考慮遊戲的可玩性,數值平衡等等問題。我們先只考慮一個簡單例子的實現。那麼一個webgame的基本內容需要些什麼呢?資料庫:玩家、地圖、城市、建築、武器、士兵。功能:登陸、升級、個人戰鬥、士兵之間的戰鬥、與城市的戰鬥、修建建築、打造武器、買賣道具。(注意:每一個功能,必然對應1個或多個數據表。上面資料庫中所列的只是基礎中的基礎。)首先是地圖、城市、建築。這裡認為,地圖可以有多張,城市在地圖上,建築在城市內。地圖表
Map  :Map_ID ,X
座標, Y座標,City_ID(城市ID),描述。其中Map_ID是指地圖的id。不是自動編號。一張地圖就是一個Map_ID,可以重複。城市表
City:City_ID,
城市名字,城市所有人,城市等級,城市資源,描述。建築表
Build:ID
City_ID,建築名稱,建築等級,建築功能。其中,地圖表確定城市的位置,城市表確定城市的相關資料以及所有人,建築表內的多條資訊屬於某一個城市。建表後,顯示出來。一個for迴圈。把地圖表整個取出來就ok跟普通網站的新聞列表沒太大區別。不同的是,你需要取得X座標和Y座標定位。可以用tabel也可以用div


 1 class Map//地圖類 2 {
 3 var$Map_ID;
 4 function Map_bg_css($Map_ID) {
 5  6 $this->Map_ID =$Map_ID;
 7  8 mysql_select_db($db_name,$link);
 9 $sql="select * from map where Map_ID='".$this->Map_ID."' limit 1";    
10 $result=mysql_query($sql,$link);   
11 echo"<style type="."text"."/"."css>";
12 $rs=mysql_fetch_array($result);  
13 14 echo"#map{";
15 echo"position:absolute;";
16 echo"width:".$rs[X座標]."px;";
17 echo"height:".$rs[Y座標]."px;";
18 echo"z-index:0;";
19 echo"left:0px;top:0px;}";
20 21   }
22 23 function Map_bg($Map_ID){
24 25 $this->Map_ID =$Map_ID;
26 27 $sql="select * from map where Map_ID='".$this->Map_ID."'";     
28 $result=mysql_query($sql,$link); 
29 while($rs=mysql_fetch_array($result))  
30   {
31 echo"<div id=Layer_bg_".$rs[X座標]."_".$rs[Y座標].">";
32 echo"<img src=".$rs[Map_bg]." border=0 title=".$rs[ID]."></div>";
33 34   }
35 36 
37 }
38 

上面是一個很簡單的地圖類。程式碼可能不太正確,意思是正確的。就是根據map表中的座標,生成了一組div層,以及這一組層的css你可以改為table的。你可以也把座標放到一個欄位裡,用陣列的形式取。使用的時候,用

new map;
map(N);

其中Nmap表裡的地圖Map_ID.
城市內的建築也類似。如果要顯示出來的話。關於地圖,現在我採用的方式更為簡單。通過座標來判斷需要哪些圖,然後直接顯示出來。當然沒有碰撞什麼的,因為暫時不需要。至於人物走動什麼的,不在本文討論範圍。有了地圖和城市後。涉及到的問題就是城市裡資源的產生。這時候,City表裡需要有可供判斷的時間和數量的欄位。比如:產生資金量Money,產生資金花費的時間Action_Time,上次產生資金時間Money_time這兩個欄位的數值應該在City_base表裡出現。(即城市基礎表,不同等級,不同型別城市的對應數值。這是給策劃填資料用的,建好表後就等策劃去頭痛吧。如果你身兼數職。。。)如何自動產生資源呢?我們可以在城市所有人改變的時候,寫入一個時間。或者在城市初始化的時候寫入一個時間。

$Now_Time=date('Y-m-d H:i:s');

(說明:$開頭是變數的意思。php裡特有的。如果是asp的話可以寫成。Now_Time=Now() )
$Now_Time寫入到Money_time裡。

update("UPDATE City SET  Money_time='$Now_Time  WHERE  City_ID='$City_ID' LIMIT 1;");

$City_ID是你自己定義的。指某一個城市。如:$City_ID=1;
我們假定當前城市產生資金量為100。即$Money=100;(具體的數值,應該是由City_base表裡取出的。)假設間隔時間為$Action_Time,我們再假定是每小時執行一次。即$Action_Time=3600;(具體的數值,是根據你的初始化表裡取得的。也可以根據城市等級或者使用者等級取得。反正隨便你自己怎麼設定。)這時候,有基礎時間了。有基礎資金產量了。有間隔時間了。讓它迴圈執行起來就行了。上面說過,服務端用C語言定時器。客戶端用javascript服務端,資源定時器設定為5分鐘執行一次。那麼我們的誤差就是5分鐘。對網頁遊戲來說,可以接受。(戰鬥的定時器得1分鐘吧。當然伺服器夠牛的話,幾秒鐘都可以。)當然,可以完全php寫,然後配置phpcorn。現在我在做的程式就是直接用php寫了。包括任意長時間的定時器類,專門控制抽象事件用的。C的定時器暫時沒用。每次執行什麼程式碼呢?首先得新建一個定時器任務的表。目的就是讓定時器知道需要執行哪些程式和資料的更新。表內容比如:城市資源更新。當然,這個表可要可不要。建立的好處是方便處理類似保護狀態不產生資源之類的問題。


服務端程式:獲得當前伺服器時間。獲得當前需要更新城市。判斷伺服器時間與$Money_time的時間差。(時間戳,具體的時間戳網上資料滿多的。)判斷時間差是否大於$Action_Time大於,則更新資源。同時更新$Money_time小於,則無操作。客戶端程式:獲得當前伺服器時間。獲得當前城市的$Money,$Money_time,$Action_Time使用javascript顯示剩餘時間的倒計時,以及增加的資源量。客戶端特殊情況觸發:因為客戶端顯示的資源情況是偽同步,所以當客戶端使用該資源的時候。需要服務端將當前的實際資源更新,屬於定時器處理的時間也需要更新。即,當客戶端觸發涉及資源的情況時,立即更新當前資源。同時更新定時器中會用到的$Money_time。這樣才不會造成,看的資源用不到,或者定時器重複產生資源。總體來說。這部分程式都很簡單。難點在C語言定時器的製作,以及前臺javascipt倒計時的寫法上。
C
語言定時器,找個C語言程式設計師,超簡單;前臺的javascipt,網上有很多倒計時的程式碼,找個來改改就能用。


 1 <SCRIPT LANGUAGE="JavaScript"> 2 var maxtime = 這裡是你的時間差///一個小時,按秒計算,自己調整! 3 function CountDown(){
 4 if(maxtime>=0){
 5 minutes = Math.floor(maxtime/60); 6 seconds = Math.floor(maxtime%60);
 7 msg ="你的文字說明"+minutes+""+seconds+"";//動態顯示剩餘時間。 8 document.all["timer"].innerHTML=msg;
 9 //if(maxtime == 3) document.all["timer"].innerHTML='只剩3秒!';10 --maxtime;
11 }
12 else{
13 clearInterval(timer);
14 document.all["timer"].innerHTML='時間到';
15 }
16 }
17 timer = setInterval("CountDown()",1000);
18 </SCRIPT>19 20 <div id=timer></div>21 

這個是網上找的程式碼。稍微修改就可以用的。這裡只是顯示了倒計時。也可以改為顯示資源的增加情況。

C
語言裡操作mysql資料庫。


 1 // TODO: Add your control notification handler code here 2 bool bRes = m_dbConn.Connect("資料庫ip地址"3306 , "使用者名稱""密碼""資料庫名");
 3 if(!bRes)
 4 {
 5   AfxMessageBox("connect fail");
 6 return;
 7 }
 8  9 string strSql ="select * from city limit 1";//所有顯示或取值類的都用這段。中間的sql語句可以自己構造。10 ResultSet* rs = m_dbConn.ExecuteQuery(strSql);
11 while(rs->Next())
12 {
13 string str = rs->GetString("username");
14   AfxMessageBox(str.c_str());
15 }
16 /*17 strSql = "update city set money=money +100 where City_ID='xxx'";//所有的增加、刪除、更新都用這段,中間的sql語句可以自己構造。
18 19 bRes = m_dbConn.ExecuteUpdate(strSql);
20     if(!bRes)
21 {
22   AfxMessageBox("ExecuteUpdate fail");
23 }
24 */25 m_dbConn.Close();
26 27 定時器的主函式。
28 void CBeiLiDlg::Go()
29 {
30 while(true)
31 {
32 // AfxMessageBox("go");33 34   Sleep(5*1000);//毫秒。定時器重新整理時間。35 }
36 }

當然。這裡的C的程式碼不能直接用。只是一部分。新的方法是,通過php定時器類負責前臺、時間到後,呼叫ajax執行完成。後臺通過定時執行php定時器類的專用處理函式,處理前臺掉線,前臺未正常執行等情況。

如果我們的新遊戲今年年底能正常上線的話。我可以公開這個類,沒技術含量,但是很巧妙。

地圖、城市、基本上算是有了。接下來是城市裡的建築。上面講的資源增加,其實定位在建築上更準確。不過建築的分類和數值會複雜很多。那是策劃考慮的問題。建築上,只講一個前臺的修建效果。當然,這個效果是可有可無。你可以直接給個類似新聞列表的顯示,再加個倒計時就行。顯示的效果就是,點修建後。不重新整理頁面,調入一張動畫圖片。並在時間到後自動轉換為其他圖片。

相關推薦

網頁遊戲開發入門教程webgame+design

 一、簡單的程式框架。 webgame程式構成:三大部分。第一是資料流程。第二是程式。第三是美術。其中,資料流程包括了功能。也只有在功能中才能體現資料流程。資料流程相當的麻煩,後面再討論。比如最簡單的賣買產品。要實現這個功能。那麼需要有產品基礎表、產品詳細表、商店表、揹包表。如果擴充套件性更強,相應的雙表是

Q#入門教程Q#環境配置

今天我來介紹一下Q#的配置過程!首先簡單說明一下:Q#的開發工具包在Windows(須為64位作業系統)、MacOS和Linux上都可以進行安裝,因為我的是Windows系統,所以這裡以Windows 10(64位)為例。 一、首先檢查您的Windows 10 上是否已經安裝了Visual

rabbitmq 入門教程只有佇列,不涉及路由

為何要學習rabbitmq 因為在spring cloud bus中使用到的是rabbitmq和kafka,所以就需要搞一下rabbitmq和kafka。先上圖 生產者(Producer)

tensorflow——入門程式碼minist master

一 檔案結構     並不是自己下載的程式碼,老師給的,看到readme.md猜測可能時github上下載的。先理一下這個檔案結構,最_pycache_檔案有什麼用(https://blog.csdn.net/index20001/article/details/735

用Python和Pygame寫遊戲-從入門到精通Sprite篇

本文轉載自:http://eyehere.net/2011/python-pygame-novice-professional-sprite/ 這又是Pygame教程系列的一個——OVA篇,類似於py2exe篇一樣,額外寫的,也許不是pygame遊戲開發必須

Unity3D 遊戲引擎之詳解遊戲開發音訊的播放十五

找一個音樂檔案,我這裡使用了一個.mp3音樂檔案,我命名為0.mp3 如下圖所示將它拖動到右側Audio Clip處。我們發現 Audio Source 有很多設定的屬性,那麼MOMO將一些比較重要的屬性諾列出來。AudioClip :聲音片段,還可以在程式碼中去動態的擷取音樂檔案。Mute : 是否靜音By

用Python和Pygame寫遊戲-從入門到精通py2exe篇

本文轉載自:http://eyehere.net/2011/python-pygame-novice-professional-py2exe/ 這次不是直接講解下去,而是談一下如何把我們寫的遊戲做成一個exe檔案,這樣一來,使用者不需要安裝python就可以

Cocos2d-x 遊戲 開發 之 卡牌 序篇

基於Firefly + cocos2d-x的卡牌手遊原始碼《暗黑世界》客戶端原始碼 卡牌手遊原始碼《暗黑世界》完整商用版,原始碼! 遊戲名稱:《暗黑世界》 遊戲終端:安卓(android) / IOS 遊戲型別:卡牌類 遊戲版本:V1.1 伺服器框架:Firefly Game Server Fram

遊戲開發入門遊戲開發概述

str 要掌握 strong 簡單 動手 屬於 掌握 技術 遊戲機 視頻鏈接:遊戲開發入門(一)遊戲開發概述請添加鏈接描述(3節課 時常:約1小時03分鐘) 該視頻圍繞電子遊戲的發展與開發簡單介紹了一些基本常識,同時提出並解決了幾個問題 筆記與總結(請先學習視頻內容):

遊戲開發入門遊戲引擎架構

該堂課是對遊戲引擎內容的一個概括總結,同時也是對遊戲開發技術的一個相當全面的總結。 正如我在開篇所提到的,遊戲引擎架構的學習有助於我們建立一個對遊戲全域性性的認識。 筆記與總結(請先學習視訊

使用HAL庫、STM32CubeMX和Keil 5開發入門教程:點亮盞LED燈NUCLEO-F411RE

本教程以點亮一盞LED燈為目的為大家演示用STM32CubeMX、Keil、ST-Link開發STM32程式的一般方法。 一、學習前的準備工作 硬體:一塊STM32開發板,一個ST-Link;(我使用的開發板是NUCLEO-F411RE) 軟體:裝好ST-

IOS 初級開發入門教程介紹篇

導讀        目前移動端開發市場上引導開發者追求技多不壓身,一個全棧開發者至少要懂後臺伺服器、資料庫、Android、web、ios開發等。“一超多強”是指開發者先成為一門技術的專家然後掌握瞭解多門技術,這是一種好的發展趨勢,另外,這種技多不壓身我認為當開發者更適合發

asp.net core入門教程系列

home padding 方式 title sys 活性 elf tro ash Asp.Net Core簡介 ASP.NET Core 是一個全新的開源、跨平臺框架,可以用它來構建基於網絡連接的現代雲應用程序,比如:Web 應用,IoT(Internet Of Thin

前端開發入門學習筆記

type red 學習 lin attach black 復合 等於 round HTML:超文本標記語言。 html:是一個基礎結構。 CSS:就是跟網頁做裝修的,修飾HTML的基礎內容:樣式。 JavaScript:一個網頁的行為,動作,動態的東西。 html標準文件格

WCF的入門教程dome

基本上 logs 庫服務器 aid model bar urn borde tns 一、概述   Windows Communication Foundation(WCF)是由微軟發展的一組數據通信的應用程序開發接口,可以翻譯為Windows通訊接口,它是.NET框架的一

Java EE入門教程系列——第一章Java EE的概述1

題外話:這個系列是為了記錄學習Java EE的軌跡,也算是讀書筆記,是我先看完了一遍教程對相關概念有了一個大體印象以後準備再重頭細看一遍時同步寫的部落格。感想就是其實以前課堂上老師教的課都是很有作用的,如果你能很好地掌握設計模式、計算機網路的相關知識,那麼對你理解Java EE會有很大的幫助。可能是

Java版推箱子搬箱子遊戲開發入門示例及原始碼

                推(搬)箱子,又名Sokoban,倉庫番等,是一款堪稱古玩級的電腦遊戲。提起它,筆者相信沒什麼人會感覺到陌生,更沒什麼生物會連聽都沒聽說過。它的發展歷史之久遠,甚至超越了俄羅斯方塊(1988年電腦遊戲化)。這款遊戲最初起源於日本,是個很難爭辯的事實(我知道有人反對,但筆者確實找

【Visual C++】遊戲開發五十 淺墨DirectX教程十九 網格模型進階之路

                最近幾個星期,不停地收到大家的評論和郵件,大家都說希望淺墨早點講骨骼動畫。本來按淺墨擬定的寫作計劃是把骨骼動畫放到很後面,因為骨骼動畫知識需要前面的網格模型知識為基礎,知識量本身有些大,很可能要佔很多次更新的篇幅。但是看到大家一致的評論,都說非常期待骨骼動畫。那就好吧,我們就來

遊戲開發入門十二遊戲開發全總結

通過遊戲開發入門系列的學習,是不是對遊戲開發有了一個比較清晰的認識? 在最後一篇裡面,博主試著概括性的對遊戲開發做一個總結,歡迎各位提出意見來完善這篇部落格~ 遊戲模組總結: 遊戲邏輯模組系統:各種武器,狀態,技能,揹包,戰鬥等邏輯系統 動畫模組系

遊戲開發入門遊戲中的場景管理

授課者通過2D圍棋的例子,逐步拓展成3D的虛擬遊戲世界。這個3D遊戲世界基本上就可以涵蓋市面上所有型別的遊戲了,我們通過各種手段去管理好這個遊戲世界,就能快速的進行各種遊戲邏輯的開發。 筆記與