一個400行程式碼的網頁遊戲（二）

瓜瓜東西發表於2014-09-20

先點選開啟，再點選開啟展示，需要引入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的一些常用程式碼（二）
2014-12-02
iOS
60個有用CSS程式碼片段(二)
2016-04-19
CSS
求一個數的二進位制數中所含1的個數的程式碼實現
2014-06-03
一個濫用程式碼的案例
2014-08-16
用java做一個簡單的二維碼
2017-06-14
Java
proe二次開發的第一個程式
2015-03-12
分享一個二維碼編解碼Python呼叫示例程式碼，不瞭解一下嗎
2018-04-26
Python
DCI的一個Javascript實現程式碼
2011-05-09
JavaScript
微信小程式：小程式碼、小程式二維碼、普通二維碼
2018-04-27
微信小程式
一個delphi開發的惡意程式程式碼薦
2010-05-10
第一個Spring程式(程式碼篇)
2020-07-04
Spring
分享一個canvas程式碼2
2018-07-18
Canvas
編寫一個分析程式碼依賴的工具（一）
2017-12-20
敲程式碼時的一個小疑問
2017-11-05
java的一個方便的敲程式碼軟體
2018-05-29
Java
C++的一個記日誌的程式碼
2014-05-14
C++
冪的一個公式（二）
2017-02-19
公式
十款程式碼表白特效，一個比一個浪漫！
2021-11-08
特效
好程式碼、壞程式碼之二
2011-08-11
Android Annotation-讓你的程式碼更加優雅（二）做一個Java詩人（JavaPoet）
2018-10-16
AndroidJava
一個新手為老程式碼寫測試程式的心得
2013-11-11
做一個程式碼閱讀器
2019-11-24
求一個java程式碼生成工具
2014-01-14
Java
開源低程式碼平臺開發實踐二：從 0 構建一個基於 ER 圖的低程式碼後端
2021-07-31
後端
寫一個簡單的程式碼生成器
2021-06-24
一個遍歷驅動器的c程式碼
2017-11-14
C程式
一個網站故障排查的、程式碼更新的簡便指令碼
2021-09-09
網站指令碼
實現一個簡單版本的vue及原始碼解析(二)
2018-10-20
Vue原始碼
直接拿來用九個超實用的PHP程式碼片段（二）
2014-03-14
PHP
二 ASP.NET MVC 第一個程式 hello world
2016-05-07
ASP.NETMVC
網頁遊戲（三）
2014-09-23
網頁遊戲
第二個 CUDA 程式
2009-11-17
七個不一樣的Python程式碼寫法，讓你寫出一手漂亮的程式碼
2018-09-05
Python
一個二線城市程式設計師-週末一天的生活
2019-05-19
程式設計師
二：快排程式碼
2017-05-05
Lambda和清潔程式碼的一個重構案例 - frankel
2020-06-25
Netty實現的一個非同步Socket程式碼
2019-03-25
Netty非同步
一個簡易版的T4程式碼生成
2021-09-09

一個400行程式碼的網頁遊戲（二）

相關文章