HTML5 游戏 West Fighting, 西途决斗 - 原创
近年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 键可以增加博斗能力，即增加牛仔生命值
游戏开始可能得刷新几次，等图片下载完成后才好操作；
不多说了，先看图
游戏开始界面
游戏开始后截面
游戏使用的人物动作分解图，那个有更好的可以完善，俺只是简单的做了一下，很陋也，不过看那些族人和牛仔走东蛮生动的，呵呵，有点意思
以下是核心代码：
- HTML code
<!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>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 onkeydown="javascript:keyPress(event);" onkeyup="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: 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-----------------------
到时我把这里发布到我的博客
[解决办法]
发这么长，居然还没完啊。我插一下，你可以继续发。
另外，最好能改就改成奥得曼狂殴小怪兽。因为据说印第安人是咱华夏祖先的分支。
[解决办法]
而且主人公拿火枪干拿木锤的，来一个打一个，也太胜之不武了。都赤手空拳，就不死就猛，这才男人。
[解决办法]
楼主上面给出的超链接地址不对...
貌似应该是：
http://blog.csdn.net/shenzhennba/article/details/7079986
[解决办法]
太狠了！
[解决办法]
虽然看不懂 感觉很NB
[解决办法]
超赞呢··
[解决办法]
看不懂好复杂
[解决办法]
恩,很好哦.我去试试看
[解决办法]
看不懂，但感觉很厉害的样子。
[解决办法]
很好很强大，谢谢分享！
[解决办法]
这图形非常有意思
[解决办法]
good,先看下，有空在来搞下
[解决办法]
有点意思。。。
[解决办法]
虽然不懂,但是看起来很不错
[解决办法]
很牛
[解决办法]
强大啊。。。再来点技能什么的就好了。。
[解决办法]
这个帖子反应了js的问题，封装乱...
[解决办法]
不错不错，什么时候出一个‘人物动作武器升级版’
[解决办法]
厉害
[解决办法]
厉害。。
[解决办法]
很好很强大，谢谢分享！
[解决办法]
厉害厉害厉害。
[解决办法]
HTML5还没接触过呀。。学习下。。
[解决办法]
哈哈哈哈，很有意思
[解决办法]
星星级的就是不一样,顶
[解决办法]
强大啊
[解决办法]
好歹多给几个截图啊，这年头, 脑补太伤神了
[解决办法]
不错啊，超赞！
[解决办法]
很详细，很清晰的思路，前后变量看着看着就不知道是什么了..呵呵，支持！！
[解决办法]
正在学习。。。谢谢分享！哈哈
[解决办法]
很强大啊不错
------解决方案--------------------
有点意思。。。
[解决办法]
找时间学学，觉得html5是趋势啊
[解决办法]
有时间再看
[解决办法]
楼主，可以用jquery1.7来制作不？？
[解决办法]
顶一个，最近也在用html5写游戏，写的有点乱，先收藏，有时间再来慢慢研究
[解决办法]
人物有点2
[解决办法]
貌似写的JS完全看不懂
[解决办法]
有意思的样子 学习下
[解决办法]
感觉强大的不是HTML5 而是JS
[解决办法]
强大呀，蹉跎的人伤不起
[解决办法]
楼主威武！！！！支持！！！！
[解决办法]
看看先，参考下
[解决办法]
难道是浏览器问题?复制粘贴之后运行error
[解决办法]
接分。。。。。。。。。。。。。
[解决办法]
厉害呀，去研究研究
[解决办法]
真不错，就是美工差点，咯品牌
[解决办法]
虽然看不懂，但是感觉HTML5好牛。。。。
[解决办法]
先收藏了~
[解决办法]
HTML5还没开始学习，边学边做，楼主强大！
[解决办法]
图片挂了。。。
[解决办法]
学习呀，谁有HTML5教学视频，找了几本书，都是英文的，好难
[解决办法]
好强大的说
[解决办法]
HTNL5 + CCS3 听说这是将来的趋势啊， 变化也太快了
[解决办法]
请问是HTML5+CSS吧？怎么是ccS 呢？
[解决办法]
HTML5还没接触过呀。。学习下。。
[解决办法]
神国传送
[解决办法]
我感觉自己一时半会应该是看不懂的~~~~~~~
[解决办法]
<!DOCTYPE html>
HTML5第一行是这么写的
[解决办法]
这么牛，研究研究
[解决办法]
不懂啊~~~~~~~~~~~~
[解决办法]
看不明白 有点强大 有时间也学学 HTML5
[解决办法]
很好玩
[解决办法]
真好玩啊，， js高手。。
------解决方案--------------------
楼主很牛哦
[解决办法]
没法在线玩啊
我想点击一个超链接，玩玩体验体验 不想复制代码太麻烦了