HTML5 游戏 West Fighting, 西途决斗 - 原创

shenzhenNBA 2011-12-17 02:36:42
加精
近年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 键可以增加博斗能力，即增加牛仔生命值

游戏开始可能得刷新几次，等图片下载完成后才好操作；



不多说了，先看图

游戏开始界面


游戏开始后截面


游戏使用的人物动作分解图，那个有更好的可以完善，俺只是简单的做了一下，很陋也，不过看那些族人和牛仔走东蛮生动的，呵呵，有点意思



以下是核心代码： 


<!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-----------------------



到时我把这里发布到我的博客








...全文
9805 132 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
132 条回复
切换为时间正序
请发表友善的回复…
发表回复
赵国胖胖 2012-09-12
  • 打赏
  • 举报
 回复
玩了玩,还不错代码没看呢,不知道复不复杂
totorest 2012-04-13
  • 打赏
  • 举报
 回复
强大的地球人
k_god 2012-04-13
  • 打赏
  • 举报
 回复
楼主很牛气啊
灵雨飘零 2011-12-29
  • 打赏
  • 举报
 回复
qq290984182 2011-12-29
  • 打赏
  • 举报
 回复
楼主强人，学习中...
hw80520997 2011-12-28
  • 打赏
  • 举报
 回复
看来用js写个稍大点的程序还真不是件容易的事情
jackingod 2011-12-28
  • 打赏
  • 举报
 回复
顶一个 关注 html5的游戏也不是很多啦
shenzhenNBA 2011-12-28
  • 打赏
  • 举报
 回复

WestFighting-西途决斗 v1.2.0， 发帖子了

过瘾啊，增加血瓶功能，呵呵...


http://download.csdn.net/detail/shenzhennba/3978603 ，下载

大家拍砖，砸凳...
shenzhenNBA 2011-12-28
  • 打赏
  • 举报
 回复
[Quote=引用 108 楼 kojper 的回复:]

有没有压缩包下载呀？
[/Quote]


有阿，我把压缩文件放到CSDN下载那里了，去看看

[Quote=引用 121 楼 wizard_zj 的回复:]

顶一个 关注 html5的游戏也不是很多啦
[/Quote]

有不少，可能很原始的设计可能少点吧，

[Quote=引用 122 楼 hw80520997 的回复:]

看来用js写个稍大点的程序还真不是件容易的事情
[/Quote]

如果有兴趣，可能就好办了，游戏的构思，图片设计，代码完成，功能实现等确实需要一点时间考虑/制作，


这两天升级了，主要是血瓶功能实现，呵呵，，如果牛仔进入虚弱期,有血瓶出现，就可以喝血了，血瓶制作有点像其他游戏中的药瓶，呵呵，制作也是比较简陋的，马上发 v1.2.0版了（怪了好像不显示，再发一次）
shenzhenNBA 2011-12-28
  • 打赏
  • 举报
 回复
[Quote=引用 108 楼 kojper 的回复:]

有没有压缩包下载呀？
[/Quote]


有阿，我把压缩文件放到CSDN下载那里了，去看看

[Quote=引用 121 楼 wizard_zj 的回复:]

顶一个 关注 html5的游戏也不是很多啦
[/Quote]

有不少，可能很原始的设计可能少点吧，

[Quote=引用 122 楼 hw80520997 的回复:]

看来用js写个稍大点的程序还真不是件容易的事情
[/Quote]

如果有兴趣，可能就好办了，游戏的构思，图片设计，代码完成，功能实现等确实需要一点时间考虑/制作，


这两天升级了，主要是血瓶功能实现，呵呵，，如果牛仔进入虚弱期,有血瓶出现，就可以喝血了，血瓶制作有点像其他游戏中的药瓶，呵呵，制作也是比较简陋的，马上发 v1.2.0版了（怪了好像不显示，再发一次）
shenzhenNBA 2011-12-28
  • 打赏
  • 举报
 回复
[Quote=引用 108 楼 kojper 的回复:]

有没有压缩包下载呀？
[/Quote]


有阿，我把压缩文件放到CSDN下载那里了，去看看

[Quote=引用 121 楼 wizard_zj 的回复:]

顶一个 关注 html5的游戏也不是很多啦
[/Quote]

有不少，可能很原始的设计可能少点吧，

[Quote=引用 122 楼 hw80520997 的回复:]

看来用js写个稍大点的程序还真不是件容易的事情
[/Quote]

如果有兴趣，可能就好办了，游戏的构思，图片设计，代码完成，功能实现等确实需要一点时间考虑/制作，


这两天升级了，主要是血瓶功能实现，呵呵，，如果牛仔进入虚弱期,有血瓶出现，就可以喝血了，血瓶制作有点像其他游戏中的药瓶，呵呵，制作也是比较简陋的，马上发 v1.2.0版了
fyswords 2011-12-27
  • 打赏
  • 举报
 回复
很强，有意思啊
ankangseu 2011-12-27
  • 打赏
  • 举报
 回复
厉害，有时间要看看代码。
netcaoniao 2011-12-27
  • 打赏
  • 举报
 回复
有时间看看
liveths 2011-12-26
  • 打赏
  • 举报
 回复
什么叫骗分？例如我就是
yidkj 2011-12-26
  • 打赏
  • 举报
 回复
好厉害啊
kojper 2011-12-26
  • 打赏
  • 举报
 回复
有没有压缩包下载呀？
Q73753 2011-12-26
  • 打赏
  • 举报
 回复
很强大
桃园闲人 2011-12-26
  • 打赏
  • 举报
 回复
厉害，有时间要看看代码。
feixue001122 2011-12-25
  • 打赏
  • 举报
 回复
牛人啊
加载更多回复（75）
WestFighting-西途决斗 v1.2.0
WestFighting - 西途决斗 v1.2.0版, 在v1.1.0版本的基础上主要增加了血瓶功能和其他的一些，呵呵,欢迎拍砖...
WestFighting-西途决斗 v1.1.0
WestFighting-西途决斗 v1.1.0， 修正和增加了一些功能，欢迎大家一起讨论...
HTML5 GAME West Fighting / 西途决斗
近年HTML5 正火热中，看到很多人开始熟悉HTML5，我也凑凑时间学点，边工作边写，上班闲闲时悄悄用HTML5写一个游戏来玩,呵呵...一边学习HTML5一边学习点游戏开发，很有意思......以下是俺从构思，设计，代码，功能实现等等都是很原始设计...花了几天时间拿来晒晒... HTML5 GAME West Fighting[决斗西途]，设计 ==============
HTML5 GAME West Fighting / 西途决斗 框架说明
游戏的框架说明如下： 大致是这样的：游戏页面加载初始化界面相关，然后是游戏封面，游戏开始后，主要就是画布canvas的操作，不断地每隔一段时间刷新画布,刷新的内容有比较多，按游戏前面的相关定义去实现，new 指定个数的族人，和牛仔加入，位置更新，距离判断，方向修改，决斗画面制作，决斗数据更新等等... 总之象电影播放一样一桢一桢的播放那样...各个对象或类，方法分别说明如下：
WestFighting / 西途决斗 升级 - v1.1.0 版
WestFighting / 西途决斗 升级 这次在原来的基础上升级到v1.1.0版，修正或正加了一些功能如下： 1, 修正上下牛仔走动时脚没有动作的情况； 2, 不支持游戏的浏览器提示修改; 3, 族人的活动和死亡数量的实时更新; 4, 暂停后又继续时记录运行时钟钟变快,修改该问题; 5, 辅助对象名称 sysVariables 修改为 gameSystem 比较直观也好记;
JavaScript

87,994

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章