首页 > 代码库 > HTML5游戏开发实战--注意点
HTML5游戏开发实战--注意点
1.WebSocket是HTML5标准的一部分，Web页面可以用它来持久连接到socket服务器上。该接口提供了浏览器与服务器之间的事件驱动型连接，这意味着客户端不必再每隔一个时间段就需要向服务器发送一次新的数据请求。当有数据需要更新时，服务器就可以直接推送数据更新给浏览器。该功能的好处之一就是玩家之间可以实时进行交互。当一个玩家做了些事，就会向服务器发送数据，服务器将广播一个事件给其他已连接的所有浏览器，让它们知道玩家做了什么。这样就使得制作HTML5网络游戏成为可能。
2.随着现代浏览器对HTML5元素的原生支持，将不再需要用户预装第三方插件就可以玩游戏了。
3.我们把JavaScript代码放置在body结束标签</body>之前且在页面所有内容之后。下面介绍把代码放在这个位置，而不是以前的<head></head>两个标签之间的原因。
4.通常，浏览器是自上而下加载和渲染内容的。如果JavaScript代码放置在head部分里，会导致JavaScript代码已加载完，而文档内容可能还没有加载完的情况出现。事实上，如果浏览器在页面中间加载JavaScript代码，就会中断正在进行的渲染和加载。这就是尽可能把JavaScript代码放到页面底部的原因。通过这种方式，可以提升加载内容的性能。
5.jQuery为我们提供了在页面加载完成后才执行代码的方法，如下：
jQuery（document）.ready（function （）
{
//这里是代码
}）；
$(function ()
{
//这里是代码
});
6.使用jQuery比单纯使用JavaScript有如下几个优势：
使用jQuery可以用更短的代码来选择DOM节点并对其进行修改。
短代码更有利于代码的阅读，这对游戏开发至关重要，因为游戏开发往往包含大量的代码。
写短代码可以加快开发速度。
使用jQuery库可以让代码无须做额外的调整就可以支持所有主流浏览器；jQuery对纯JavaScript代码进行包装以达到自身实现跨浏览器的能力。
7.给键盘上的每一个按键都分配了一个数字，通过获取数字，我们可以找到是哪个键被按下。通过监听jQuery的keydown事件监听器，在事件触发时event对象会包含按键代码（key code）。可以通过调用按键event对象的which函数来获得按键代码。
$(document).keydown(function (e)
{
console.log(e.which);
switch(e.which)
{
case 38: //按下向上键的处理
}
});
8.在大多数情况下，可以通过像100px这样的格式给DOM元素left和top属性设置CSS样式。在设置属性时指定单位，而在获取属性值时，返回的也会是带单位的值。比如，当调用$("#paddleA").css("top")时，所得到的值是100px而不是100.这样在对这个值执行数学运算时就会遇到问题。
$("#paddleA").css("top") + 5，返回的将是100px5，而不是我们想要的结果。
9.parseInt（string, radix）需要解析的字符串；可选参数，用一个数字来指示需要使用什么进制的系统。
parse ( "5cm" )返回5； parse ( "FF" , 16 )返回255
10.由于全局变量在整个文档都有效，因此在集成了不同的JavaScript库到Web页面中时会增加变量名冲突的概率。更好的做法是，将使用的全局变量放入一个对象中。
11.在介绍背面可见性前，页面上的所有元素应该只呈现它们的前面。以前，元素没有正面或背面的概念，因为它只有一个选择。现在，当CSS3引入三轴旋转概念后，可以对元素进行3D旋转，这样它就有了背面。
12.CSS3引用了一个叫backface-visibility（背面可见性）的属性，用于定义是否能看到元素的背面。默认情况下，它是可见的。
13.对齐
$( "#cards" ).children ().each ( function ( index )
{
//让纸牌以4×3的形式对齐
$( this ).css (
{
" left " : ( $( this ).width() + 20 ) * ( index % 4),
" top ": ( $( this ).height() + 20 ) * Math.floor ( index / 4)
});
});
“%”在JavaScript中叫模数操作符，它返回被除数的余数。余数用来作为列的计数；除法的结果--商，可以用来作为行的计数。
以索引值3为例，3%4等于3，所以索引值为3的纸牌位于第4列。而3/4等于0，所以它位于第1行。
14.CSS3弹性盒布局模块
display : -webkit-box;
-webkit-box-pack : center;
-webkit-box-align : center;
弹性盒模块定义了当元素的容器还有多余空间时元素的对齐方式。我们可以这样设置元素的行为为弹性盒容器：将display（一个CSS2属性）的值设置为box（一个CSS3新属性值）。box-pack和box-align是两个属性，用于定义在水平和垂直方向上如何对齐和使用额外的可用空间。可以通过设置两个属性为center来使元素居中。
15.通过自定义数据属性，可以将自定义数据保存进DOM元素中。我们可以创建以data-为前缀的自定义属性名并给它赋值。
<ul>
< li data-chapter = "2" data-difficulty = "easy" > Ping-Pong < /li >
< li data-chapter = "3" data-difficulty = "medium" > Matching Game < /li >
</ul>
这是HTML5标准中提出的一个新功能。据W3C透露，自定义数据属性的目的是保存页面或应用程序的私有自定义数据，目前，没有其他属性和元素比它更合适这个目的了。
W3C还表示，这个自定义数据属性是“仅供网站自己的脚本使用而不是公用元数据的一种通用扩展机制”。
$( this ).attr ( " data-pattern " , pattern );
对于HTML5自定义数据属性，jQuery提供了另一个函数来访问HTML5自定义属性属性，那就是data函数。
data函数最先用于给HTML元素的jQuery对象嵌入自定义数据。后来用来访问HTML5自定义数据属性。
.data ( key );
.data ( key, value );
< div id = " target " data-custom-name = " HTML5 Games " > < /div >可以调用jQuery的data函数访问data-custom-name属性
$( " #target " ).data( " customName " ) 它将返回“HTML5 Games”
16.HTML5的一个最重要功能就是Canvas元素。我们可以把Canvas元素看做一个能够用脚本在里面绘制图像和图形的动态区域。
17.在Canvas中执行路径绘制的操作
var canvas = document.getElementById( " game " );
var ctx = canvas.getContext( " 2d " );
ctx.fillStyle = " red ";
ctx.arc ( 100 , 100 , 50 , 0 , Math.PI * 2 , true );
ctx.fill();
ctx.arc ( 200 , 100 , 50 , 0 , Math.PI * 2 , true );
ctx.fillStyle = " green ";
ctx.fill();
当调用arc函数或其他路径绘制函数时，不会在Canvas上立即绘制出路径。相反，只是将它加入一个路径列表中。这些路径在执行绘制命令前不会绘制出来。
Canvas的API中有两条绘制执行命令，一条命令用于填充路径，另一条用于绘制描边。可以通过fill函数来填充路径，还可以通过调用stroke函数来对路径进行描边。
fill和stroke函数负责在Canvas上填充和绘制路径，但是它不负责清除路径列表。上面的例子在用红色填充圆之后，就添加另一个圆并给它填充绿色，执行结果却是两个圆都填充了绿色。因为当调用第2条fill命令时，Canvas中的路径列表还包含两个圆。因此，fill命令用绿色填充这两个圆，也就是重新填充用来红色的圆。
为了解决这个问题，需要确保在每次绘制一个新形状前都调用beginPath。beginPath清空路径列表，所以下次调用fill和stroke命令时，它将只应用上次调用beginPath之后的所有路径。closePath函数将会从最新路径的终点到路径的起点之间绘制一条直线，用于闭合路径。
18.在JavaScript中，可以使用Math.random（）函数生成随机数。
random函数没有参数，它总是返回0~1之间的一个浮点数，这个数大于等于0且小于1。有两种常用的方式来使用random函数。一种是在给定范围内生成随机数。另一种是生成true或false布尔值。
Math.floor( Math.random() * B ) + A; //Math.floor()函数舍掉给定数的小数。Math.floor( Math.random() * 10 ) + 5是5~14之间的一个整数；
( Math.random() > 0.495 ); //获取一个随机布尔值，意味着会有50%返回false和50%返回true。
19.值得注意的是，在Canvas中绘制的文本会被视为位图图像数据，这就意味着浏览者不能选择这些文本；同时，搜索引擎也不能索引这些文本；同样，也不能搜索它们。由于这个原因，我们应该仔细想想，是将文本绘制在Canvas里还是直接把它们放到DOM里。
20.播放声音。可以通过调用getElementById函数来获取audio元素的引用。接着，再调用play函数来播放它。
< audio id = " buttonactive " >
< source src = http://www.mamicode.com/" media / button_active.mp3 " />
< source src = http://www.mamicode.com/" media / button_active.ogg " />
< /audio >
< script >
document.getElementById( " buttonactive " ).currentTime = 3.5;
document.getElementById( " buttonactive " ).play();
document.getElementById( " buttonactive " ).pause();
< /script >
play函数将从当前播放时间的位置开始播放音频，它存储于currentTime属性中。currentTime的默认值是0。上面的代码将会从3.5秒的位置开始播放音频；还可以通过使用pause函数来暂停一个audio元素的播放。
21.JavaScript的parseInt函数的第二个参数是可选的。它定义了解析数字的基数。默认情况下，它使用十进制，但是当字符串以零开始时，parseInt将以八进制来解析字符串。比如，parseInt( " 010 " )会返回8作为结果而不是10.
22.通过本地存储技术保存和加载数据。可以使用localStorage对象的setItem函数来保存数据。
localStorage.setItem ( key, value );键是记录的名称，用它来标识对应的实体；值是将保存的任何数据。
localStorage.getItem ( key );该函数返回给定键的存储值。当试图获取不存在的键时它会返回null。
23.本地存储的大小限制。每个域名通过localStorage存储数据时会有大小的限制。这个大小的限制在不同的浏览器中可能会略有不同。通常，大小限制为5MB。当设置一个键-值对到localStorage中时，如果超出限制，浏览器会抛出一个QUOTA_EXCEEDED_ERR异常。
24.使用setItem和getItem
localStorage.setItem( " last-elapsed-time" , elapsedTime );
var lastElapsedTime = localStorage.getItem( " last-elapsed-time " );
作为数组形式访问localStorage，代码如下：
localStorage[ " last-elapsed-time " ] = elapsedTime;
var lastElapsedTime = localStorage[ " last-elapsed-time " ];
25.现代Web浏览器都原生支持JSON，使用stringify函数可以很容易就将任何JavaScript对象编码成JSON，代码如下：JSON.stringify ( anyObject );
26.localStorage.removeItem ( key );使用该函数来删除给定键的记录的用法；
27.localStorage.clear();使用该函数可以删除所有的记录。
28.WebSocket允许创建基于事件驱动的服务器-客户端架构，让所有连接的浏览器可以相互间实时传递消息。
29.向所有已连接的浏览器广播消息。每当服务器触发一个新的connection事件，就会向所有客户端广播连接数的更新。向客户端广播一条消息非常容易，只需要调用server实例的broadcast函数，并将string类型的广播消息作为参数传入该函数就可以了。
下面的代码段用于向所有已连接的浏览器广播一条服务器消息：
var message = " a message from server ";
server.broadcast( message );
30.在服务器与客户端之间发送和接收的消息只能是字符串类型的，而不能直接发送对象。因此，可以在传送前将数据转换成JSON格式的字符串。
31.可以使用如下CSS样式将这些图像标签资源位置移出HTML的显示范围以达到隐藏它们的目的。我们不使用display:none来做这件事，因为浏览器无法获取未显示元素的长度和高度。而在物理世界里，却需要长度和高度来正确定位图像：
#asset
{
position:absolute;
top:-99999px;
}