大富翁結合RPG是從什麼時候開始我沒研究過，但是小時候就用紙當卡片畫遊戲卡，並且在紙上畫不同的地圖，並用骰子當移動方式，開始一場怪物道館挑戰與蒐集(對戰是用剪刀石頭布來判斷攻擊成功與否)！是當時我跟我朋友們的回憶~而那時的我還沒接觸電腦遊戲呢。
當我看到我以前自製的桌遊搬到了手機或電腦線上遊戲中，感覺很微妙呢~(雖然這靈感並不是那麼稀奇)
用大富翁結合RPG的遊戲已經不新鮮了，但是移動的方式、地圖每格的突發狀況卻可以一而再再而三的引起玩家每一格都有不同的樂趣。
現在，就用一個傳統的大富翁結合RPG遊戲來學習並延伸設計吧!
再次放上遊戲網址:http://shuinvy.pancakeapps.com/MonoRPG/
這次，我們在地圖下方放上一個按鈕，並且旁邊有擲骰子的動畫(其實就是數字切換)。
繼續看Map_Render方法：
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+='<tr><td align="right" colspan="'+place[p].length+'"><span id="lbDice" class="noselect">1</span><input type="button" value="擲骰子" id="btnDice"></td></tr></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);
}
跟前一篇的差別是地圖下方多了顯示骰子動畫(<span>)以及擲骰子按鈕(<input type="button">)。
接著還要再寫骰子動畫的部分：
timerDice=setInterval(diceRound,100);
function diceRound(){
if(isGame){
if(dice<6) dice++;
else dice=1;
$("#lbDice").html(dice);
}else{ $("#btnDice").prop("disabled",true); clearInterval(timerDice); }
}
簡單來說就是由1跑到6循環的跑數字，如果你有圖檔，也可以利用修改圖檔背景來做擲骰子的切換(因為我沒圖檔又懶得畫，就用文字了)
注意骰子動畫的速度，是由setInterval(diceRound,100);中的100(第二個參數)設定，
100/1000=0.1秒，所以你可以修改這個數值達到你想要的速度。
其中有個isGame的變數，是之後判斷遊戲結束時，停止骰子動畫用的。
若您想用動態圖取代數字，
可以用一個div或img來取代原本的<span id="lbDice">部分，
若用img則可以用gif做效果，用div則是修改div的背景圖片：$("#div的id").css("background","url(圖片路徑和圖檔名)");
等按下按鈕後，
將img的gif檔案換成不會動的圖片$("#img的id").prop("src","圖片路徑和圖檔名");
div則是停止用來跑動畫的計時器，這部分會在下一篇文章說明。
這邊，在css部分，我們讓使用者無法反白或呈現文字狀態的css，
如下：
.noselect{
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently
not supported by any browser */
cursor:default;
}
因此只要使用class="noselect"就可以達到效果了。
而按鈕則讓游標呈現點擊連結的手指狀態:
input[type="button"]{
cursor: pointer;
}
最後，為了讓顯示骰子動畫的文字與按鈕保持一點距離，
我們用了這樣的css:
#lbDice{
margin-right:10px;
}
如此一來我們所用到的css也介紹完畢。
下一篇再介紹擲骰子的動作。