大富翁結合RPG是從什麼時候開始我沒研究過，但是小時候就用紙當卡片畫遊戲卡，並且在紙上畫不同的地圖，並用骰子當移動方式，開始一場怪物道館挑戰與蒐集(對戰是用剪刀石頭布來判斷攻擊成功與否)！是當時我跟我朋友們的回憶~而那時的我還沒接觸電腦遊戲呢。
當我看到我以前自製的桌遊搬到了手機或電腦線上遊戲中，感覺很微妙呢~(雖然這靈感並不是那麼稀奇)
用大富翁結合RPG的遊戲已經不新鮮了，但是移動的方式、地圖每格的突發狀況卻可以一而再再而三的引起玩家每一格都有不同的樂趣。
現在，就用一個傳統的大富翁結合RPG遊戲來學習並延伸設計吧!
如果將網頁放到網路空間，而不是自己的伺服器中，
很容易造成網頁讀取圖片時，會有暫存問題而導致修改圖片背景時有切換很慢的情況，
而讓使用者覺得圖片怎麼突然消失的感覺。
為了解決這問題，
最笨蛋是最簡單的方法就是讓圖片預先讀取，
也就是用<img src="你的圖片" style="display:none;">將你的預讀圖片放在<body></body>之中。
因此原本的html部分改成了這樣：
<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>
<div id="char1" class="char char1"></div>
<div id="map" align="center" style="position:absolute;top:15%;"></div>
<img class="preload" src="image/map/area0.png">
<img class="preload" src="image/map/area1.png">
<img class="preload" src="image/map/area2.png">
<img class="preload" src="image/map/area3.png">
<img class="preload" src="image/map/area4.png">
<img class="preload" src="image/char/char1.png">
<img class="preload" src="image/char/char2.png">
而css的部分也改成這樣：
#tbMap td{
width: 50px;
height: 50px;
padding: 0px;
}
.char{
position:absolute;
width:50px;
height:70px;
z-index:1000;
}
.char1{
background:url("../image/char/char1.png");
}
.char2{
background:url("../image/char/char2.png");
}
.area0{
background:url("../image/map/area0.png");
}
.area1{
background:url("../image/map/area1.png");
}
.area2{
background:url("../image/map/area2.png");
}
.area3{
background:url("../image/map/area3.png");
}
.area4{
background:url("../image/map/area4.png");
}
input[type="button"]{
cursor: pointer;
}
#lbDice{
margin-right:10px;
}
.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;
}
.preload{
display:none;
}
除了多追加的preload部分，
也將切換圖片的部分改成用class切換。
因此地圖產生器的Map_Render就改成用class來建立地圖即可(原本的作法反而畫蛇添足呢)：
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]+"'></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>';
place_render+="<table class='noselect'><tr><td>遊戲紀錄:</td></tr><tr><td><div id='Logs' style='height:200px;width:"+(parseInt(area_size)*place[0].length)+"px;border:1px solid #cccccc;overflow-y:scroll;'></div></td></tr>";
place_render+='<tr><td align="right"><input type="button" value="重玩" id="btnReplay" style="display:none;" onclick="javascript:window.location.reload();"></td></tr></table>';
$("#"+map).html(place_render);
//按下擲骰子按鈕後的動作
$("#btnDice").click(function(){
clearInterval(timerDice); //關閉擲骰子效果
$("#btnDice").prop("disabled",true); //讓使用者等待角色移動
//這邊有兩種做法，一種是讓使用者憑感覺點到想要的數字，另一種則是用隨機(正常應該這樣做)
if(!types) dice=parseInt(Math.random()*6) + 1; //讓結果是1~6的結果(隨機)
$("#lbDice").html(dice);
//思考：每個位置都可以上下左右走，若有多重路線，則以右下左上為順序。預設是順時針走。
//現在位置在now=0，依照place陣列走對應的格數
Anime(character,dice,area_size,place,order);
});
//讓角色在地圖初始的位置上(左上角)
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);
}
而改變人物面向的方向就變成這樣寫：
$("#"+character).addClass("char1").removeClass("char2");
也就是說讓使用者面向右邊，將面向左邊的效果拿掉。
同理，面向左邊則是：
$("#"+character).addClass("char2").removeClass("char1");
如此一來，
現在的連結就不會有Flickering的問題了~(圖片切換時會消失)