大富翁結合RPG是從什麼時候開始我沒研究過，但是小時候就用紙當卡片畫遊戲卡，並且在紙上畫不同的地圖，並用骰子當移動方式，開始一場怪物道館挑戰與蒐集(對戰是用剪刀石頭布來判斷攻擊成功與否)！是當時我跟我朋友們的回憶~而那時的我還沒接觸電腦遊戲呢。
當我看到我以前自製的桌遊搬到了手機或電腦線上遊戲中，感覺很微妙呢~(雖然這靈感並不是那麼稀奇)
用大富翁結合RPG的遊戲已經不新鮮了，但是移動的方式、地圖每格的突發狀況卻可以一而再再而三的引起玩家每一格都有不同的樂趣。
現在，就用一個傳統的大富翁結合RPG遊戲來學習並延伸設計吧!
繼續上網址做參考：http://shuinvy.pancakeapps.com/MonoRPG/
接續上一篇，
我們設計一個可以用來顯示角色資訊的部分：
<div id="info"><table class="noselect"><tr><td align="right">金錢:</td><td align="left" id="lbMoney">0</td></tr><tr><td align="right">好感度:</td><td align="left" id="lbLove">0</td></tr><tr><td align="right">HP:</td><td align="left" id="lbHP">500</td></tr></table></div>
接著要來探討Options的部分：
function Options(place,p,l){
switch(place[p][l]){
case 1:
//金幣
//將來可以去商店買道具,目前暫時是怪物的買路財Orz
var incre=(monmin + parseInt(Math.random()*(parseInt(monmax-monmin)+1)));//一次增加10~30
coin+=incre;
$("#"+lbCoin).html(coin); //將結果顯示在畫面
//console.log(place[p][l]+",money+"+incre);
//顯示紀錄
showLog(1,incre);
break;
case 2:
//好感度
//好感度到一定程度就會進化,但目前還沒有這個功能
var nice=(lovemin + parseInt(Math.random()*(parseInt(lovemax-lovemin)+1)));//一次增加1~6
fav+=nice
$("#"+lbLove).html(fav); //將結果顯示在畫面
//console.log(place[p][l]+",love+"+nice);
//顯示紀錄
showLog(2,nice);
break;
case 3:
//遇到怪物
//假設是偷金幣的怪物。若沒金幣則扣命(對,這角色很弱還打不贏怪物XDDD)
var theaf=(theafmin + parseInt(Math.random()*(parseInt(theafmax-theafmin)+1)));//一次減少100~300
if(coin>theaf){ //要錢夠才能扣錢
coin-=theaf;
$("#"+lbCoin).html(coin); //將結果顯示在畫面
//console.log(place[p][l]+",money-"+theaf);
//顯示紀錄
showLog(3,theaf);
}else{ //沒錢只好被怪打了Orz
var attacked=(attackmin + parseInt(Math.random()*(parseInt(attackmax-attackmin)+1)));//一次減少200~500hp
if(health>attacked){ //命夠多才能扣
health-=attacked;
$("#"+lbHP).html(health);
//console.log(place[p][l]+",health-"+attacked);
//顯示紀錄
showLog(4,attacked);
}else{ //命太低遊戲結束
health=0;
$("#"+lbHP).html(health);
GameOver();
}
}
break;
case 4:
//遇到陷阱
var attacked=(trapmin + parseInt(Math.random()*(parseInt(trapmax-trapmin)+1)));//一次減少200~400hp
if(health>attacked){ //命夠多才能扣
health-=attacked;
$("#"+lbHP).html(health);
//console.log(place[p][l]+",health-"+attacked);
//顯示紀錄
showLog(5,attacked);
}else{ //命太低遊戲結束
health=0;
$("#"+lbHP).html(health);
GameOver();
}
break;
}
//dice=0代表角色走完格子了,使用者可以繼續擲骰子了
rollDice();
}
一樣，直接看會嚇死人，
所以我用最複雜的遇到怪物部分做說明。
用switch...case...判斷遇到的是什麼情況，
怪物的部分是case 3時：
//遇到怪物
//假設是偷金幣的怪物。若沒金幣則扣命(對,這角色很弱還打不贏怪物XDDD)
var theaf=(theafmin + parseInt(Math.random()*(parseInt(theafmax-theafmin)+1)));//一次減少100~300
if(coin>theaf){ //要錢夠才能扣錢
coin-=theaf;
$("#"+lbCoin).html(coin); //將結果顯示在畫面
//console.log(place[p][l]+",money-"+theaf);
//顯示紀錄
showLog(3,theaf);
}else{ //沒錢只好被怪打了Orz
var attacked=(attackmin + parseInt(Math.random()*(parseInt(attackmax-attackmin)+1)));//一次減少200~500hp
if(health>attacked){ //命夠多才能扣
health-=attacked;
$("#"+lbHP).html(health);
//console.log(place[p][l]+",health-"+attacked);
//顯示紀錄
showLog(4,attacked);
}else{ //命太低遊戲結束
health=0;
$("#"+lbHP).html(health);
GameOver();
}
}
其實步驟很簡單，
判斷需要扣掉的部分是什麼，並且將結果顯示在金錢和HP的文字上。
假如錢不夠扣，怪物就傷害你，可是不會拿走你的錢(如果想要怪物拿走你剩餘的錢和傷害你也可以喔)。
而你的HP變成0時(怪物攻擊你如果超過你的HP，則你的HP直接為0，而不是負的)，
遊戲就結束了。
在switch...case下方還有一個讓使用者能繼續擲骰子的部分，也就是rollDice。
rollDice的部分：
function rollDice(){
if(isGame) timerAnime=setTimeout(function(){ clearTimeout(timerAnime); dice=1; if(isGame) timerDice=setInterval(diceRound,speed); else clearInterval(timerDice); $("#btnDice").prop("disabled",false).css("cursor","default"); }, speed); //讓使用者可以擲骰子
}
雖然看起來很長，
其實就是先用isGame判斷遊戲是否無法繼續進行，
否則將dice=1回到擲骰子動畫的設定，並且繼續跑timerDice=setInterval(diceRound,speed);的動畫。
若不能繼續擲骰子了，則將骰子動畫隱藏(其實只是讓數字變成空字串)，以及不讓使用者繼續按按鈕。
到這邊，完整的遊戲就算完成了，
然而我追加了遊戲紀錄部分，一方面是給你做除錯(看骰子結果跟你設定的一不一樣)，一方面是讓使用者知道自己處於什麼階段，
否則突然命扣了，還不知道扣多少，玩起來會很疑惑。
下一篇則是比較簡單的遊戲紀錄部份了。