<%@ 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();
},
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();
}
},
realPad:function(currpad){//可能用不上了
return currpad * map.pad;
}
};
var role={
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:"jin",
img:"",
currpill:"qisehua",
canvas:"",
r:5,
x:0,
y:0,
array:"left",
init:function(){
role.initPos();
role.initRole();
role.initScene();
role.initRoleImg();
},
initPos:function(){
role.pos=map.pos[0][0];
},
initRole:function(){
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.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();
}
},
clearOrigin:function(){
role.clearMethod2();
},
clearMethod2:function(){
role.canvas.beginPath();
role.canvas.fillStyle="white";
role.canvas.arc(role.realPad(role.x),role.realPad(role.y),role.r,0,2*Math.PI);
role.canvas.fill();
role.canvas.fillStyle="black";
}
};
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 gate={
init:function(){
map.init();
role.init();
}
};
var scene={
canvas:"",
init:function(){
scene.canvas=role.canvas;
scene.initMonster();
scene.initPill();
},
initMonster:function(){
scene.pos(4, 4, 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:['qingwa',5,1000,4],
};
var operation = {
begin:function(){
gate.init();
scene.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 = {
qingwa:[['qingwa'],[5],[1000][4]],//名字, 等級，血量，半徑
init:function(a){
alert(a);
},
testarray:function(){
},
};
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="operation.begin()"/><br>
<canvas id="main" width=200 height=200 style="border:1px solid">
</canvas>
</body>
</html>