大富翁結合RPG是從什麼時候開始我沒研究過，但是小時候就用紙當卡片畫遊戲卡，並且在紙上畫不同的地圖，並用骰子當移動方式，開始一場怪物道館挑戰與蒐集(對戰是用剪刀石頭布來判斷攻擊成功與否)！是當時我跟我朋友們的回憶~而那時的我還沒接觸電腦遊戲呢。
當我看到我以前自製的桌遊搬到了手機或電腦線上遊戲中，感覺很微妙呢~(雖然這靈感並不是那麼稀奇)
用大富翁結合RPG的遊戲已經不新鮮了，但是移動的方式、地圖每格的突發狀況卻可以一而再再而三的引起玩家每一格都有不同的樂趣。
現在，就用一個傳統的大富翁結合RPG遊戲來學習並延伸設計吧!
先來玩玩這簡單的遊戲：http://shuinvy.pancakeapps.com/MonoRPG/
我把遊戲分成幾個部分：
遊戲初始、地圖產生器、擲骰子、角色移動、遊戲紀錄。
因為你不是我，所以建議不要照著上面的做，一定要先把你覺得最難的部分完成，再去想其他部分(我個人是這樣)。
因此，我是先用地圖產生器的部分。
撇開css的部分，
思考邏輯由陣列發想，使用陣列畫假想地圖。
需要注意的是，地圖上的格子要連在一起(不能讓角色斜著走,否則要另外設計移動模式)，並且不能走岔路(他無法自行判斷往哪條路走)。
你可以不用環狀路線而一個直線到底。
先來看陣列：
//0=沒效果(例如一開始),1=金幣,2=好感度,3=怪物出現,4=陷阱
var line1=new Array(0, 1, 1, 1, 2, 2, 2,2);
var line2=new Array(3,null,null,null,null,null,null,4);
var line3=new Array(2,null,null,null,null,null,null,3);
var line4=new Array(1,null,null,null,null,null,null,1);
var line5=new Array(1, 1, 1, 2, 2, 0, 3,4);
var place=new Array(line1,line2,line3,line4,line5);
//0=不動,1=向右,2=向下,3=向左,4=向上,null代表沒有空格
var ordr1=new Array(1, 1, 1, 1, 1, 1, 1,2);
var ordr2=new Array(4,null,null,null,null,null,null,2);
var ordr3=new Array(4,null,null,null,null,null,null,2);
var ordr4=new Array(4,null,null,null,null,null,null,2);
var ordr5=new Array(4, 3, 3, 3, 3, 3, 3,3);
var orders=new Array(ordr1,ordr2,ordr3,ordr4,ordr5);
其實註解都有解釋清楚，就是照著自己設計的地圖需求，建立你想要的地圖長相。
要注意的地方是：
不管你的地圖長相如何，都要畫出一個完整的矩形(只有直線也是矩形的一種)，
就算你的地圖是之字形，也請將空格的地方用null補齊。
orders矩陣則是做人眼判斷。若使用演算法，對於初學者會太難，因此改成用人眼判斷此格要往哪走(目前只能上下左右走,因為順時針,因此以右下左上為優先順序)
陣列設定好了後，
就用程式產生地圖：
function Map_Render(map,place,character,char_height,area_size,types,order){
var place_render="";
place_render+="<table id=tbMap cellpaing=0 cellspacing=0>";
for(var p in place){
place_render+="<tr>";
for(var l in place[p]){
if(place[p][l]==null) place_render+="<td></td>";
else place_render+="<td class='area"+place[p][l]+"' style='background: url(\"image/map/area"+place[p][l]+".png\");'></td>";
}
place_render+="</tr>";
}
place_render+='</table>';
$("#"+map).html(place_render);
}
簡單來說就是用<table>產生你要的陣列，
思考我們的地圖是在什麼時候'換行'呢?
就是我們line1陣列跑到結束的時候！然後再換行接著line2。
因此用迴圈跑place陣列。
為了客製化，我將這部分用成功能，
使用者只要這樣呼叫即可：
//參數意義： 產生地圖的id,地圖陣列,角色的id,角色的高度,地圖每格的寬度,擲骰子的方法(false代表隨機;true代表隨骰子結果選擇),角色走路順序
Map_Render("map",place,"char1",70,50,false,orders);
不過你會發現後面還有些參數沒有用到，之後的教學會做說明。
在css的部分，
則是這樣設計：
#tbMap td{
width: 50px;
height: 50px;
padding: 0px;
}
也就是確保每個格子大小都跟你的圖檔大小一樣50x50(px)。
假如你的圖檔比較大，記得改css還有javascript裡的50參數喔!
至於地圖的檔名請以area1~area5.png命名!
你的地圖也許會有其他更複雜的功能(比方走到這格要後退之類)，
但是先從我預設好的5種地圖環境做設計吧！
雖然地圖產生程式碼很短，
可能還是要稍微想一下才能解出來。
第一階段的分享到這!