HTML5 GAME West Fighting / 西途决斗 框架说明

游戏的框架说明如下：

大致是这样的：游戏页面加载初始化界面相关，然后是游戏封面，游戏开始后，主要就是画布canvas的操作，不断地每隔一段时间刷新画布,刷新的内容有比较多，按游戏前面的相关定义去实现，new 指定个数的族人，和牛仔加入，位置更新，距离判断，方向修改，决斗画面制作，决斗数据更新等等...

总之象电影播放一样一桢一桢的播放那样...各个对象或类，方法分别说明如下：

<script language="javascript" type="text/javascript">
//---------------------start: bloodBottle define---------------------
var bloodBottle = {

//...定义血瓶...（还没有实现这个功能）

};
//---------------------end: bloodBottle define---------------------


//---------------------start: west cowboy define---------------------
var westCowboy={
	cowboyVersion:"1.0.0",  //about the west Cowboy info and refered author
	cowboyPicSRC : "man.png",  
	cowboyPicObj:"",
	gridSize:50,  //width=height=50
	picSN:0,
	cowboyPicAuthor	: "shenzhenNBA",  
	initLifeValue: 5000,
	lifeValue	: 0,
	killValue	: 1,
	speed		: 1,
	qspeed		: 4,
	x			: 0,
	y			: 0,	
	innerXMin	: 0,
	innerYMin	: 0,
	innerXMax	: 0,	
	innerYMax	: 0,
	r			: 20,     //cowboy size:20*20
	isShowTip	: false,  //[show refered info, true=show, false=hide]

	init: function(){   //初始化
        //...初始话 code...
	}
};


westCowboy.getSpeed = function(){      //获取牛仔速度
	return (inputFlag.quick ? this.qspeed : this.speed);  //attend: this = westCowboy
};

westCowboy.showCowboyTip = function(){   //显示牛仔生命值
    //...code省...
};

westCowboy.move=function(){   //牛仔的移动方法
    //要求，生命值大于零时，可以走动，否则不能走动，更新生命值等相关数据，移动范围检测定在canvas范围内，
    //如果生命值大于零，判断行走方向，向左，下，右，上，或停止分别绘制连续的动作分解图
    //...code省...
};


westCowboy.eat= function(){   //牛仔喝血行为，
    //未完成...
}
//---------------------end: west cowboy define-----------------------




//--------------------start: keep tribe move time define-------------
var tribeManMoveTimeController={  //辅助对象，控制族人的行走时间
    //设置在上一次方向上持续移动的时间,超过该时间后,动态修正方向[以牛仔为目标]再持续在该方向上移动指定时间在修正方向，
    //一直循环这个过程到死忙，实现走走一段时间又转向的效果,
    //keepMoveTime 时间越短动态改变方向越快,朝牛仔目标移动越灵敏
    //...code省...
};
//--------------------end: keep tribe move time define---------------




//---------------------start: tribe man define-----------------------
var tribeMan=function(){  //建立族人类对象
	//tribeman properties difine area
	this.tribeManVersion="1.0.0";  //about the Tribe Man info and refered author,
	this.tribeManPicSRC= "man.png";  		   //tribe man pic
	this.tribeManPicAuthor="shenzhenNBA";
	this.gridSize=50;   //width=height=50
	this.tribeManPicObj="";
	this.picSN=0;

	this.lifeValue=800;		//value is [800~4000],default=80
	this.killValue=1;  		//value is [1~3],default=1
	this.x=0;
	this.y=0;
	this.r=20;				//tribe man size:20x20
	this.speed=1;			//value is [1~3],default=1
	this.diffX=0;   		//offset in X axis
	this.diffY=0;			//offset in Y axis
	this.moveAngle=0;		//move angle
	this.isXAddFlag=true;	
	this.isYAddFlag=true;	
	this.canvasW=$('gameCanvas').width;
	this.canvasH=$('gameCanvas').height;	
	this.isChangeDirection=true;   //change direction [ true = can change, false= can not change ]
	this.k=0;  					    //temperate variable
	this.keepMoveTime=3;     //keep move in old direction time(unit:s), random 
	this.isShowLifeValue=false;  //show life value [true=show, false=hide(default)]

	this.rangeRandom=function(minValue, maxValue){	//返回值在 minValue 和 maxValue 之间的随机值
	    //...code省...		
	};

	this.rangeRandom2=function(minValue, maxValue,maxValuePercent){ //返回参数的前两个值，其中最大值出现的百分比为maxValuePercent
	    //...code省...
	};

	this.init=function(){	//族人的初始化	
	    //...code省...
	}

	this.move=function(){  //族人的行走方法
	    //如果族人的生命值大于零，才可以行走，否则死亡；
            //其次如果是碰面了，绘制族人战斗动作分解图，同时牛仔是活的就绘制战斗分解图，
            //如果没有碰面时，如果牛仔死亡了，族人任意行走，否则每隔一定时间修正方向向牛仔移动，是否显示生命值等
	    //...code省...
	}
	
	this.faceTouch=function(){  //判断族人和牛仔是否碰面
            //判断购股斜线距离是否小于族人本身对角线大小的2陪，小于则碰面
	    //...code省...		
	};

	this.showTribeTip=function(){  //显示族人生命值
	    //...code省...	
	};

	this.showFightTip=function(){  //显示战斗期间相关信息
	    //...code省...	
	};

	this.fighting=function(){  //战斗期间相关数据更新
	    //...code省...	
	};
};
//---------------------end: tribe man define-------------------------



