大家好，又见面了，我是全栈君
1.WebSocket它是HTML5该标准的一部分。Web页面可以用它来连接到持久socketserver在。该接口提供一个浏览器和server与事件驱动的连接。这意味着client每次需要时不再server发送一个新的数据请求。
当有需要更新数据，server就能够直接推送数据更新给浏览器。该功能的优点之中的一个就是玩家之间能够实时进行交互。
当一个玩家做了些事，就会向server发送数据，server将广播一个事件给其它已连接的全部浏览器。让它们知道玩家做了什么。这样就使得制作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 = ” 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;
}
版权声明：本文博主原创文章，博客，未经同意不得转载。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/116849.html原文链接：https://javaforall.cn
