SV~

這是這個範例的最後一個處理了，

上網址做最後的參考：http://shuinvy.pancakeapps.com/MonoRPG/

再次提醒，因為遊戲是放在網頁空間，因此圖片下載會比較久。

建議你將檔案下載下來，

若無法下載，

請先建立一個資料夾叫做MonoRPG，對著遊戲頁面的網頁按右鍵->另存檔案到這個資料夾中，將整個html另存起來。
再來就是將圖檔另存新檔，請點右鍵->檢查，右邊視窗的Styles會顯示background: url("image/map/area4.png");
對著url內容按右鍵->Open image in new tab
就可以對圖片按右鍵另存影像了。
接著將圖片存在對應的資料夾中(需要自己創建新資料夾)。

遊戲紀錄的部分，

必須修改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>';
	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);
}

其中也包含重玩按鈕。

接著，遊戲紀錄是隨著Options的判斷顯示結果，

以遇到怪物為例，

Options是這樣寫：

//遇到怪物
//假設是偷金幣的怪物。若沒金幣則扣命(對,這角色很弱還打不贏怪物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();
	}
}

因此利用showLog來做紀錄的顯示：

function showLog(types,values){
	switch(types){
		case 1:
			$("#Logs").append('<div style="height:20px;line-height:20px;">得到'+values+'元</div>');
			break;
		case 2:
			$("#Logs").append('<div style="height:20px;line-height:20px;">增加'+values+'好感度</div>');
			break;
		case 3:
			$("#Logs").append('<div style="height:20px;line-height:20px;">遇到怪物!被偷走'+values+'元</div>');
			break;
		case 4:
			$("#Logs").append('<div style="height:20px;line-height:20px;">遇到怪物!身上錢不夠!遭到怪物攻擊'+values+'生命點</div>');
			break;
		case 5:
			$("#Logs").append('<div style="height:20px;line-height:20px;">踩到陷阱!扣'+values+'生命點</div>');
			break;
		case 6:
			$("#Logs").append('<div style="height:20px;line-height:20px;">失去生命點數,遊戲結束!</div>');
			break;
	}
	var Logs=document.getElementById("Logs");
	Logs.scrollTop = Logs.scrollHeight;
}

如果你想要改文字敘述，就改這部分就可以了。

var Logs=document.getElementById("Logs");
Logs.scrollTop = Logs.scrollHeight;

則是讓遊戲紀錄的卷軸永遠保持在最下方，否則使用者就要自己拉卷軸了。

而遊戲結束的部分也用到了遊戲紀錄做提示：

//遊戲結束的處理
function GameOver(){
	$("#"+lbHP).css("color","red");
	if(timerAnime) clearTimeout(timerAnime);
	if(timerMove) clearTimeout(timerMove);
	if(timerDice) clearInterval(timerDice);
	$("#btnDice").prop("disabled",true);
	$("#lbDice").html("");
	isGame=false;
	showLog(6,null);
	$("#btnReplay").show();
	//alert("遊戲結束!");
}

也就是將所有動畫、計時器關閉，讓使用者無法再按擲骰子按鈕，
並且將重玩按鈕顯示出來。

下面還有個alert("遊戲結束!");是跳出彈出視窗，

當時我不想要做遊戲紀錄功能，因此用這個偷工減料。

後來還是做了遊戲紀錄功能，因此將這個彈出視窗給取消掉(一方面是一些瀏覽器會擋住彈出視窗)。

那麼這個小遊戲的教學就到這，

還有很多需要思考的地方：

1. 你會注意到，當角色在往上和往下移動時很突兀，可以將地圖和移動方式改成六角形地板，並往斜的走。

2. 教學中提到的，當角色往不同方向時，改變角色的圖片

3. 當角色遇到突發狀況時，多一點動畫效果(包括表情、陷阱的動畫等等)

4. 角色遇到怪物時，進入戰鬥場景

5. 當好感度到達某個程度做變化(可能角色就進化了)

6. 優化使用者介面(就是看起來別那麼陽春，骰子動畫可以用動態圖做效果)

7.加入音效、背景音樂

說起來能改善的地方實在太多了~~~~