向量在HTML5游戏开发中的应用

**CSS/位图的屏幕坐标系统，即左上角为原点、x轴沿右侧增加、y轴沿下方增加（亦称做笛卡尔坐标系）

向量运算 

 把一些有用的运算应用于向量

加法和减法

通过加减向量的x、y坐标来实现向量的相加或相减。一个向量和自己相加可以使它的长度扩大两倍，一个向量减掉它自己会得到零向量。

  如：1.给飞行的皮球加一个重力向量，让它真实地下落

         2.把两个碰撞物体的向量加在一起，计算逼真的碰撞反馈

         3.给宇宙飞创增加一个火箭推理的向量，让飞船移动

缩放

按照一定比例缩放向量x、y坐标，就可以缩小或放大向量的长度。一些实例如下：

- 反复以略小于1的向量缩放移动向量，让对应物体缓慢地停下来

- 将大炮方向向量扩大，作为一个发射炮弹的初始向量

标准化

有时候需将一个向量变为单位长度，或者说将向量长度变为一个单位。这个过程叫做标准化，单位长度的向量叫做单位向量。当感兴趣的是响亮的方向而不是长度时。单位向量可以表示为：

1.定向喷射的方向

2.斜坡的倾斜方向

3.大炮的发射方向

一旦有了单位向量，可以作为其缩放，使其代表喷射推理或者炮弹的初始化速度

旋转

以任意角度来旋转一个向量非常有用，因为这样可以指向任何一个你想要的方向。实例包括：

1.是一个对象始终指向另一个

2.更改一个虚拟的喷射引擎的推理方向

3.根据发射器的方向改变投射体的初始发射方向

在JavaScript中，角是以弧度（radius）为单位，而不是熟悉的角度（degree）指向的。因为弧度不是很直观，可以利用JavaScript中的函数很容易将弧度和角度进行转化。

//角度转为弧度

degToRad = function(deg){

   return deg*(Math.PI/180);

}

//弧度转为角度

radToDeg = function(rad){

    return rad*(Math.PI/180);

}

向量的点乘

单位向量的点乘给出两个向量之间角度的余弦，或者说单位向量点乘告诉我们两个向量的方向相近程度。点乘的结果在-1到1之间变化。这是一个些特殊点乘含义的例子：

1.向量的方向相同：点积=1

2.向量的夹角为45°：点积=0.5

3.向量的夹角90°：点积=0

4.向量的夹角为180°：点积=-1

点乘可以知道连个物体面向对方的程度。比如：游戏中，可以根据点乘判断两个角色是否可以“看到”对方，或者某形状的某一边是否指向某个方向

创建一个JavaScript向量对象

向量的x和y分量在对象中被称做为vx和vy。

    var vector2d = function(x,y){
        /*向量部分代码*/
        var vec = {
            //把x、y保存在对象vx、vy中
            vx:x,
            vy:y,

            //scale方法可以让我们来放大或缩小向量
            scale:function(scale){
                vec.vx *= scale;
                vec.vy *= scale;
            },
            //向量的加法运算
            add:function(vec2){
                vec.vx += vec.vx;
                vec.vy += vec.vy;
            },
            //向量的减法运算
            sub:function(vec2){
                vec.vx -= vec2.vx;
                vec.vy -= vec2.vy;
            },
            //方向取反
            negate:function(){
                vec.vx = -vec.vx;
                vec.vy = -vec.vy;
            },
            //获取向量长度
            length:function(){
                return Math.sqrt(vec.vx*vec.vx+vec.vy*vec.vy);
            },
            //获取向量长度的平方
            lengthSquared:function(){
                return vec.vx*vec.vx+vec.vy*vec.vy;
            },
            //将向量转化为一个单位向量
            normalize:function(){
                var len = Math.sqrt(vec.vx*vec.vx+vec.vy*vec.vy);
                if(len){
                    vec.vx /= len;
                    vec.vy /= len;
                }
                //把向量的长度返回
                return len;
            },
            //向量的旋转
            rotate:function(angle){
                var vx = vec.vx,
                        vy=vec.vy,
                        cosVal =Math.cos(angle),
                        sinVal =Math.sin(angle);
                vec.vx= vx*cosVal-vy*sinVal;
                vec.vy= vx*sinVal-vy*cosVal;
            },
            //toString方法可以把向量以文本方式输出，方便程序调用
            toString:function(){
                return '('+vec.vx.toFixed(3)+','+vec.vy.toFixed(3)+')'
            }
        };
        return vec;
    }