HTML5游戏开发实战--小心

时间 2019-11-19

标签 html5 html 游戏开发实战小心栏目 HTML5 繁體版

原文原文链接

1.WebSocket它是HTML5该标准的一部分。Web页面能够用它来链接到持久socketserver在。该接口提供一个浏览器和server与事件驱动的链接。这意味着client每次须要时再也不server发送一个新的数据请求。css

当有须要更新数据，server就可以直接推送数据更新给浏览器。该功能的优势之中的一个就是玩家之间可以实时进行交互。web

当一个玩家作了些事，就会向server发送数据，server将广播一个事件给其它已链接的所有浏览器。让它们知道玩家作了什么。这样就使得制做HTML5网络游戏成为可能。canvas

2.随着现代浏览器对HTML5元素的原生支持，将再也不需要用户预装第三方插件就可以玩游戏了。数组

3.咱们把JavaScript代码放置在body结束标签</body>以前且在页面所有内容以后。浏览器

如下介绍把代码放在这个位置，而不是曾经的<head></head>两个标签之间的缘由。服务器

4.一般，浏览器是自上而下载入和渲染内容的。假设JavaScript代码放置在head部分里。会致使JavaScript代码已载入完，而文档内容可能尚未载入完的状况出现。网络

其实。假设浏览器在页面中间载入JavaScript代码，就会中断正在进行的渲染和载入。这就是尽量把JavaScript代码放到页面底部的缘由。经过这样的方式。可以提高载入内容的性能。架构

5.jQuery为咱们提供了在页面载入完毕后才运行代码的方法，例如如下：dom

jQuery（document）.ready（function （）socket

{

//这里是代码

}）；

$(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 = " media / button_active.mp3 " />

< source src = " 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函数可以很是easy就将不论什么JavaScript对象编码成JSON，代码例如如下：JSON.stringify ( anyObject );

26.localStorage.removeItem ( key );使用该函数来删除给定键的记录的使用方法；

27.localStorage.clear();使用该函数可以删除所有的记录。

28.WebSocket赞成建立基于事件驱动的server-client架构。让所有链接的浏览器可以相互间实时传递消息。

29.向所有已链接的浏览器广播消息。

每当服务器触发一个新的connection事件，就会向所有client广播链接数的更新。向client广播一条消息很easy，仅仅需要调用server实例的broadcast函数，并将string类型的广播消息做为參数传入该函数就可以了。

如下的代码段用于向所有已链接的浏览器广播一条server消息：

var message = " a message from server ";

server.broadcast( message );

30.在server与client之间发送和接收的消息仅仅能是字符串类型的。而不能直接发送对象。

所以，可以在传送前将数据转换成JSON格式的字符串。

31.可以使用例如如下CSS样式将这些图像标签资源位置移出HTML的显示范围以达到隐藏它们的目的。

咱们不使用display:none来作这件事。因为浏览器没法获取未显示元素的长度和高度。而在物理世界里。却需要长度和高度来正肯定位图像：

#asset

{

position:absolute;

top:-99999px;

}