HTML5 游戏 West Fighting, 西途决斗 - 原创,该如何处理
日期：2014-05-16 浏览次数：20422 次
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 键可以增加博斗能力，即增加牛仔生命值
游戏开始可能得刷新几次，等图片下载完成后才好操作；
不多说了，先看图
游戏开始界面
游戏开始后截面
游戏使用的人物动作分解图，那个有更好的可以完善，俺只是简单的做了一下，很陋也，不过看那些族人和牛仔走东蛮生动的，呵呵，有点意思
以下是核心代码：
近年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>
<!--sta
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
