HTML5游戏开发实战--当心
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;
}
版权声明：本文博主原创文章，博客，未经同意不得转载。
HTML5游戏开发实战--当心的更多相关文章
- HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
- CutJS – 用于 HTML5 游戏开发的 2D 渲染引擎
CutJS 是轻量级的,快速的,基于 Canvas 开发的 HTML5 2D 渲染引擎,可以用于游戏开发.它是开源的,跨平台的,与现代的浏览器和移动设备兼容.CutJS 提供了一个类似 DOM 树的 ...
- HTML5游戏开发技术基础整理
随着HTML5标准终于敲定.HTML5将有望成为游戏开发领域的的热门平台. HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机.智能手机以及平板电脑上,是眼下跨平台应用开发的最佳实 ...
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...
- 优秀工具推荐：两款很棒的 HTML5 游戏开发工具
HTML5 众多强大特性让我们不需要多么高深技术就能创建好玩的网页游戏,同时证明了开放的 Web 技术能与任何其他在游戏开发中使用的技术竞争.正如标题所说,这篇文章推荐的几款很棒 HTML5 游戏开发 ...
- HTML5游戏开发引擎,初识CreateJS
CreateJS为CreateJS库,可以说是一款为HTML5游戏开发的引擎.打造 HTML5 游戏,构建新游戏,提供构建最新 HTML5 的技术.你可以通过这个网站学习如何构建跨平台和跨终端游戏.这 ...
- HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）
HTML5游戏开发进阶指南(亚马逊星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.)著 谢光磊译 ISBN 978-7-121-21226-0 201 ...
- HTML5游戏开发,剪刀石头布小游戏案例
剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友. ...
- cocos2d-x游戏开发实战原创视频讲座系列1之2048游戏开发
cocos2d-x游戏开发实战原创视频讲座系列1之2048游戏开发 的产生 视持续更新中.... 视频存放地址例如以下:http://ipd.pps.tv/user/1058663622 ...
随机推荐
- copy算法
copy------强化效率无所不用其极 copy(first,last,result)算法可将输入区间[first,last)内的元素拷贝到输出区间[result,result+(last-f ...
- 图像处理特征不变算子系列之Moravec算子（一）
论文转载请注明出处:http://blog.csdn.net/kezunhai 1977年,Moravec提出了兴趣点(Points of Interests)的概念,并应用于解决Stanford C ...
- python语言学习4——使用文本编辑器
在Python的交互式命令行写程序,好处是一下就能得到结果,坏处是没法保存,下次还想运行的时候,还得再敲一遍. 所以,实际开发的时候,我们总是使用一个文本编辑器来写代码,写完了,保存为一个文件,这样, ...
- matlab矩阵的表示和简单操作
原地址:http://www.cnblogs.com/Ran_Ran/archive/2010/12/11/1903070.html 一.矩阵的表示在MATLAB中创建矩阵有以下规则: a.矩阵元素必 ...
- 【Ruby】Ruby的model学习——Active Record Associations
在阅读的过程中有不论什么问题,欢迎一起交流 邮箱:1494713801@qq.com QQ:1494713801 一.怎样定义关联 两个model之间经常会存在关联关系,为了解决这些关联引起的复 ...
- Windown安装Mysql安装图解
一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩,运行“setup.exe”. 2.选择安装类型,有“Typical(默认)”.“Comp ...
- coding.net解决github上下载速度慢问题
由 于众所周知的原因,从github下载项目很慢,一般不超过10kb(我的是20兆公司网)例如我下载OpenRefine,没有3个小时搞不定.所以想 到了一个方法来解决他.就是使用国内其他代码托管平台 ...
- U6Linux的文件权限与目录配置
1.ll查看文件信息:［权限］［连接］［所有者］［用户组］［文件容量］［修改日期］［文件名］ 2.第一个字符代表文件的属性:若为［d］则是目录．若为[-]则是文件．若为[l]则为连接． 3.chgrp ...
- 【filezilla】 ubuntu下安装filezilla
sudo apt-get install filezilla '安装filezilla3.6.02 filezilla '执行filezilla
- 转载ECTouch1.0 修改后台广告管理中广告列表显示广告图片
http://www.ectouch.cn/topics/94.html 效果 操作: 1. 修改后台控制器文件 调用出相关字段信息. mobile\include\apps\admin\contro ...