//--------------------start: global function define------------------
var $ = function(id){  //对象选择器
	return "string"==typeof(id) ? document.getElementById(id) : id ;
}

//定义键盘按键值，对象
var KEY = { D: 68, W: 87, A: 65, S:83, DOWN:40, RIGHT:39, UP:38, LEFT:37, QUICK:17, C:67, Z:90,X:88};

//定义输入标志对象
var inputFlag = {
	right	: false,
	up	: false,
	left	: false,
	down	: false,
	quick	: false
};


//按键按下相应动作修改
var keyPress = function(event){
    //...code省...	
};


//按键放开相应动作修改
var keyRelease = function(event) {
    //...code省...
};


var sysVariables = { //游戏系统辅助对象
	gameName : "West Fighting......",   //about game information 
	gameNameCN: "西途决斗......",
	gameVersion : "1.0.0",
	gameLastUpdate : "2011-12-22",
	gameAuthor : "shenzhenNBA",
	gameAuthorIM: "",	
	scrW : screen.width,
	scrH : screen.height,
	tribeManNum:30,
	tribeMen:[],	
	runTime: 0,
	runTimerID : "",
	gameFrameSpeed: 20,  //PFS
	gamePlayerID: "",
	i:0,
	activeTManNum:0,
	ua: navigator.userAgent,

	isSupportHTML5: function(){ //判断浏览器是否支持HTML5
	//...code省...
	},

	getBrowserName: function(){  //返回浏览器名称
	//...code省...
	},

	getBrowserVersion:function(){ //返回浏览器版本
	//...code省...
	},

	showTribeMenLife: function(){  //显示族人生命值
	//...code省...
	},

	hideTribeMenLife: function(){  //隐藏族人生命值
	//...code省...
	}
};


var gameUIFace=function(objCanvas){    //游戏封面绘制，
        //这里有很多THML5 canvas 的操作
	//...code省...
};

var initGameUI=function(){  //游戏的界面初始化操作
	//...code省...
};

var curTime=function(){  //显示当前时间
	//...code省...
};

var TimeOn=function(){   //游戏开始后记录运行的时间
	//...code省...
};

var runTimeStart=function(){  //开始记录运行的时间
	sysVariables.runTimerID=setInterval(function(){TimeOn();},1000);
};


var runTimePause=function(){  //暂停记录运行时间
	clearInterval(sysVariables.runTimerID);
};


var runTimeReset=function(){  //重置运行的时间
	sysVariables.runTime=0;
	$('rTime').innerHTML='0000';
};

var gameFrameUpdate=function(){  //游戏运行的桢
	//...code省...
};

var initLoad=function(){  //页面载入初始化事件
	//...code省...	
};

window.οnlοad=function(){  //页面载入初始化
initLoad();	
};

var gameStart=function(){  //游戏开始
	//...code省...	
};

var gamePause=function(){  //游戏暂停
	//...code省...	
};

var gameContinue=function(){  //游戏暂停后的继续
	//...code省...	
};

var gameRestart=function(){   //游戏重新开始
	//...code省...	
};

var gameEnd=function(){  //结束游戏
	//...code省...	
};
//--------------------end: global function define--------------------