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 authorcowboyPicSRC : "man.png",  cowboyPicObj:"",gridSize:50,  //width=height=50picSN: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*20isShowTip: 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 areathis.tribeManVersion="1.0.0";  //about the Tribe Man info and refered author,this.tribeManPicSRC= "man.png";     //tribe man picthis.tribeManPicAuthor="shenzhenNBA";this.gridSize=50;   //width=height=50this.tribeManPicObj="";this.picSN=0;this.lifeValue=800;//value is [800~4000],default=80this.killValue=1;  //value is [1~3],default=1this.x=0;this.y=0;this.r=20;//tribe man size:20x20this.speed=1;//value is [1~3],default=1this.diffX=0;   //offset in X axisthis.diffY=0;//offset in Y axisthis.moveAngle=0;//move anglethis.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 variablethis.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,  //PFSgamePlayerID: "",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.onload=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--------------------