<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/jquery-1.9.1.js" charset="UTF-8"></script>
<script type="text/javascript">
var map ={
pos:new Array(),
canvas:"",
pad:20,//間距
init:function(){
map.initMap();
map.initCanvas();
map.initPath(); //畫圖的兩種方式
map.initPathByImg();//方法不妥，仍然會被擦出
},
initCanvas:function(){
var main = document.getElementById('main');
map.canvas=main.getContext("2d");
},
initMap:function(){
map.pad=20;
map.pos=new Array();
for(var i=0;i<11;i++){
map.pos[i] = new Array();
for(var j=0;j<11;j++){
map.pos[i][j]=i+" "+j;
}
}
},
initPath:function(){
for(var i=0;i<11;i++){
var line = map.pos[i][0].split(" ");
map.canvas.moveTo(line[0]*map.pad,line[1]*map.pad);
var lineend = map.pos[i][10].split(" ");
map.canvas.lineTo(lineend[0]*map.pad,lineend[1]*map.pad);
map.canvas.stroke();
}
for(var i=0;i<11;i++){
var line = map.pos[0][i].split(" ");
map.canvas.moveTo(line[0]*map.pad,line[1]*map.pad);
var lineend = map.pos[10][i].split(" ");
map.canvas.lineTo(lineend[0]*map.pad,lineend[1]*map.pad);
map.canvas.stroke();
}
},
initPathByImg:function(){
var pic = new Image();
pic.src="/wanju3/img/bg.jpg";
map.canvas.drawImage(pic,-1,0);
},
realPad:function(currpad){//可能用不上了
return currpad * map.pad;
}
};
var role={
name:"千重喚",
pos:"0 0",
blood:100,
magic:100,
degree:10,
phyinjury:0,
maginjury:0,
fangyu:0,
speed:0,
tili:0,
liliang:0,
lingli:0,
minjie:0,
shengwang:0,
type:"金",
img:"",
currpill:"qisehua",
canvas:"",
r:5,
x:0,
y:0,
array:"left",
canmove:true,
init:function(){
role.initPos();
role.initRole();
role.initScene();
role.initRoleImg();
realrole.init(role);
},
initPos:function(){
role.pos=map.pos[0][0];
},
initRole:function(){
role.name="千重喚";
role.degree=10;
role.calcuProperties();
},
initRoleImg:function(){
role.r=5;
role.x=1;
role.y=2;
role.canvas = map.canvas;
role.canvas.beginPath();
role.canvas.arc(role.realPad(role.x),role.realPad(role.y),role.r,0,2*Math.PI);
role.canvas.fill();
},
calcuProperties:function(){
role.tili=role.degree+role.degree;
role.lingli=role.degree+role.degree;
role.liliang=role.degree+role.degree;
role.minjie=role.degree+role.degree;
},
calcuShow:function(){
role.blood = role.degree * 800 + role.tili * role.tili ;
role.magic = role.degree* 800+ role.lingli * role.lingli;
role.fangyu= role.degree * 800+ role.tili * role.tili /4;
role.speed= role.degree * 800 + role.minjie * role.minjie/4;
role.phyinjury=role.degree * 10 + role.liliang * 10;
role.maginjury=role.degree *10+role.lingli*10;
},
initScene:function(){
},
addPill:function(){
for(var i=0;i<pill.pills.length;i++){
if(role.currpill.equals(pill.pills[i])){
}
}
},
realPad:function(rolepos){
return rolepos * 20;
},
move:function(){
if(role.canmove==false){
//msg.say("進行任務，不可移動");
return;
};
if(role.array==("left")){
role.clearOrigin();
role.x = role.x-1;
role.canvas.beginPath();
role.canvas.arc(role.realPad(role.x),role.realPad(role.y),role.r,0,2*Math.PI);
role.canvas.fill();
}
else if(role.array==("right")){
role.clearOrigin();
role.x = role.x+1;
role.canvas.beginPath();
role.canvas.arc(role.realPad(role.x),role.realPad(role.y),role.r,0,2*Math.PI);
role.canvas.fill();
}
else if(role.array==("up")){
role.clearOrigin();
role.y = role.y-1;
role.canvas.beginPath();
role.canvas.arc(role.realPad(role.x),role.realPad(role.y),role.r,0,2*Math.PI);
role.canvas.fill();
}
else if(role.array==("down")){
role.clearOrigin();
role.y = role.y+1;
role.canvas.beginPath();
role.canvas.arc(role.realPad(role.x),role.realPad(role.y),role.r,0,2*Math.PI);
role.canvas.fill();
}
role.happen();
},
clearOrigin:function(){
role.clearMethod2();
role.repairPath();
},
clearMethod2:function(){
role.canvas.beginPath();
role.canvas.fillStyle="white";
role.canvas.arc(role.realPad(role.x),role.realPad(role.y),role.r+2,0,2*Math.PI);
role.canvas.fill();
role.canvas.fillStyle="black";
},
repairPath:function(){
map.initPathByImg();//修復路徑
scene.init();
//map.initPath();
},
happen:function(){
for(var i=0;i<scene.things.length;i++){
if(scene.things[i][1]==role.x&&scene.things[i][2]==role.y){
if("monster"==scene.things[i][3]){
msg.say("發現怪物 "+scene.things[i][0][0]+",開始pk");
msg.descOrChangeMonOrPill(scene.things[i][0]);
role.canmove=false;
role.batty();
return;
} else{
return;
};
}
};
msg.say("沒有事情發生，繼續探索吧");
},
batty:function(){
while(true){
realrole.role.phyinjury-
}
},
};
var realrole={
type:"金",
role:["千重喚",10],
blood:100,
magic:100,
init:function(ro){
realrole.role[0]=ro.name;
realrole.role[1]=ro.degree;
realrole.role[2]=800*realrole.role[1]+ro.tili*ro.tili;
realrole.role[3]=800*realrole.role[1]+ro.lingli*ro.lingli;
realrole.role[4]=role.type;
realrole.role[5]=ro.liliang*10;//wushang
realrole.role[6]=ro.lingli*10;//fashang
realrole.role[7]=ro.tili*10;//fangyu
},
getBlood:function(){
return realrole.role[2];
},
};
var pill={
pills:new Array(),
type:"qixue",
pillname:"qisehua",
blood:new Array(),
magic:new Array(),
property:new Array(),
qisehua:100,
laojiu:100,
tulingdan:1,
types:new Array(),
init:function(){
pill.initType();
pill.initDetail();
},
initType:function(){
pill.types[0]="blood";
pill.types[1]="magic";
pill.types[2]="property";
},
initDetail:function(){
pill.blood[0]=pill.qisehua;
pill.magic[0]=pill.laojiu;
pill.property[0]=pill.tulingdan;
pills[0]="qisehua 100";
pills[1]="laojiu 100";
pills[2]="property 1";
},
};
var scene={
canvas:"",
things:new Array(),
init:function(){
scene.canvas=role.canvas;
scene.initMonster();
scene.initPill();
},
initMonster:function(){
scene.pos(4, 4, monster.qingwa);
scene.things[0]=[monster.qingwa,4,4,'monster'];//
realmon.init(monster.qingwa);//初始化怪物屬性
},
initPill:function(){
},
pos:function(x,y,m){
scene.canvas.beginPath();
scene.canvas.arc(role.realPad(x),role.realPad(y),m[3],0,2*Math.PI);
scene.canvas.fill();
},
};
var monster={
qingwa:['青蛙',200,5,4,100,100,"水"],//名字，基礎血量，等級，半徑,血,藍，水屬性
degree:0,
liliang:1,
lingli:1,
minjie:1,
tili:1,
};
//怪物的實際具體成長
var realmon={
blood:100,
magic:100,
mon:"",
init:function(mon){
realmon.blood=mon[2]*10+mon[1];
realmon.magic=mon[2]*10+mon[1];
mon[4] = realmon.blood;
mon[5] = realmon.magic;
mon[6] = "水";
mon[7] = mon[2]*2*10;//物傷
mon[8] = mon[2]*2*10;//法傷
mon[9] = mon[2]*2*10;//防禦
realmon.mon=mon;
},
getBlood:function(mon){
return blood;
}
};
var msg = {
curryposition:0,
canvas:"",
msgs:[
"Hi！我叫"+role.name+",我今天要開始我的尋寶之旅",//0
],
init:function(){
msg.initCanvas();
msg.initRoleAndOtherData();
msg.initMsg();
},
initCanvas:function(){
var message = document.getElementById('msg');
msg.canvas=message.getContext("2d");
},
initRoleAndOtherData:function(){
msg.canvas.beginPath();
msg.canvas.fillStyle="rgba(255,255,255,0.5)";
msg.canvas.strokeRect(20,20,360,100);
msg.canvas.fillStyle="black";
msg.canvas.fillText("姓名:"+role.name,40,40);
msg.canvas.fillText("屬性:"+realrole.role[4],40,50);
msg.canvas.beginPath();
msg.canvas.arc(40+role.r,60,role.r,0,2*Math.PI);
msg.canvas.fill();
msg.canvas.fillText("等級:"+realrole.role[1],90,40);
msg.canvas.fillText("氣血:"+realrole.role[2],90,50);
msg.canvas.fillText("法力:"+realrole.role[3],90,60);
msg.canvas.fillText("物傷:"+realrole.role[5],140,50);
msg.canvas.fillText("法傷:"+realrole.role[6],140,40);
msg.canvas.fillText("防禦:"+realrole.role[7],140,60);
},
initMsg:function(){
msg.canvas.beginPath();
msg.canvas.fillStyle="rgba(255,255,255,0.5)";
msg.canvas.strokeRect(20,130,360,160);
msg.canvas.fillStyle="black";
msg.canvas.fillText(msg.msgs[0],40,150);
msg.curryposition=150;
},
say:function(content){
msg.canvas.fillText(content,40,msg.curryposition+10);
msg.curryposition = msg.curryposition+10;
},
descOrChangeMonOrPill:function(mp){
msg.canvas.fillText("名稱:"+mp[0],210,40);
msg.canvas.fillText("屬性:"+mp[6],210,50);
msg.canvas.beginPath();
msg.canvas.arc(210+mp[3],60,mp[3],0,2*Math.PI);
msg.canvas.fill();
msg.canvas.fillText("等級:"+mp[2],260,40);
msg.canvas.fillText("氣血:"+realmon.mon[4],260,50);
msg.canvas.fillText("法力:"+realmon.mon[5],260,60);
msg.canvas.fillText("物傷:"+mp[7],310,40);
msg.canvas.fillText("法傷:"+realmon.mon[8],310,50);
msg.canvas.fillText("防禦:"+realmon.mon[9],310,60);
},
};
var operation = {
begin:function(){
map.init();
role.init();
scene.init();
},
beginMsg:function(){
//要先初始化資料，然後才展示，有時間差，所以兩個方法寫
msg.init();
}
};
$(document).keydown(function(e)
{
switch(e.which){
case 37://zuo
{
role.array="left";
role.move();
break;
}
case 38://shang
{
role.array="up";
role.move();
break;
}
case 39://you
{
role.array="right";
role.move();
break;
}
case 40://xia
{
role.array="down";
role.move();
break;
}
}
});
var test = {
tt1:111,
tt2:test.tt1,
qingwa:[['qingwa'],[5],[1000][4]],//名字, 等級，血量，半徑
init:function(a){
alert(a);
},
testarray:function(){
},
testarray2:function(){
var a = new Array();
a=[1,2,3,4,5];
a[6]=7;
alert(a);
},
testvalue:function(){
alert(test.tt2);//測試不可用
},
};
function test(){
var tt = document.getElementById("main");
var t =tt.getContext("2d");
alert(t);
};
</script>
</head>
<body>
<input type="button" value="測試canvas功能" onclick="test()"/>
<input type="button" value="測試帶參" onclick="test.init(4)"/>
<input type="button" value="測試帶參" onclick="test.testarray()"/>
<input type="button" value="測試陣列" onclick="test.testarray2()"/>
<input type="button" value="測試自身賦值" onclick="test.testvalue()"/>
<input type="button" value="開啟" onclick="operation.begin()"/>
<input type="button" value="開啟展示" onclick="operation.beginMsg()"/><br>
<canvas id="main" width=200 height=200 style="border:1px solid">
</canvas><br>
<canvas id="msg" width=400 height=300 style="border:1px solid">
</canvas>
</body>
</html>