11.8日-2017复习总结杂---今天说到ES法则与HTML5 （点阵生成碰撞检测）很好的一节

发布时间：2023-09-06 01:24责任编辑：彭小芳关键词：HTML

ES标准

1
著名的变量命名规则

只是因为变量名的语法正确，并不意味着就该使用它们。变量还应遵守以下某条著名的命名规则：
Camel 标记法
首字母是小写的，接下来的字母都以大写字符开头。例如：
var myTestValue = 0, mySecondValue = "hi";
Pascal 标记法

首字母是大写的，接下来的字母都以大写字符开头。例如：
var MyTestValue = 0, MySecondValue = "hi";
匈牙利类型标记法

在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“
var iMyTestValue = 0, sMySecondValue = "hi";
整数(integer)

本教程采用了这些前缀，以使示例代码更易阅读：
类型前缀示例
数组aaValues
布尔型bbFound
浮点型（数字）ffValue
函数fnfnMethod
整型（数字）iiValue
对象ooType
正则表达式rerePattern
字符串ssValue
变型（可以是任何类型）vvValue

ECMAScript 的解释程序遇到未声明过的标识符时，用该变量名创建一个全局变量，并将其初始化为指定的值。--------这是一个重点

注意：如果把关键字用作变量名或函数名，可能得到诸如 "Identifier Expected"（应该有标识符、期望标识符）这样的错误消息。
注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。
当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

最后一个特殊值是 NaN，表示非数（Not a Number）。NaN 是个奇怪的特殊值。一般说来，这种情况发生在类型（String、Boolean 等）转换失败时。
例如，要把单词 blue 转换成数值就会失败，因为没有与之等价的数值。与无穷大一样，NaN 也不能用于算术计算。
NaN 的另一个奇特之处在于，它与自身不相等，这意味着下面的代码将返回 false：

出于这个原因，不推荐使用 NaN 值本身。函数 isNaN() 会做得相当好：

ECMAScript 的 Boolean 值、数字和字符串的原始值的有趣之处在于它们是伪对象，这意味着它们实际上具有属性和方法。

Number 类型的 toString() 方法比较特殊，它有两种模式，即默认模式和基模式。
采用默认模式，toString() 方法只是用相应的字符串输出数字值（无论是整数、浮点数还是科学计数法），如下所示：

注释：在默认模式中，无论最初采用什么表示法声明数字，Number 类型的 toString() 方法返回的都是数字的十进制表示。
因此，以八进制或十六进制字面量形式声明的数字输出的都是十进制形式的。
采用 Number 类型的 toString() 方法的基模式，可以用不同的基输出数字，例如二进制的基是 2，八进制的基是 8，十六进制的基是 16。
基只是要转换成的基数的另一种加法而已，它是 toString() 方法的参数：
var iNum = 10;
alert(iNum.toString(2));//输出 "1010"
alert(iNum.toString(8));//输出 "12"
alert(iNum.toString(16));//输出 "A"
在前面的示例中，以 3 种不同的形式输出了数字 10，即二进制形式、八进制形式和十六进制形式。
HTML 采用十六进制表示每种颜色，在 HTML 中处理数字时这种功能非常有用。
注释：对数字调用 toString(10) 与调用 toString() 相同，它们返回的都是该数字的十进制形式。

引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。

HTML5的实例项目
1七巧板 -----tangram

var tangram=[
????????????{s:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"red"},
????????????{s:[{x:0,y:0},{x:400,y:400},{x:800,y:0}],color:"orange"},
????????????{s:[{x:0,y:800},{x:200,y:600},{x:400,y:800}],color:"yellow"},
????????????{s:[{x:200,y:600},{x:400,y:400},{x:600,y:600},{x:400,y:800}],color:"green"},
????????????{s:[{x:400,y:400},{x:600,y:200},{x:600,y:600}],color:"blue"},
????????????{s:[{x:600,y:200},{x:800,y:0},{x:800,y:400},{x:600,y:600}],color:"navy"},
????????????{s:[{x:400,y:800},{x:800,y:400},{x:800,y:800}],color:"purple"}
???????????????????????????????????????????????????????????????]

引用数组?----类？？？？？？？

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas style="display:block;margin:20px auto;border:2px solid #ccc" id="canvas">
</canvas>
<script>

window.onload=function(){

var canvas=document.getElementById("canvas");
canvas.width=800;
canvas.height=800;

var context=canvas.getContext("2d");

for(var i=0;i<tangram.length;i++)
{
draw(tangram[i],context);
}

function draw(piece,ctx){

ctx.beginPath();
ctx.moveTo(piece.s[0].x, piece.s[0].y);
for(var i=1;i<piece.s.length;i++)
{
ctx.lineTo(piece.s[i].x, piece.s[i].y);
}
ctx.closePath();
ctx.fillStyle= piece.color;
ctx.fill();
}

}
</script>
</body>

</html>

2
点阵生成
碰撞检测

11.8日-2017复习总结杂---今天说到ES法则与HTML5 （点阵生成碰撞检测）很好的一节

原文地址：http://www.cnblogs.com/gongwu/p/7811999.html

11.8日-2017复习总结杂---今天说到ES法则与HTML5 （点阵生成 碰撞检测）很好的一节

知识推荐

11.8日-2017复习总结杂---今天说到ES法则与HTML5 （点阵生成碰撞检测）很好的一节