大富翁結合RPG是從什麼時候開始我沒研究過，但是小時候就用紙當卡片畫遊戲卡，並且在紙上畫不同的地圖，並用骰子當移動方式，開始一場怪物道館挑戰與蒐集(對戰是用剪刀石頭布來判斷攻擊成功與否)！是當時我跟我朋友們的回憶~而那時的我還沒接觸電腦遊戲呢。
當我看到我以前自製的桌遊搬到了手機或電腦線上遊戲中，感覺很微妙呢~(雖然這靈感並不是那麼稀奇)
用大富翁結合RPG的遊戲已經不新鮮了，但是移動的方式、地圖每格的突發狀況卻可以一而再再而三的引起玩家每一格都有不同的樂趣。
現在，就用一個傳統的大富翁結合RPG遊戲來學習並延伸設計吧!
還是一樣附上遊戲網址：http://shuinvy.pancakeapps.com/MonoRPG/
在上一篇，我們產生好地圖了，
接下來要讓角色站在地圖上!
角色我預設名稱叫做char1.png
而css設計則是：
#char1{
position:absolute;
background:url("../image/char/char1.png");
width:50px;
height:70px;
z-index:1000;
}
也就是將角色的大小設定好(依照圖檔大小)，且讓角色在地圖前面(z-index越大能確保越不會在後面，所以很誇張的設定成1000)。
接著在地圖產生之後讓角色站在地圖上：
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);
//讓角色在地圖初始的位置上(左上角)
var mheight=($("#"+map).height()+"").substring(0,($("#"+map).height()+"").length-2);
var mtop=$("#"+map).css("top").substring(0,$("#"+map).css("top").length-2);
var mwidth=($("#"+map).width()+"").substring(0,($("#"+map).width()+"").length-2);
var mleft=$("#"+map).css("left").substring(0,$("#"+map).css("left").length-2);
$("#"+character).css("top",mtop-char_height+area_size).css("left",mleft);
}
Map_Render的參數中，
第一個參數map是用來將地圖產生在一個div或td裡面
第二個參數place是地圖陣列
第三個參數character是你用來放角色的div的id
第四個參數char_height是你的角色的高度
第五個參數area_size是地圖每格的大小(此範例是正方形)
那你會好奇為什麼沒放上角色的寬度呢?
因為我們預設角色寬度是跟地圖每格寬度一樣，因此用area_size做代表。
後面的參數在之後的文章再說明。
主要就是用css("top",你要的位置y).css("left",你要的位置x);
來設定角色站在哪裡。
由於我們預設是讓角色站在地圖的左上角，
因此參考了地圖第一格的位置，只是用$("#"+map).css("top")或$("#"+map).width()所抓出來的值都有px單位，因此用substring(0,字串長度-2)將值抓出來(假設200px，就是抓200)
又因為你抓出來的值可能不是整數，因此用parseInt強制讓他成為數字。
那麼你的html如果長這樣：
<div id="char1"></div>
<div id="map" align="center" style="position:absolute;top:200px;"></div>
並且呼叫javascript:
//產生地圖的部分
//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);
//參數意義： 產生地圖的id,地圖陣列,角色的id,角色的高度,地圖每格的寬度,擲骰子的方法(false代表隨機;true代表隨骰子結果選擇),角色走路順序
Map_Render("map",place,"char1",70,50,false,orders);
還有對應的圖檔area1.png~area4.png以及角色圖檔char1.png，
就能跑出範例中的效果囉!