近年HTML5 正火热中，看到很多人开始熟悉HTML5，我也凑凑时间学点，边工作边写，上班闲闲时悄悄用HTML5写一个游戏来玩,呵呵...一边学习HTML5一边学习点游戏开发，
很有意思......以下是俺从构思，设计，代码，功能实现等等都是很原始设计...花了几天时间拿来晒晒...
HTML5 GAME West Fighting[决斗西途]，设计
================================================================================================
GAME内容：
GAME内容是一对多[1:50]的决斗情况，类似USA西部片中牛仔西行一路的过关决斗奋力搏斗前行情况，可以自己想像丰富点^_^；
------------------------------------------------------------------------------------------------
相关名词定义：
---------------
1，游戏结束定义：当西部牛仔死了（生命值为0时），就当整个游戏结束了；
2，个体死亡定义：生命值为零时定义为死亡，初始牛仔生命值120，其他的（称部落族人）为80--100随机赋值，族人死忙后即消失；
3，移动速度：允许西部牛仔行走速度可慢[1]可快[按ctrl键加速，4]，初始牛仔行走速度1，族人1--3随机值；
4，聚合性和准确性：牛仔可以任意行走，族人动态向着牛仔方向移动，方向的准确度为90%；
5，决斗开始和结束定义：每个部落族人和牛仔方圆距离为小于2即开始战斗，距离大于等于2即为离开结束战斗；
6，个体杀伤力定义：牛仔杀伤力为1，族人杀伤力为1~3的随机值，每跟一个部落族人战斗牛仔生命值减小2（故避免被群殴^_^）,同样部落族人的生命值也减小1；
7，搏斗性定义：搏斗性仅限牛仔，即在决斗开始后到决斗结束期间， 牛仔每按依次 F 键，生命值增加 2 ，但不能高于初始化的生命值；
8，提示性：每次战斗开始时出现提示，各个的生命值，战斗结束即可隐藏提示；
9，关于血瓶和生命值：仅限牛仔，每隔一定时间[30秒]随机位置出现一个漂流血瓶，血值20点，牛仔跑到血瓶距离小于2时，按某键[H]即逐步喝血，距离大于等2时停止喝血，当喝完或者血瓶漂出场景即消失，血瓶移动的速度为慢即1； （这个功能到以后再实现）
10，状态栏：现实牛仔的生命值，和XY坐标位置，部落族人战斗人数和死忙人数，GAME暂停，继续，重新开始，结束；
------------------------------------------------------------------------------------------------
HOW TO PLAY, 如何玩
1，红色为牛仔，按方向键或ASDW键移动，如果按住 CTRL 键则加速移动，
2，每按族人和牛仔接近足够距离就开始战斗，
3，族人和牛仔生命值为0即死亡，
4，按 X 查看所有族人的生命值，按 C 查看牛仔的生命值，战斗开始后不断的按 Z 键可以增加博斗能力，即增加牛仔生命值
游戏开始可能得刷新几次，等图片下载完成后才好操作；
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fighting - HTML5</title>
<style type="text/css">
body{margin:0px; padding:0; overflow-x:hidden;}
body,td,div,span,input,canvas{font-family:verdana,arial; font-size:12px;}
a:link, a:visited{font-family:verdana,arial; font-size:11px; color:#006699; text-decoration:underline;}
a:hover, a:active{font-family:verdana,arial; font-size:11px; color:#FF0033; text-decoration:none;}
#gameContainer{border:1px solid red;}
#gameCanvas{font-size:12px; font-family:verdana,arial; }
#infoPanel{font-family:verdana,arial; font-size:12px; border:1px solid #D63C06; display:block; padding:5px; background-color:#F9EFE9; overflow:hidden;}
#gameInfo{font-family:verdana,arial; font-size:11px; text-align:right; font-weight:normal; display:block; border-bottom:1px solid #999999;padding-bottom:3px;}
#controlPanel{padding:10px 0;}
.num01{font-family:verdana,arial; font-size:10px; padding:0 2px; font-weight:normal;}
.num02{font-family:verdana,arial; font-size:11px; padding:0 2px; font-weight:normal; color:#990000;}
a.a01:link, a.a01:visited{font-family:verdana,arial; font-size:12px; color:#006699; border:1px solid #999999; padding:2px 4px; margin:0 5px; text-decoration:none}
a.a01:hover, a.a01:active{font-family:verdana,arial; font-size:12px; color:#FFFFCC; border:1px solid #999999; padding:2px 4px; margin:0 5px; text-decoration:none; background-color:#990000}
</style>
</head>
<body οnkeydοwn="javascript:keyPress(event);" οnkeyup="javascript:keyRelease(event);" >
<div id="gameContainer">
<canvas id="gameCanvas" width="1024">
<div id="gbTip">请使用支持HTML5的浏览器...</div>
</canvas>
</div>
<!--start: info panel-->
<div id="infoPanel">
<div id="gameInfo"><b>West Fighting[决斗西途]</b>, Version:1.0.0, Current Time:<span class="num02" id="cTime">2010-11-30 10:20:32</span>, Run Time:<span class="num02" id="rTime">0000</span>sec, created by <a target="_blank" title="^_^ welcome..." href="http://hi.csdn.net/shenzhenNBA">shenzhenNBA[CSDN]</a>, 2011-12-01(商用需授权...)</div>
<div id="controlPanel">
Cowboy Life:<span class="num02" id="cowboyLife">120</span>, Position:[X:<span class="num02" id="cowboyPX">0</span>, Y:<span class="num02" id="cowboyPY">0</span>]
Tribe man Active:<span class="num02" id="cowboyPX">0</span>, Death:<span class="num02" id="cowboyPX">0</span>
control key: [ ↑,←, ↓, → ] or [ W,A,S,D ], fast + [ Ctrl ]
<a class="a01" href="javascript:gameStart();" title="开始">Start</a> <a class="a01" href="javascript:gamePause();" title="暂停">Pause</a> <a class="a01" href="javascript:gameContinue();" title="继续">Continue</a> <a class="a01" href="javascript:gameRestart();" title="结束当前重新开始游戏">Restart</a> <a class="a01" href="javascript:gameEnd();" title="结束游戏">End</a>
<a class="a01" title="游戏说明" href="javascript:void(0);">How to play</a> <span id="num">9</span>
</div>
</div>
<!--end: info panel-->
<script language="javascript" type="text/javascript">
//---------------------start: bloodBottle define---------------------
var bloodBottle = {//no finisth yet
speed:1,
x:0,
y:0,
bloodValue:30, //all value
step:5, //each time eat value
touchTimes:0, //value is [0~4] =4 then hide bottle
init: function(){
},
move: function(){
},
};
//---------------------end: bloodBottle define---------------------
//---------------------start: west cowboy define---------------------
var westCowboy={
cowboyVersion:"1.0.0", //about the west Cowboy info and refered author
cowboyPicSRC : "http://hi.csdn.net/attachment/201112/17/65387_1324102531Z4He.png", //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(){
this.lifeValue=this.initLifeValue;
this.innerXMin=this.r;
this.innerYMin=this.r;
//this.innerXMax= sysVariables.scrW-this.r;
//this.innerYMax= sysVariables.scrH-this.r;
this.innerXMax=$("gameCanvas").width-this.r;
this.innerYMax=$("gameCanvas").height-this.r;
this.x=$("gameCanvas").width/2;
this.y=$("gameCanvas").height/2;
var img=new Image();
img.src=this.cowboyPicSRC;
this.cowboyPicObj=img;
}
};
westCowboy.getSpeed = function(){ //get move speed flag
return (inputFlag.quick ? this.qspeed : this.speed); //attend: this = westCowboy
};
westCowboy.showCowboyTip = function(){
//function to show cowboy refered information
if(this.isShowTip){
var c=$("gameCanvas");
var cxt=c.getContext("2d");
//cxt.clearRect(this.left+this.r,this.top+this.r,80,25); //clear area
cxt.font="10px Arial";
cxt.fillStyle="#6600FF"; //FF6600
cxt.fillText("Life:"+this.lifeValue,this.x+this.r*2,this.y+this.r);
}
};
westCowboy.move=function(){
if(this.lifeValue>0){
if (inputFlag.right)westCowboy.x+=westCowboy.getSpeed();
if (inputFlag.left) westCowboy.x-=westCowboy.getSpeed();
if (inputFlag.down) westCowboy.y+=westCowboy.getSpeed();
if (inputFlag.up) westCowboy.y-=westCowboy.getSpeed();
}
$("cowboyLife").innerHTML=westCowboy.lifeValue;
$("cowboyPX").innerHTML=westCowboy.x;
$("cowboyPY").innerHTML=westCowboy.y;
if (westCowboy.x > westCowboy.innerXMax) westCowboy.x=westCowboy.innerXMax;
//if (westCowboy.x<westCowboy.innerXMin) westCowboy.x=westCowboy.innerXMin;
if (westCowboy.x < westCowboy.r) westCowboy.x=westCowboy.innerXMin;
if (westCowboy.y > westCowboy.innerYMax) westCowboy.y=westCowboy.innerYMax;
//if (westCowboy.y<westCowboy.innerYMin) westCowboy.y=westCowboy.innerYMin;
if (westCowboy.y < westCowboy.r) westCowboy.y=westCowboy.innerYMin;
var c=$("gameCanvas");
var cxt=c.getContext("2d");
//format: drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
if(this.lifeValue>0){
if(inputFlag.left) //move to right
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*westCowboy.picSN,westCowboy.gridSize*3,westCowboy.gridSize,westCowboy.gridSize,this.x,this.y,westCowboy.gridSize,westCowboy.gridSize);
else if(inputFlag.right) //move to left
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*westCowboy.picSN,westCowboy.gridSize*4,westCowboy.gridSize,westCowboy.gridSize,this.x,this.y,westCowboy.gridSize,westCowboy.gridSize);
else //stop move
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*3,westCowboy.gridSize*3,westCowboy.gridSize,westCowboy.gridSize,this.x,this.y,westCowboy.gridSize,westCowboy.gridSize);
westCowboy.picSN+=1;
if(westCowboy.picSN>=4) westCowboy.picSN=0;
}else{
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*4,westCowboy.gridSize*3,westCowboy.gridSize,westCowboy.gridSize,this.x,this.y,westCowboy.gridSize,westCowboy.gridSize);
}
/* for TEST, ONLY draw a dot */
/*
cxt.fillStyle="#666666"; //draw the RED dot //, FF0000
cxt.beginPath();
cxt.arc(westCowboy.x,westCowboy.y,westCowboy.r,0,Math.PI * 2,true); //draw a dot; syntax: context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
cxt.closePath();
cxt.fill();
*/
this.showCowboyTip();
};
westCowboy.eat= function(){
//function to eat blood when touch blood Bottle
}
//---------------------end: west cowboy define-----------------------
//--------------------start: keep tribe move time define-------------
var tribeManMoveTimeController={
//function to controll the tribe man keep move in old direction some time and then change the move direction
//设置在上一次方向上持续移动的时间,超过该时间后,动态修正方向[以牛仔为目标]再持续在该方向上移动指定时间在修正方向，一直循环这个过程到死忙
//keepMoveTime 时间越短动态改变方向越快,朝牛仔目标移动越灵敏
timeControllerID:"",
timeOn:function(){
var t=0;
for(t=0;t<sysVariables.tribeMen.length;t++){
sysVariables.tribeMen[t].k+=1;
if(sysVariables.tribeMen[t].k==sysVariables.tribeMen[t].keepMoveTime){
sysVariables.tribeMen[t].isChangeDirection=true;
sysVariables.tribeMen[t].k=0;
}else{
sysVariables.tribeMen[t].isChangeDirection=false;
}
}
}
};
//--------------------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= "http://hi.csdn.net/attachment/201112/17/65387_1324102531Z4He.png"; //tribe man pic,man.png
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)]
//tribeman init area
this.rangeRandom=function(minValue, maxValue){
if(maxValue >= minValue)
return Math.floor(Math.random()*(maxValue-minValue+1)+minValue);
else
return Math.floor(Math.random()*(minValue-maxValue+1)+maxValue);
};
this.rangeRandom2=function(minValue, maxValue,maxValuePercent){
//function to get value, maxValue [percent = maxValuePercent ], minValue [percent = 1-maxValuePercent ]
var mvPer=0;
var v=0;
try{ mvPer=parseFloat(maxValuePercent); }catch(e){ mvPer=0.8; }
if(Math.random()>=mvPer)
v=maxValue;
else
v=minValue;
return v;
};
this.init=function(){
//----------------------?????----------------------------------------
var img=new Image();
img.src=this.tribeManPicSRC;
this.tribeManPicObj=img;
this.keepMoveTime=this.rangeRandom(2,5); //keep move in old direction time(unit:s), random
/*
var tempK=0;
var keepTime=this.keepMoveTime;
//setInterval(function(){this.changeDirection();},1000); //this.changeDirection();
//设置在上一次方向上持续移动的时间,超过该时间后,动态修正方向[以牛仔为目标]再持续在该方向上移动指定时间在修正方向，一直循环这个过程到死忙
//keepMoveTime 时间越短动态改变方向越快,朝牛仔目标移动越灵敏
setInterval(function(){
tempK+=1;
//this.k+=1; //NOT work, here this != tribeMan object,这里的 this 不等于tribeMan类对象,引用不到,这里只引用到init函数范围内的变量
if(tempK==keepTime){
tribeMan.isChangeDirection=true;
tempK=0;
}else{
tribeMan.isChangeDirection=false; //this.isChangeDirection=false; //NOT word, here this != tribeMan class object
}
//$('num').innerHTML="<br>"+tempK+" : keepTime: "+bb+" : flag: "+tribeMan.isChangeDirection; //TEST
},1000);
//----------------------?????----------------------------------------
*/
this.lifeValue=this.rangeRandom(80,100); //attend: this = tribe
this.killValue=this.rangeRandom(1,3);
this.speed=this.rangeRandom2(1,3,0.75);
this.moveAngle=Math.floor(Math.random()*91); //angle value is [0~91]
var maxR=Math.floor(Math.sqrt(this.canvasW*this.canvasW+this.canvasH*this.canvasH)); //用勾股定律求画布canvas的对角线的长度
var randomR=this.rangeRandom(0,maxR); //value is [0~maxR]
//get X,Y axis position here //以对角线为最大值随机取值，以90为最大角度随机取角度，分别用三角函数求出XY值
this.x=randomR*Math.sin(this.moveAngle); //x value is [0~maxR]
this.y=randomR*Math.cos(this.moveAngle); //x value is [0~maxR]
if(this.x>this.canvasW) this.x=this.canvasW; //限定在 canvas 内部
if(this.x<0) this.x=0;
if(this.y>this.canvasH) this.y=this.canvasH;
if(this.y<0) this.y=0;
//判断所在像限:左上[+X，+Y]，右上[-X，+Y]，左下[+X，-Y]，右下[-X，-Y]，确定增量的方向，
if(this.x<this.canvasW/2 && this.y<=this.canvasH/2){ //左上,含Y中间左轴线
this.isXAddFlag=true;
this.isYAddFlag=true;
}else if(this.x>this.canvasW/2 && this.y<=this.canvasH/2){ //右上,含Y中间右轴线
this.isXAddFlag=false;
this.isYAddFlag=true;
}else if(this.x<=this.canvasW/2 && this.y>this.canvasH/2){ //左下,含X中间下轴线
this.isXAddFlag=true;
this.isYAddFlag=false;
}else{ //右下
this.isXAddFlag=false;
this.isYAddFlag=false;
}
//设置 XY 两个方向的增量方式:增或减，以及位移量
this.diffX=Math.sin(Math.PI/180*this.moveAngle)*this.speed;
this.diffX=this.isXAddFlag ? this.diffX : 0-this.diffX ;
this.diffY=Math.cos(Math.PI/180*this.moveAngle)*this.speed;
this.diffY=this.isYAddFlag ? this.diffY : 0-this.diffY;
if(this.diffX < 0.001) this.diffX=Math.random(); //diffX,diffY > 0.001, //set the min diffX,diffY
if(this.diffY < 0.001) this.diffY=Math.random();
//alert('tribe init...'); //for TEST
};
//tribeman Action area
this.move=function(){
//function to move tribemen, if death then can not move more.
var c=$('gameCanvas');
var cxt=c.getContext("2d");
if(this.lifeValue>0){ //active lefe
var ftFlag=this.faceTouch();
if(ftFlag){ //face touch
//face touch then fighting
cxt.drawImage(this.tribeManPicObj,this.gridSize*this.picSN,this.gridSize*2,this.gridSize,this.gridSize,this.x,this.y,this.gridSize,this.gridSize);
if(westCowboy.lifeValue>0)
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*westCowboy.picSN,westCowboy.gridSize*5,westCowboy.gridSize,westCowboy.gridSize,westCowboy.x,westCowboy.y,westCowboy.gridSize,westCowboy.gridSize);
else
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*4,westCowboy.gridSize*3,westCowboy.gridSize,westCowboy.gridSize,westCowboy.x,westCowboy.y,westCowboy.gridSize,westCowboy.gridSize);
}else{ //no face touch, move continue
if(westCowboy.lifeValue<=0){ //cowboy death then tribe man walk free
//-----start: walk free-----
if(this.x<0) this.diffX = Math.abs(this.diffX);
if(this.x>this.canvasW) this.diffX = -Math.abs(this.diffX);
if(this.y<0) this.diffY = Math.abs(this.diffY);
if(this.y>this.canvasH) this.diffY = -Math.abs(this.diffY);
//-----end: walk free-----
}else{
//-----start: walk to cowboy-----
if(this.isChangeDirection){
if(westCowboy.x >= this.x)
this.diffX = Math.abs(this.diffX);
else
this.diffX = -Math.abs(this.diffX);
if(westCowboy.y >= this.y)
this.diffY = Math.abs(this.diffY);
else
this.diffY = -Math.abs(this.diffY);
}
//-----end: walk to cowboy-------
}
this.x=this.x+this.diffX; //attend: this = tribe
this.y=this.y+this.diffY;
//format: drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
if(westCowboy.x >= this.x) //move to right
cxt.drawImage(this.tribeManPicObj,this.gridSize*this.picSN,this.gridSize*0,this.gridSize,this.gridSize,this.x,this.y,this.gridSize,this.gridSize);
else //move to left
cxt.drawImage(this.tribeManPicObj,this.gridSize*this.picSN,this.gridSize*1,this.gridSize,this.gridSize,this.x,this.y,this.gridSize,this.gridSize);
}
this.picSN+=1;
if(this.picSN>=4) this.picSN=0;
}else{ //death
cxt.drawImage(this.tribeManPicObj,this.gridSize*4,0,this.gridSize,this.gridSize,this.x,this.y,this.gridSize,this.gridSize);
}
/*
//only for TEST
cxt.fillStyle="#DDDDDD"; //, 0000FF
cxt.beginPath();
cxt.arc(this.x,this.y,this.r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
*/
if(this.isShowLifeValue){
cxt.font="10px Arial";
cxt.fillStyle="#006600";
cxt.fillText("Life: "+this.lifeValue,this.x+this.r*2,this.y+this.r);
}
//for TEST
//cxt.fillStyle="#FF0000";
//cxt.fillText("changeFlag: "+this.isChangeDirection,this.x+this.r,this.y+this.r);
};
this.faceTouch=function(){
//function to jugme tribe man face touch cowboy or else,[true=face touch, false=no touch]
var dx = Math.abs(westCowboy.x-this.x);
var dy = Math.abs(westCowboy.y-this.y);
var dl=dx*dx+dy*dy;
var tl=(this.r*this.r+this.r*this.r)*2; //attend the Size of tribe man and cowboy should be the same
if(dl<tl){
return true;
}else{
return false;
}
};
this.showTribeTip=function(){
//function to show the tribe man information
var c=$('gameCanvas');
var cxt=c.getContext("2d");
cxt.font="normal normal 11px verdana";
//show tribe man lefe value
cxt.fillStyle="#0000FF";
cxt.fillText("Life:"+this.lifeValue,this.x+this.r*2,this.y); //+this.r
//show cowboy lefe value
cxt.fillStyle="#FF0000";
//cxt.clearRect(westCowboy.x+westCowboy.r,westCowboy.y-11,10*6,11); //format:context.clearRect(x,y,width,height); //clear the block first
cxt.fillText("Life:"+westCowboy.lifeValue,westCowboy.x+westCowboy.r*2,westCowboy.y); //westCowboy.r
};
this.showFightTip=function(){
//function to show the tribe man information
var c=$('gameCanvas');
var cxt=c.getContext("2d");
cxt.font="normal normal 11px verdana";
//show tribe man fighting Words
cxt.fillStyle="#0000FF";
if(this.lifeValue>0)
cxt.fillText("kill... kill...",this.x+this.r*2,this.y+this.r/2);
else
cxt.fillText("death...",this.x+this.r*2,this.y+this.r/2);
//show cowboy fighting Words
cxt.fillStyle="#FF0000";
cxt.font="normal normal 11px verdana";
//cxt.clearRect(westCowboy.x+westCowboy.r,westCowboy.y-11,10*6,11); //format:context.clearRect(x,y,width,height); //clear the block first
if(westCowboy.lifeValue>0)
cxt.fillText("fighting...fighting...",westCowboy.x+westCowboy.r*2,westCowboy.y+this.r/2);
else
cxt.fillText("death...",westCowboy.x+westCowboy.r*2,westCowboy.y+this.r/2);
};
this.fighting=function(){
//functionto fighting with cowboy here if face touch
var ft=this.faceTouch();
if(ft){ //face touch here
if(this.lifeValue>0){
if(westCowboy.lifeValue>0) westCowboy.lifeValue = westCowboy.lifeValue - this.killValue;
if(westCowboy.lifeValue<0) westCowboy.lifeValue=0;
}
if(westCowboy.lifeValue>0){
if(this.lifeValue>0) this.lifeValue = this.lifeValue - westCowboy.killValue;
if(this.lifeValue<0) this.lifeValue=0;
}
if(westCowboy.lifeValue>0){
this.showTribeTip();
this.showFightTip();
}
}else{ //face touch here
//no fighting....
}
};
};
//---------------------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){
var code = event.keyCode || window.event;
switch(code) {
case KEY.RIGHT:
case KEY.D: inputFlag.right = true; break;
case KEY.UP:
case KEY.W: inputFlag.up = true; break;
case KEY.LEFT:
case KEY.A: inputFlag.left = true; break;
case KEY.DOWN:
case KEY.S: inputFlag.down = true; break;
case KEY.QUICK: inputFlag.quick = true; break;
case KEY.C: westCowboy.isShowTip=true; break;
case KEY.X: sysVariables.showTribeMenLife(); break;
}
};
//按键放开相应动作修改
var keyRelease = function(event) {
var code = event.keyCode || window.event;
switch(code) {
case KEY.RIGHT:
case KEY.D: inputFlag.right = false; break;
case KEY.UP:
case KEY.W: inputFlag.up = false; break;
case KEY.LEFT:
case KEY.A: inputFlag.left = false; break;
case KEY.DOWN:
case KEY.S: inputFlag.down = false; break;
case KEY.QUICK: inputFlag.quick = false; break;
case KEY.C:
westCowboy.isShowTip=false; break;
case KEY.Z:
if(westCowboy.lifeValue >= westCowboy.initLifeValue)
westCowboy.lifeValue = westCowboy.initLifeValue;
else
westCowboy.lifeValue+=2;
break;
case KEY.X:
sysVariables.hideTribeMenLife();
break;
}
};
var sysVariables = {
//function to get game system variables
gameName : "West Fighting......", //about game information
gameNameCN: "决斗西途......",
gameVersion : "1.0.0",
gameLastUpdate : "2011-12-06",
gameAuthor : "shenzhenNBA",
gameAuthorIM: "",
scrW : screen.width,
scrH : screen.height,
tribeManNum:30,
tribeMen:[],
//timeStart:0,
runTime: 0,
runTimerID : "",
gameFrameSpeed: 20, //PFS
gamePlayerID: "",
i:0,
isSupportHTML5: function(){
var bn,bv,v;
try{
bn=this.getBrowserName().toLowerCase();
bv=parseFloat(this.getBrowserVersion());
}catch(e){
}
//first Support HTML5: IE v=9,Firefox v=3.5, Chrome v=3.5,Opera v=10.5, Safari v=3.0 //找的，不知是否对
if(bn=="ms ie" && bv>=9){
v=true;
}else if(bn=="firefox" && bv>=3.5){
v=true;
}else if(bn=="chrome" && bv>=3.5){
v=true;
}else if(bn=="opera" && bv>=3.5){
v=true;
}else if(bn=="safari" && bv>=3.0){
v=true;
}else{
v=false;
}
return v;
},
ua: navigator.userAgent,
getBrowserName: function(){
var uai=this.ua.toLowerCase();
var bn='';
if(uai.indexOf('msie')>=0) bn="MS IE";
if(uai.indexOf('firefox')>=0) bn="FireFox";
if(uai.indexOf('chrome')>=0) bn="Chrome";
if(uai.indexOf('opera')>=0) bn="Opera";
if(uai.indexOf('safari')>=0) bn="Safari";
if(bn=="") bn="Unknow browser";
return bn;
},
getBrowserVersion:function(){
var v='';
var uai=this.ua.toLowerCase();
if(s = uai.match(/msie ([\d.]+)/)) v = RegExp.$1 ;
if(s = uai.match(/firefox\/([\d.]+)/)) v = RegExp.$1 ;
if(s = uai.match(/chrome\/([\d.]+)/)) v = RegExp.$1 ;
if(s = uai.match(/opera.([\d.]+)/)) v = RegExp.$1 ;
if(s = uai.match(/version\/([\d.]+).*safari/)) v = RegExp.$1;
if(v=="") v='unknow version';
return v;
},
showTribeMenLife: function(){
var n=0;
for(n=0;n<sysVariables.tribeMen.length;n++){
sysVariables.tribeMen[n].isShowLifeValue=true;
}
},
hideTribeMenLife: function(){
var n=0;
for(n=0;n<sysVariables.tribeMen.length;n++){
sysVariables.tribeMen[n].isShowLifeValue=false;
}
}
};
var gameUIFace=function(objCanvas){
//function to create game UI face
var oGC=objCanvas;
//var oGC=$('gameCanvas'); //get object directly for Test
var cxt=oGC.getContext("2d");
var cx,cy,r1,r2;
r1=30;
try{ cx=oGC.width/2; }catch(e){ cx=screen.width/2; };
try{ cy=oGC.height/2; }catch(e2){ cy=screen.height/2; };
try{ r2=oGC.height/2; }catch(e3){ r2=screen.height/2; };
/* */
//----start: draw radial/gradient circle ----
var rg=cxt.createRadialGradient(cx,cy,r1,cx,cy,r2); //create object type
rg.addColorStop(0,'#FF6600'); //set the start position color
rg.addColorStop(1,'#FAFAFA'); //set the end position color
cxt.fillStyle=rg; //set the pen style
//cxt.strokeStyle=rg; //会使用单色黑色绘制，应该使用 fillStyle
cxt.beginPath();
cxt.arc(cx,cy,r2,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
//----end: draw radial/gradient circle ----
//----start: draw cowboy image ----
var img=new Image();
img.src="http://hi.csdn.net/attachment/201112/17/65387_13241032476Ybf.png"; //cowboy.png
cxt.globalAlpha=0.5; //value is [0~1],0=hide[disappear], 1 = show [clear all]
cxt.drawImage(img,cx/6,-20);
cxt.globalAlpha=1;
//----end: draw cowboy image ----
//----start: draw gradient line ----
var i=0,n=100,step=0;
try{ step=Math.floor(oGC.width/n); }catch(e4){ step=Math.floor(screen.width/n);}
for(i=0;i<=n;i++){
var lg=cxt.createLinearGradient((cx-n/2+i),cy,i*step,cy+300);
lg.addColorStop(0,'#FF3300');
lg.addColorStop(1,'#FFFFFF'); //0099CC
//cxt.fillStyle=lg; //单色黑色绘制
cxt.strokeStyle=lg; //多种颜色绘制
cxt.beginPath();
cxt.moveTo((cx-n*2+i*4),cy+n/4); //set the start position
//cxt.moveTo((cx-n/2+i),cy);
//cxt.moveTo(cx,cy);
//cxt.lineCap = 'round' ;
if((i % 5)==0)
cxt.lineWidth=2; //set the line size
//cxt.lineJoin ="miter";
else
cxt.lineWidth=1;
cxt.lineTo(i*step,cy+300);
cxt.stroke();
//cxt.fill();
cxt.closePath();
}
//----end: draw gradient line ------
//----start: draw game Title ------
var moveTXTPos=60; //about game EN Name
cxt.font="italic bold 45px Arial Black"; //Verdana ,format: context.font="style variant weight size line-height family"
cxt.fillStyle="#0000FF";
cxt.shadowColor ="#FFFF99"; //"rgb(255,0,0)" //99CCFF
cxt.shadowOffsetX=4;
cxt.shadowOffsetY=3;
cxt.shadowBlur=3;
cxt.fillText(sysVariables.gameName,cx-moveTXTPos*4,cy-40);
cxt.font="italic bold 24px 黑体"; //Verdana,Arial Black，，华文新魏 //about game CN Name
cxt.shadowColor="#FFFF99";
cxt.shadowOffsetX=2;
cxt.shadowOffsetY=2;
cxt.shadowBlur=2;
cxt.fillStyle="#660066";
cxt.fillText(sysVariables.gameNameCN,cx-moveTXTPos*1.5,cy);
cxt.font="italic normal 11px verdana"; //about game version and author
cxt.shadowOffsetX=0;
cxt.shadowOffsetY=0;
cxt.shadowBlur=1;
cxt.fillStyle="#FF0000";
cxt.fillText("Version: "+sysVariables.gameVersion+' Author: '+sysVariables.gameAuthor,cx+moveTXTPos/4,cy+20);
//----end: draw game Title ------
}
var initGameUI=function(){
//function to initialize Game UI here
//var scrW=screen.width;
//var scrH=screen.height;
var infoPanelH=80;
var xBarH=120; //height of x Bars
//var canvasW=scrW-8;
var canvasW=sysVariables.scrW-6;
//var canvasH=scrH-infoPanelH-xBarH;
var canvasH=sysVariables.scrH-infoPanelH-xBarH;
var paddingLR=5; //padding of left and right in infoPanel
var bn='',bv='';
bn=sysVariables.getBrowserName();
bv=parseInt(sysVariables.getBrowserVersion());
var oGC='';
if(bn=="MS IE" && bv<9){ //support HTML5 go here
oGC=$('gameContainer');
oGC.innerHTML="<br><p><b> Error:</b></p><br><br> 您的浏览器是 "+bn+" ,版本是 "+bv;
oGC.innerHTML+=" ,还不支持HTML5,请使用更高版本,或使用 Chrome 或 fireFox 等支持HTML5的浏览器.";
oGC.style.width=canvasW+"px";
oGC.style.height=canvasH+"px";
}else{ //support HTML5 go here
oGC=$('gameCanvas');
//oGC.style.width=canvasW+"px";
//oGC.style.height=canvasH+"px";
oGC.width=canvasW;
oGC.height=canvasH;
gameUIFace(oGC);
}
var oIP=$('infoPanel');
oIP.style.left="0";
oIP.style.top=canvasH+2;
oIP.style.position="fixed";
oIP.style.zIndex=8000;
oIP.style.width=(canvasW-paddingLR*2)+"px"; //canvasW+"px";
oIP.style.height=infoPanelH+"px";
};
var curTime=function(){ //function to display current system time
var dt=new Date()
var strHTML=dt.getFullYear()+"-"+(dt.getMonth()+1<10 ? ('0'+(dt.getMonth()+1)): dt.getMonth()+1);
strHTML+="-"+(dt.getDate()<10 ? '0'+dt.getDate() : dt.getDate());
strHTML+=" "+(dt.getHours()<10 ? '0'+dt.getHours() : dt.getHours());
strHTML+=":"+(dt.getMinutes()<10 ? '0'+dt.getMinutes(): dt.getMinutes());
strHTML+=":"+(dt.getSeconds()<10 ? '0'+dt.getSeconds() : dt.getSeconds());
$('cTime').innerHTML=strHTML;
};
var TimeOn=function(){
sysVariables.runTime++;
if(sysVariables.runTime<10) $('rTime').innerHTML='000'+sysVariables.runTime;
if(sysVariables.runTime>=10 && sysVariables.runTime<100) $('rTime').innerHTML='00'+sysVariables.runTime;
if(sysVariables.runTime>=100 && sysVariables.runTime<1000) $('rTime').innerHTML='0'+sysVariables.runTime;
if(sysVariables.runTime>=1000) $('rTime').innerHTML=sysVariables.runTime;
};
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(){
//function to play next Game Frame
var c=$("gameCanvas");
//var cxt=c.getContext("2d");
c.width=c.width; //clear and redraw it
westCowboy.move();
for(sysVariables.i=0; sysVariables.i<sysVariables.tribeMen.length; sysVariables.i++){
sysVariables.tribeMen[sysVariables.i].move();
sysVariables.tribeMen[sysVariables.i].fighting();
}
};
var initLoad=function(){
//function to initialize when loading
initGameUI();
var isSupportHTML5=sysVariables.isSupportHTML5();
if(isSupportHTML5){
setInterval('curTime()',1000);
westCowboy.init();
var i=0;
for(i=0;i<sysVariables.tribeManNum;i++){
var tMan=new tribeMan();
tMan.init();
sysVariables.tribeMen[i]=tMan;
}
}
}
window.οnlοad=function(){
initLoad();
};
var gameStart=function(){
runTimeStart();
if(!sysVariables.gamePlayerID){
initLoad();
sysVariables.gamePlayerID=setInterval(function(){gameFrameUpdate()},sysVariables.gameFrameSpeed);
tribeManMoveTimeController.timeControllerID=setInterval(function(){tribeManMoveTimeController.timeOn();},1000);
}else
alert('Game is running...');
}
var gamePause=function(){
runTimePause();
clearInterval(sysVariables.gamePlayerID);
sysVariables.gamePlayerID="";
clearInterval(tribeManMoveTimeController.timeControllerID);
tribeManMoveTimeController.timeControllerID="";
}
var gameContinue=function(){
runTimeStart();
if(!sysVariables.gamePlayerID) sysVariables.gamePlayerID=setInterval(function(){gameFrameUpdate()},sysVariables.gameFrameSpeed);
if(!tribeManMoveTimeController.timeControllerID) tribeManMoveTimeController.timeControllerID=setInterval(function(){tribeManMoveTimeController.timeOn();},1000);
}
var gameRestart=function(){
runTimeReset();
clearInterval(sysVariables.gamePlayerID);
sysVariables.gamePlayerID="";
clearInterval(tribeManMoveTimeController.timeControllerID);
tribeManMoveTimeController.timeControllerID="";
initLoad();
gameStart();
}
var gameEnd=function(){
runTimePause();
westCowboy.lifeValue=0;
var h=0;
for(h=0;sysVariables.tribeMen.length;h++){
sysVariables.tribeMen[h].lifeValue=0;
}
gameFrameUpdate();
clearInterval(sysVariables.gamePlayerID);
sysVariables.gamePlayerID="";
clearInterval(tribeManMoveTimeController.timeControllerID);
tribeManMoveTimeController.timeControllerID="";
}
//--------------------end: global function define--------------------
</script>
</body>
</html>
很有意思......以下是俺从构思，设计，代码，功能实现等等都是很原始设计...花了几天时间拿来晒晒...
HTML5 GAME West Fighting[决斗西途]，设计
================================================================================================
GAME内容：
GAME内容是一对多[1:50]的决斗情况，类似USA西部片中牛仔西行一路的过关决斗奋力搏斗前行情况，可以自己想像丰富点^_^；
------------------------------------------------------------------------------------------------
相关名词定义：
---------------
1，游戏结束定义：当西部牛仔死了（生命值为0时），就当整个游戏结束了；
2，个体死亡定义：生命值为零时定义为死亡，初始牛仔生命值120，其他的（称部落族人）为80--100随机赋值，族人死忙后即消失；
3，移动速度：允许西部牛仔行走速度可慢[1]可快[按ctrl键加速，4]，初始牛仔行走速度1，族人1--3随机值；
4，聚合性和准确性：牛仔可以任意行走，族人动态向着牛仔方向移动，方向的准确度为90%；
5，决斗开始和结束定义：每个部落族人和牛仔方圆距离为小于2即开始战斗，距离大于等于2即为离开结束战斗；
6，个体杀伤力定义：牛仔杀伤力为1，族人杀伤力为1~3的随机值，每跟一个部落族人战斗牛仔生命值减小2（故避免被群殴^_^）,同样部落族人的生命值也减小1；
7，搏斗性定义：搏斗性仅限牛仔，即在决斗开始后到决斗结束期间， 牛仔每按依次 F 键，生命值增加 2 ，但不能高于初始化的生命值；
8，提示性：每次战斗开始时出现提示，各个的生命值，战斗结束即可隐藏提示；
9，关于血瓶和生命值：仅限牛仔，每隔一定时间[30秒]随机位置出现一个漂流血瓶，血值20点，牛仔跑到血瓶距离小于2时，按某键[H]即逐步喝血，距离大于等2时停止喝血，当喝完或者血瓶漂出场景即消失，血瓶移动的速度为慢即1； （这个功能到以后再实现）
10，状态栏：现实牛仔的生命值，和XY坐标位置，部落族人战斗人数和死忙人数，GAME暂停，继续，重新开始，结束；
------------------------------------------------------------------------------------------------
HOW TO PLAY, 如何玩
1，红色为牛仔，按方向键或ASDW键移动，如果按住 CTRL 键则加速移动，
2，每按族人和牛仔接近足够距离就开始战斗，
3，族人和牛仔生命值为0即死亡，
4，按 X 查看所有族人的生命值，按 C 查看牛仔的生命值，战斗开始后不断的按 Z 键可以增加博斗能力，即增加牛仔生命值
游戏开始可能得刷新几次，等图片下载完成后才好操作；
游戏使用的人物动作分解图，那个有更好的可以完善，俺只是简单的做了一下，很陋也，不过看那些族人和牛仔走东蛮生动的，呵呵
，有点意思
以下是核心代码：
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fighting - HTML5</title>
<style type="text/css">
body{margin:0px; padding:0; overflow-x:hidden;}
body,td,div,span,input,canvas{font-family:verdana,arial; font-size:12px;}
a:link, a:visited{font-family:verdana,arial; font-size:11px; color:#006699; text-decoration:underline;}
a:hover, a:active{font-family:verdana,arial; font-size:11px; color:#FF0033; text-decoration:none;}
#gameContainer{border:1px solid red;}
#gameCanvas{font-size:12px; font-family:verdana,arial; }
#infoPanel{font-family:verdana,arial; font-size:12px; border:1px solid #D63C06; display:block; padding:5px; background-color:#F9EFE9; overflow:hidden;}
#gameInfo{font-family:verdana,arial; font-size:11px; text-align:right; font-weight:normal; display:block; border-bottom:1px solid #999999;padding-bottom:3px;}
#controlPanel{padding:10px 0;}
.num01{font-family:verdana,arial; font-size:10px; padding:0 2px; font-weight:normal;}
.num02{font-family:verdana,arial; font-size:11px; padding:0 2px; font-weight:normal; color:#990000;}
a.a01:link, a.a01:visited{font-family:verdana,arial; font-size:12px; color:#006699; border:1px solid #999999; padding:2px 4px; margin:0 5px; text-decoration:none}
a.a01:hover, a.a01:active{font-family:verdana,arial; font-size:12px; color:#FFFFCC; border:1px solid #999999; padding:2px 4px; margin:0 5px; text-decoration:none; background-color:#990000}
</style>
</head>
<body οnkeydοwn="javascript:keyPress(event);" οnkeyup="javascript:keyRelease(event);" >
<div id="gameContainer">
<canvas id="gameCanvas" width="1024">
<div id="gbTip">请使用支持HTML5的浏览器...</div>
</canvas>
</div>
<!--start: info panel-->
<div id="infoPanel">
<div id="gameInfo"><b>West Fighting[决斗西途]</b>, Version:1.0.0, Current Time:<span class="num02" id="cTime">2010-11-30 10:20:32</span>, Run Time:<span class="num02" id="rTime">0000</span>sec, created by <a target="_blank" title="^_^ welcome..." href="http://hi.csdn.net/shenzhenNBA">shenzhenNBA[CSDN]</a>, 2011-12-01(商用需授权...)</div>
<div id="controlPanel">
Cowboy Life:<span class="num02" id="cowboyLife">120</span>, Position:[X:<span class="num02" id="cowboyPX">0</span>, Y:<span class="num02" id="cowboyPY">0</span>]
Tribe man Active:<span class="num02" id="cowboyPX">0</span>, Death:<span class="num02" id="cowboyPX">0</span>
control key: [ ↑,←, ↓, → ] or [ W,A,S,D ], fast + [ Ctrl ]
<a class="a01" href="javascript:gameStart();" title="开始">Start</a> <a class="a01" href="javascript:gamePause();" title="暂停">Pause</a> <a class="a01" href="javascript:gameContinue();" title="继续">Continue</a> <a class="a01" href="javascript:gameRestart();" title="结束当前重新开始游戏">Restart</a> <a class="a01" href="javascript:gameEnd();" title="结束游戏">End</a>
<a class="a01" title="游戏说明" href="javascript:void(0);">How to play</a> <span id="num">9</span>
</div>
</div>
<!--end: info panel-->
<script language="javascript" type="text/javascript">
//---------------------start: bloodBottle define---------------------
var bloodBottle = {//no finisth yet
speed:1,
x:0,
y:0,
bloodValue:30, //all value
step:5, //each time eat value
touchTimes:0, //value is [0~4] =4 then hide bottle
init: function(){
},
move: function(){
},
};
//---------------------end: bloodBottle define---------------------
//---------------------start: west cowboy define---------------------
var westCowboy={
cowboyVersion:"1.0.0", //about the west Cowboy info and refered author
cowboyPicSRC : "http://hi.csdn.net/attachment/201112/17/65387_1324102531Z4He.png", //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(){
this.lifeValue=this.initLifeValue;
this.innerXMin=this.r;
this.innerYMin=this.r;
//this.innerXMax= sysVariables.scrW-this.r;
//this.innerYMax= sysVariables.scrH-this.r;
this.innerXMax=$("gameCanvas").width-this.r;
this.innerYMax=$("gameCanvas").height-this.r;
this.x=$("gameCanvas").width/2;
this.y=$("gameCanvas").height/2;
var img=new Image();
img.src=this.cowboyPicSRC;
this.cowboyPicObj=img;
}
};
westCowboy.getSpeed = function(){ //get move speed flag
return (inputFlag.quick ? this.qspeed : this.speed); //attend: this = westCowboy
};
westCowboy.showCowboyTip = function(){
//function to show cowboy refered information
if(this.isShowTip){
var c=$("gameCanvas");
var cxt=c.getContext("2d");
//cxt.clearRect(this.left+this.r,this.top+this.r,80,25); //clear area
cxt.font="10px Arial";
cxt.fillStyle="#6600FF"; //FF6600
cxt.fillText("Life:"+this.lifeValue,this.x+this.r*2,this.y+this.r);
}
};
westCowboy.move=function(){
if(this.lifeValue>0){
if (inputFlag.right)westCowboy.x+=westCowboy.getSpeed();
if (inputFlag.left) westCowboy.x-=westCowboy.getSpeed();
if (inputFlag.down) westCowboy.y+=westCowboy.getSpeed();
if (inputFlag.up) westCowboy.y-=westCowboy.getSpeed();
}
$("cowboyLife").innerHTML=westCowboy.lifeValue;
$("cowboyPX").innerHTML=westCowboy.x;
$("cowboyPY").innerHTML=westCowboy.y;
if (westCowboy.x > westCowboy.innerXMax) westCowboy.x=westCowboy.innerXMax;
//if (westCowboy.x<westCowboy.innerXMin) westCowboy.x=westCowboy.innerXMin;
if (westCowboy.x < westCowboy.r) westCowboy.x=westCowboy.innerXMin;
if (westCowboy.y > westCowboy.innerYMax) westCowboy.y=westCowboy.innerYMax;
//if (westCowboy.y<westCowboy.innerYMin) westCowboy.y=westCowboy.innerYMin;
if (westCowboy.y < westCowboy.r) westCowboy.y=westCowboy.innerYMin;
var c=$("gameCanvas");
var cxt=c.getContext("2d");
//format: drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
if(this.lifeValue>0){
if(inputFlag.left) //move to right
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*westCowboy.picSN,westCowboy.gridSize*3,westCowboy.gridSize,westCowboy.gridSize,this.x,this.y,westCowboy.gridSize,westCowboy.gridSize);
else if(inputFlag.right) //move to left
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*westCowboy.picSN,westCowboy.gridSize*4,westCowboy.gridSize,westCowboy.gridSize,this.x,this.y,westCowboy.gridSize,westCowboy.gridSize);
else //stop move
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*3,westCowboy.gridSize*3,westCowboy.gridSize,westCowboy.gridSize,this.x,this.y,westCowboy.gridSize,westCowboy.gridSize);
westCowboy.picSN+=1;
if(westCowboy.picSN>=4) westCowboy.picSN=0;
}else{
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*4,westCowboy.gridSize*3,westCowboy.gridSize,westCowboy.gridSize,this.x,this.y,westCowboy.gridSize,westCowboy.gridSize);
}
/* for TEST, ONLY draw a dot */
/*
cxt.fillStyle="#666666"; //draw the RED dot //, FF0000
cxt.beginPath();
cxt.arc(westCowboy.x,westCowboy.y,westCowboy.r,0,Math.PI * 2,true); //draw a dot; syntax: context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);
cxt.closePath();
cxt.fill();
*/
this.showCowboyTip();
};
westCowboy.eat= function(){
//function to eat blood when touch blood Bottle
}
//---------------------end: west cowboy define-----------------------
//--------------------start: keep tribe move time define-------------
var tribeManMoveTimeController={
//function to controll the tribe man keep move in old direction some time and then change the move direction
//设置在上一次方向上持续移动的时间,超过该时间后,动态修正方向[以牛仔为目标]再持续在该方向上移动指定时间在修正方向，一直循环这个过程到死忙
//keepMoveTime 时间越短动态改变方向越快,朝牛仔目标移动越灵敏
timeControllerID:"",
timeOn:function(){
var t=0;
for(t=0;t<sysVariables.tribeMen.length;t++){
sysVariables.tribeMen[t].k+=1;
if(sysVariables.tribeMen[t].k==sysVariables.tribeMen[t].keepMoveTime){
sysVariables.tribeMen[t].isChangeDirection=true;
sysVariables.tribeMen[t].k=0;
}else{
sysVariables.tribeMen[t].isChangeDirection=false;
}
}
}
};
//--------------------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= "http://hi.csdn.net/attachment/201112/17/65387_1324102531Z4He.png"; //tribe man pic,man.png
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)]
//tribeman init area
this.rangeRandom=function(minValue, maxValue){
if(maxValue >= minValue)
return Math.floor(Math.random()*(maxValue-minValue+1)+minValue);
else
return Math.floor(Math.random()*(minValue-maxValue+1)+maxValue);
};
this.rangeRandom2=function(minValue, maxValue,maxValuePercent){
//function to get value, maxValue [percent = maxValuePercent ], minValue [percent = 1-maxValuePercent ]
var mvPer=0;
var v=0;
try{ mvPer=parseFloat(maxValuePercent); }catch(e){ mvPer=0.8; }
if(Math.random()>=mvPer)
v=maxValue;
else
v=minValue;
return v;
};
this.init=function(){
//----------------------?????----------------------------------------
var img=new Image();
img.src=this.tribeManPicSRC;
this.tribeManPicObj=img;
this.keepMoveTime=this.rangeRandom(2,5); //keep move in old direction time(unit:s), random
/*
var tempK=0;
var keepTime=this.keepMoveTime;
//setInterval(function(){this.changeDirection();},1000); //this.changeDirection();
//设置在上一次方向上持续移动的时间,超过该时间后,动态修正方向[以牛仔为目标]再持续在该方向上移动指定时间在修正方向，一直循环这个过程到死忙
//keepMoveTime 时间越短动态改变方向越快,朝牛仔目标移动越灵敏
setInterval(function(){
tempK+=1;
//this.k+=1; //NOT work, here this != tribeMan object,这里的 this 不等于tribeMan类对象,引用不到,这里只引用到init函数范围内的变量
if(tempK==keepTime){
tribeMan.isChangeDirection=true;
tempK=0;
}else{
tribeMan.isChangeDirection=false; //this.isChangeDirection=false; //NOT word, here this != tribeMan class object
}
//$('num').innerHTML="<br>"+tempK+" : keepTime: "+bb+" : flag: "+tribeMan.isChangeDirection; //TEST
},1000);
//----------------------?????----------------------------------------
*/
this.lifeValue=this.rangeRandom(80,100); //attend: this = tribe
this.killValue=this.rangeRandom(1,3);
this.speed=this.rangeRandom2(1,3,0.75);
this.moveAngle=Math.floor(Math.random()*91); //angle value is [0~91]
var maxR=Math.floor(Math.sqrt(this.canvasW*this.canvasW+this.canvasH*this.canvasH)); //用勾股定律求画布canvas的对角线的长度
var randomR=this.rangeRandom(0,maxR); //value is [0~maxR]
//get X,Y axis position here //以对角线为最大值随机取值，以90为最大角度随机取角度，分别用三角函数求出XY值
this.x=randomR*Math.sin(this.moveAngle); //x value is [0~maxR]
this.y=randomR*Math.cos(this.moveAngle); //x value is [0~maxR]
if(this.x>this.canvasW) this.x=this.canvasW; //限定在 canvas 内部
if(this.x<0) this.x=0;
if(this.y>this.canvasH) this.y=this.canvasH;
if(this.y<0) this.y=0;
//判断所在像限:左上[+X，+Y]，右上[-X，+Y]，左下[+X，-Y]，右下[-X，-Y]，确定增量的方向，
if(this.x<this.canvasW/2 && this.y<=this.canvasH/2){ //左上,含Y中间左轴线
this.isXAddFlag=true;
this.isYAddFlag=true;
}else if(this.x>this.canvasW/2 && this.y<=this.canvasH/2){ //右上,含Y中间右轴线
this.isXAddFlag=false;
this.isYAddFlag=true;
}else if(this.x<=this.canvasW/2 && this.y>this.canvasH/2){ //左下,含X中间下轴线
this.isXAddFlag=true;
this.isYAddFlag=false;
}else{ //右下
this.isXAddFlag=false;
this.isYAddFlag=false;
}
//设置 XY 两个方向的增量方式:增或减，以及位移量
this.diffX=Math.sin(Math.PI/180*this.moveAngle)*this.speed;
this.diffX=this.isXAddFlag ? this.diffX : 0-this.diffX ;
this.diffY=Math.cos(Math.PI/180*this.moveAngle)*this.speed;
this.diffY=this.isYAddFlag ? this.diffY : 0-this.diffY;
if(this.diffX < 0.001) this.diffX=Math.random(); //diffX,diffY > 0.001, //set the min diffX,diffY
if(this.diffY < 0.001) this.diffY=Math.random();
//alert('tribe init...'); //for TEST
};
//tribeman Action area
this.move=function(){
//function to move tribemen, if death then can not move more.
var c=$('gameCanvas');
var cxt=c.getContext("2d");
if(this.lifeValue>0){ //active lefe
var ftFlag=this.faceTouch();
if(ftFlag){ //face touch
//face touch then fighting
cxt.drawImage(this.tribeManPicObj,this.gridSize*this.picSN,this.gridSize*2,this.gridSize,this.gridSize,this.x,this.y,this.gridSize,this.gridSize);
if(westCowboy.lifeValue>0)
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*westCowboy.picSN,westCowboy.gridSize*5,westCowboy.gridSize,westCowboy.gridSize,westCowboy.x,westCowboy.y,westCowboy.gridSize,westCowboy.gridSize);
else
cxt.drawImage(westCowboy.cowboyPicObj,westCowboy.gridSize*4,westCowboy.gridSize*3,westCowboy.gridSize,westCowboy.gridSize,westCowboy.x,westCowboy.y,westCowboy.gridSize,westCowboy.gridSize);
}else{ //no face touch, move continue
if(westCowboy.lifeValue<=0){ //cowboy death then tribe man walk free
//-----start: walk free-----
if(this.x<0) this.diffX = Math.abs(this.diffX);
if(this.x>this.canvasW) this.diffX = -Math.abs(this.diffX);
if(this.y<0) this.diffY = Math.abs(this.diffY);
if(this.y>this.canvasH) this.diffY = -Math.abs(this.diffY);
//-----end: walk free-----
}else{
//-----start: walk to cowboy-----
if(this.isChangeDirection){
if(westCowboy.x >= this.x)
this.diffX = Math.abs(this.diffX);
else
this.diffX = -Math.abs(this.diffX);
if(westCowboy.y >= this.y)
this.diffY = Math.abs(this.diffY);
else
this.diffY = -Math.abs(this.diffY);
}
//-----end: walk to cowboy-------
}
this.x=this.x+this.diffX; //attend: this = tribe
this.y=this.y+this.diffY;
//format: drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
if(westCowboy.x >= this.x) //move to right
cxt.drawImage(this.tribeManPicObj,this.gridSize*this.picSN,this.gridSize*0,this.gridSize,this.gridSize,this.x,this.y,this.gridSize,this.gridSize);
else //move to left
cxt.drawImage(this.tribeManPicObj,this.gridSize*this.picSN,this.gridSize*1,this.gridSize,this.gridSize,this.x,this.y,this.gridSize,this.gridSize);
}
this.picSN+=1;
if(this.picSN>=4) this.picSN=0;
}else{ //death
cxt.drawImage(this.tribeManPicObj,this.gridSize*4,0,this.gridSize,this.gridSize,this.x,this.y,this.gridSize,this.gridSize);
}
/*
//only for TEST
cxt.fillStyle="#DDDDDD"; //, 0000FF
cxt.beginPath();
cxt.arc(this.x,this.y,this.r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
*/
if(this.isShowLifeValue){
cxt.font="10px Arial";
cxt.fillStyle="#006600";
cxt.fillText("Life: "+this.lifeValue,this.x+this.r*2,this.y+this.r);
}
//for TEST
//cxt.fillStyle="#FF0000";
//cxt.fillText("changeFlag: "+this.isChangeDirection,this.x+this.r,this.y+this.r);
};
this.faceTouch=function(){
//function to jugme tribe man face touch cowboy or else,[true=face touch, false=no touch]
var dx = Math.abs(westCowboy.x-this.x);
var dy = Math.abs(westCowboy.y-this.y);
var dl=dx*dx+dy*dy;
var tl=(this.r*this.r+this.r*this.r)*2; //attend the Size of tribe man and cowboy should be the same
if(dl<tl){
return true;
}else{
return false;
}
};
this.showTribeTip=function(){
//function to show the tribe man information
var c=$('gameCanvas');
var cxt=c.getContext("2d");
cxt.font="normal normal 11px verdana";
//show tribe man lefe value
cxt.fillStyle="#0000FF";
cxt.fillText("Life:"+this.lifeValue,this.x+this.r*2,this.y); //+this.r
//show cowboy lefe value
cxt.fillStyle="#FF0000";
//cxt.clearRect(westCowboy.x+westCowboy.r,westCowboy.y-11,10*6,11); //format:context.clearRect(x,y,width,height); //clear the block first
cxt.fillText("Life:"+westCowboy.lifeValue,westCowboy.x+westCowboy.r*2,westCowboy.y); //westCowboy.r
};
this.showFightTip=function(){
//function to show the tribe man information
var c=$('gameCanvas');
var cxt=c.getContext("2d");
cxt.font="normal normal 11px verdana";
//show tribe man fighting Words
cxt.fillStyle="#0000FF";
if(this.lifeValue>0)
cxt.fillText("kill... kill...",this.x+this.r*2,this.y+this.r/2);
else
cxt.fillText("death...",this.x+this.r*2,this.y+this.r/2);
//show cowboy fighting Words
cxt.fillStyle="#FF0000";
cxt.font="normal normal 11px verdana";
//cxt.clearRect(westCowboy.x+westCowboy.r,westCowboy.y-11,10*6,11); //format:context.clearRect(x,y,width,height); //clear the block first
if(westCowboy.lifeValue>0)
cxt.fillText("fighting...fighting...",westCowboy.x+westCowboy.r*2,westCowboy.y+this.r/2);
else
cxt.fillText("death...",westCowboy.x+westCowboy.r*2,westCowboy.y+this.r/2);
};
this.fighting=function(){
//functionto fighting with cowboy here if face touch
var ft=this.faceTouch();
if(ft){ //face touch here
if(this.lifeValue>0){
if(westCowboy.lifeValue>0) westCowboy.lifeValue = westCowboy.lifeValue - this.killValue;
if(westCowboy.lifeValue<0) westCowboy.lifeValue=0;
}
if(westCowboy.lifeValue>0){
if(this.lifeValue>0) this.lifeValue = this.lifeValue - westCowboy.killValue;
if(this.lifeValue<0) this.lifeValue=0;
}
if(westCowboy.lifeValue>0){
this.showTribeTip();
this.showFightTip();
}
}else{ //face touch here
//no fighting....
}
};
};
//---------------------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){
var code = event.keyCode || window.event;
switch(code) {
case KEY.RIGHT:
case KEY.D: inputFlag.right = true; break;
case KEY.UP:
case KEY.W: inputFlag.up = true; break;
case KEY.LEFT:
case KEY.A: inputFlag.left = true; break;
case KEY.DOWN:
case KEY.S: inputFlag.down = true; break;
case KEY.QUICK: inputFlag.quick = true; break;
case KEY.C: westCowboy.isShowTip=true; break;
case KEY.X: sysVariables.showTribeMenLife(); break;
}
};
//按键放开相应动作修改
var keyRelease = function(event) {
var code = event.keyCode || window.event;
switch(code) {
case KEY.RIGHT:
case KEY.D: inputFlag.right = false; break;
case KEY.UP:
case KEY.W: inputFlag.up = false; break;
case KEY.LEFT:
case KEY.A: inputFlag.left = false; break;
case KEY.DOWN:
case KEY.S: inputFlag.down = false; break;
case KEY.QUICK: inputFlag.quick = false; break;
case KEY.C:
westCowboy.isShowTip=false; break;
case KEY.Z:
if(westCowboy.lifeValue >= westCowboy.initLifeValue)
westCowboy.lifeValue = westCowboy.initLifeValue;
else
westCowboy.lifeValue+=2;
break;
case KEY.X:
sysVariables.hideTribeMenLife();
break;
}
};
var sysVariables = {
//function to get game system variables
gameName : "West Fighting......", //about game information
gameNameCN: "决斗西途......",
gameVersion : "1.0.0",
gameLastUpdate : "2011-12-06",
gameAuthor : "shenzhenNBA",
gameAuthorIM: "",
scrW : screen.width,
scrH : screen.height,
tribeManNum:30,
tribeMen:[],
//timeStart:0,
runTime: 0,
runTimerID : "",
gameFrameSpeed: 20, //PFS
gamePlayerID: "",
i:0,
isSupportHTML5: function(){
var bn,bv,v;
try{
bn=this.getBrowserName().toLowerCase();
bv=parseFloat(this.getBrowserVersion());
}catch(e){
}
//first Support HTML5: IE v=9,Firefox v=3.5, Chrome v=3.5,Opera v=10.5, Safari v=3.0 //找的，不知是否对
if(bn=="ms ie" && bv>=9){
v=true;
}else if(bn=="firefox" && bv>=3.5){
v=true;
}else if(bn=="chrome" && bv>=3.5){
v=true;
}else if(bn=="opera" && bv>=3.5){
v=true;
}else if(bn=="safari" && bv>=3.0){
v=true;
}else{
v=false;
}
return v;
},
ua: navigator.userAgent,
getBrowserName: function(){
var uai=this.ua.toLowerCase();
var bn='';
if(uai.indexOf('msie')>=0) bn="MS IE";
if(uai.indexOf('firefox')>=0) bn="FireFox";
if(uai.indexOf('chrome')>=0) bn="Chrome";
if(uai.indexOf('opera')>=0) bn="Opera";
if(uai.indexOf('safari')>=0) bn="Safari";
if(bn=="") bn="Unknow browser";
return bn;
},
getBrowserVersion:function(){
var v='';
var uai=this.ua.toLowerCase();
if(s = uai.match(/msie ([\d.]+)/)) v = RegExp.$1 ;
if(s = uai.match(/firefox\/([\d.]+)/)) v = RegExp.$1 ;
if(s = uai.match(/chrome\/([\d.]+)/)) v = RegExp.$1 ;
if(s = uai.match(/opera.([\d.]+)/)) v = RegExp.$1 ;
if(s = uai.match(/version\/([\d.]+).*safari/)) v = RegExp.$1;
if(v=="") v='unknow version';
return v;
},
showTribeMenLife: function(){
var n=0;
for(n=0;n<sysVariables.tribeMen.length;n++){
sysVariables.tribeMen[n].isShowLifeValue=true;
}
},
hideTribeMenLife: function(){
var n=0;
for(n=0;n<sysVariables.tribeMen.length;n++){
sysVariables.tribeMen[n].isShowLifeValue=false;
}
}
};
var gameUIFace=function(objCanvas){
//function to create game UI face
var oGC=objCanvas;
//var oGC=$('gameCanvas'); //get object directly for Test
var cxt=oGC.getContext("2d");
var cx,cy,r1,r2;
r1=30;
try{ cx=oGC.width/2; }catch(e){ cx=screen.width/2; };
try{ cy=oGC.height/2; }catch(e2){ cy=screen.height/2; };
try{ r2=oGC.height/2; }catch(e3){ r2=screen.height/2; };
/* */
//----start: draw radial/gradient circle ----
var rg=cxt.createRadialGradient(cx,cy,r1,cx,cy,r2); //create object type
rg.addColorStop(0,'#FF6600'); //set the start position color
rg.addColorStop(1,'#FAFAFA'); //set the end position color
cxt.fillStyle=rg; //set the pen style
//cxt.strokeStyle=rg; //会使用单色黑色绘制，应该使用 fillStyle
cxt.beginPath();
cxt.arc(cx,cy,r2,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
//----end: draw radial/gradient circle ----
//----start: draw cowboy image ----
var img=new Image();
img.src="http://hi.csdn.net/attachment/201112/17/65387_13241032476Ybf.png"; //cowboy.png
cxt.globalAlpha=0.5; //value is [0~1],0=hide[disappear], 1 = show [clear all]
cxt.drawImage(img,cx/6,-20);
cxt.globalAlpha=1;
//----end: draw cowboy image ----
//----start: draw gradient line ----
var i=0,n=100,step=0;
try{ step=Math.floor(oGC.width/n); }catch(e4){ step=Math.floor(screen.width/n);}
for(i=0;i<=n;i++){
var lg=cxt.createLinearGradient((cx-n/2+i),cy,i*step,cy+300);
lg.addColorStop(0,'#FF3300');
lg.addColorStop(1,'#FFFFFF'); //0099CC
//cxt.fillStyle=lg; //单色黑色绘制
cxt.strokeStyle=lg; //多种颜色绘制
cxt.beginPath();
cxt.moveTo((cx-n*2+i*4),cy+n/4); //set the start position
//cxt.moveTo((cx-n/2+i),cy);
//cxt.moveTo(cx,cy);
//cxt.lineCap = 'round' ;
if((i % 5)==0)
cxt.lineWidth=2; //set the line size
//cxt.lineJoin ="miter";
else
cxt.lineWidth=1;
cxt.lineTo(i*step,cy+300);
cxt.stroke();
//cxt.fill();
cxt.closePath();
}
//----end: draw gradient line ------
//----start: draw game Title ------
var moveTXTPos=60; //about game EN Name
cxt.font="italic bold 45px Arial Black"; //Verdana ,format: context.font="style variant weight size line-height family"
cxt.fillStyle="#0000FF";
cxt.shadowColor ="#FFFF99"; //"rgb(255,0,0)" //99CCFF
cxt.shadowOffsetX=4;
cxt.shadowOffsetY=3;
cxt.shadowBlur=3;
cxt.fillText(sysVariables.gameName,cx-moveTXTPos*4,cy-40);
cxt.font="italic bold 24px 黑体"; //Verdana,Arial Black，，华文新魏 //about game CN Name
cxt.shadowColor="#FFFF99";
cxt.shadowOffsetX=2;
cxt.shadowOffsetY=2;
cxt.shadowBlur=2;
cxt.fillStyle="#660066";
cxt.fillText(sysVariables.gameNameCN,cx-moveTXTPos*1.5,cy);
cxt.font="italic normal 11px verdana"; //about game version and author
cxt.shadowOffsetX=0;
cxt.shadowOffsetY=0;
cxt.shadowBlur=1;
cxt.fillStyle="#FF0000";
cxt.fillText("Version: "+sysVariables.gameVersion+' Author: '+sysVariables.gameAuthor,cx+moveTXTPos/4,cy+20);
//----end: draw game Title ------
}
var initGameUI=function(){
//function to initialize Game UI here
//var scrW=screen.width;
//var scrH=screen.height;
var infoPanelH=80;
var xBarH=120; //height of x Bars
//var canvasW=scrW-8;
var canvasW=sysVariables.scrW-6;
//var canvasH=scrH-infoPanelH-xBarH;
var canvasH=sysVariables.scrH-infoPanelH-xBarH;
var paddingLR=5; //padding of left and right in infoPanel
var bn='',bv='';
bn=sysVariables.getBrowserName();
bv=parseInt(sysVariables.getBrowserVersion());
var oGC='';
if(bn=="MS IE" && bv<9){ //support HTML5 go here
oGC=$('gameContainer');
oGC.innerHTML="<br><p><b> Error:</b></p><br><br> 您的浏览器是 "+bn+" ,版本是 "+bv;
oGC.innerHTML+=" ,还不支持HTML5,请使用更高版本,或使用 Chrome 或 fireFox 等支持HTML5的浏览器.";
oGC.style.width=canvasW+"px";
oGC.style.height=canvasH+"px";
}else{ //support HTML5 go here
oGC=$('gameCanvas');
//oGC.style.width=canvasW+"px";
//oGC.style.height=canvasH+"px";
oGC.width=canvasW;
oGC.height=canvasH;
gameUIFace(oGC);
}
var oIP=$('infoPanel');
oIP.style.left="0";
oIP.style.top=canvasH+2;
oIP.style.position="fixed";
oIP.style.zIndex=8000;
oIP.style.width=(canvasW-paddingLR*2)+"px"; //canvasW+"px";
oIP.style.height=infoPanelH+"px";
};
var curTime=function(){ //function to display current system time
var dt=new Date()
var strHTML=dt.getFullYear()+"-"+(dt.getMonth()+1<10 ? ('0'+(dt.getMonth()+1)): dt.getMonth()+1);
strHTML+="-"+(dt.getDate()<10 ? '0'+dt.getDate() : dt.getDate());
strHTML+=" "+(dt.getHours()<10 ? '0'+dt.getHours() : dt.getHours());
strHTML+=":"+(dt.getMinutes()<10 ? '0'+dt.getMinutes(): dt.getMinutes());
strHTML+=":"+(dt.getSeconds()<10 ? '0'+dt.getSeconds() : dt.getSeconds());
$('cTime').innerHTML=strHTML;
};
var TimeOn=function(){
sysVariables.runTime++;
if(sysVariables.runTime<10) $('rTime').innerHTML='000'+sysVariables.runTime;
if(sysVariables.runTime>=10 && sysVariables.runTime<100) $('rTime').innerHTML='00'+sysVariables.runTime;
if(sysVariables.runTime>=100 && sysVariables.runTime<1000) $('rTime').innerHTML='0'+sysVariables.runTime;
if(sysVariables.runTime>=1000) $('rTime').innerHTML=sysVariables.runTime;
};
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(){
//function to play next Game Frame
var c=$("gameCanvas");
//var cxt=c.getContext("2d");
c.width=c.width; //clear and redraw it
westCowboy.move();
for(sysVariables.i=0; sysVariables.i<sysVariables.tribeMen.length; sysVariables.i++){
sysVariables.tribeMen[sysVariables.i].move();
sysVariables.tribeMen[sysVariables.i].fighting();
}
};
var initLoad=function(){
//function to initialize when loading
initGameUI();
var isSupportHTML5=sysVariables.isSupportHTML5();
if(isSupportHTML5){
setInterval('curTime()',1000);
westCowboy.init();
var i=0;
for(i=0;i<sysVariables.tribeManNum;i++){
var tMan=new tribeMan();
tMan.init();
sysVariables.tribeMen[i]=tMan;
}
}
}
window.οnlοad=function(){
initLoad();
};
var gameStart=function(){
runTimeStart();
if(!sysVariables.gamePlayerID){
initLoad();
sysVariables.gamePlayerID=setInterval(function(){gameFrameUpdate()},sysVariables.gameFrameSpeed);
tribeManMoveTimeController.timeControllerID=setInterval(function(){tribeManMoveTimeController.timeOn();},1000);
}else
alert('Game is running...');
}
var gamePause=function(){
runTimePause();
clearInterval(sysVariables.gamePlayerID);
sysVariables.gamePlayerID="";
clearInterval(tribeManMoveTimeController.timeControllerID);
tribeManMoveTimeController.timeControllerID="";
}
var gameContinue=function(){
runTimeStart();
if(!sysVariables.gamePlayerID) sysVariables.gamePlayerID=setInterval(function(){gameFrameUpdate()},sysVariables.gameFrameSpeed);
if(!tribeManMoveTimeController.timeControllerID) tribeManMoveTimeController.timeControllerID=setInterval(function(){tribeManMoveTimeController.timeOn();},1000);
}
var gameRestart=function(){
runTimeReset();
clearInterval(sysVariables.gamePlayerID);
sysVariables.gamePlayerID="";
clearInterval(tribeManMoveTimeController.timeControllerID);
tribeManMoveTimeController.timeControllerID="";
initLoad();
gameStart();
}
var gameEnd=function(){
runTimePause();
westCowboy.lifeValue=0;
var h=0;
for(h=0;sysVariables.tribeMen.length;h++){
sysVariables.tribeMen[h].lifeValue=0;
}
gameFrameUpdate();
clearInterval(sysVariables.gamePlayerID);
sysVariables.gamePlayerID="";
clearInterval(tribeManMoveTimeController.timeControllerID);
tribeManMoveTimeController.timeControllerID="";
}
//--------------------end: global function define--------------------
</script>
</body>
</html>
把以上代码保存成 html 格式的就可以运行了，
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
