一個400行程式碼的網頁遊戲（二）
先點選開啟，再點選開啟展示，需要引入jquery.js檔案，上下左右鍵盤控制操作
<%@ 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();
},
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";
},
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;
return;
} else{
return;
};
}
};
msg.say("沒有事情發生，繼續探索吧");
}
};
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;
},
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,"水"],//名字，基礎血量，等級，半徑,血,藍，水屬性
};
//怪物的實際具體成長
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] = "水";
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],100,40);
msg.canvas.fillText("氣血:"+realrole.role[2],100,50);
msg.canvas.fillText("法力:"+realrole.role[3],100,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],240,40);
msg.canvas.fillText("屬性:"+mp[6],240,50);
msg.canvas.beginPath();
msg.canvas.arc(240+mp[3],60,mp[3],0,2*Math.PI);
msg.canvas.fill();
msg.canvas.fillText("等級:"+mp[2],290,40);
msg.canvas.fillText("氣血:"+realmon.mon[4],290,50);
msg.canvas.fillText("法力:"+realmon.mon[5],290,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>
相關文章
- iOS的一些常用程式碼（二）iOS
- 60個有用CSS程式碼片段(二)CSS
- 求一個數的二進位制數中所含1的個數的程式碼實現
- 一個濫用程式碼的案例
- 用java做一個簡單的二維碼Java
- proe二次開發的第一個程式
- 分享一個二維碼編解碼Python呼叫示例程式碼，不瞭解一下嗎Python
- DCI的一個Javascript實現程式碼JavaScript
- 微信小程式：小程式碼、小程式二維碼、普通二維碼微信小程式
- 一個delphi開發的惡意程式程式碼薦
- 第一個Spring程式(程式碼篇)Spring
- 分享一個canvas程式碼2Canvas
- 編寫一個分析程式碼依賴的工具（一）
- 敲程式碼時的一個小疑問
- java的一個方便的敲程式碼軟體Java
- C++的一個記日誌的程式碼C++
- 冪的一個公式（二）公式
- 十款程式碼表白特效，一個比一個浪漫！特效
- Android Annotation-讓你的程式碼更加優雅（二）做一個Java詩人（JavaPoet）AndroidJava
- 一個新手為老程式碼寫測試程式的心得
- 好程式碼、壞程式碼之二
- 做一個程式碼閱讀器
- 求一個java程式碼生成工具Java
- 寫一個簡單的程式碼生成器
- 一個遍歷驅動器的c程式碼C程式
- 一個網站故障排查的、程式碼更新的簡便指令碼網站指令碼
- 開源低程式碼平臺開發實踐二：從 0 構建一個基於 ER 圖的低程式碼後端後端
- 實現一個簡單版本的vue及原始碼解析(二)Vue原始碼
- [VS Code擴充套件]寫一個程式碼片段管理外掛（二）：功能實現套件
- 直接拿來用 九個超實用的PHP程式碼片段（二）PHP
- 網頁遊戲（三）網頁遊戲
- 二 ASP.NET MVC 第一個程式 hello worldASP.NETMVC
- 第二個 CUDA 程式
- 七個不一樣的Python程式碼寫法，讓你寫出一手漂亮的程式碼Python
- 一個二線城市程式設計師-週末一天的生活程式設計師
- 二：快排程式碼
- Lambda和清潔程式碼的一個重構案例 - frankel
- Netty實現的一個非同步Socket程式碼Netty非同步