基于jQuery制作自己的web游戏引擎

平时我们开发web游戏时从来没有一款游戏引擎来帮助自己开发，所以，该怎么开发一款web游戏引擎呢?项目地址
开发第一步编写obj部分:
一个游戏其实就是由许多game object组成的，因此，obj.js文件是必不可少的。
首先编写role函数，以创建对象:

var role = function (image,width,height,x,y,angle,name,pos) {
    // console.log("new role...");
    var obj = {};
    obj.name = name;
    obj.width = width;
    obj.height = height;
    obj.image = image;
    obj.x = x;
    obj.y = y;
    obj.angle = angle;
    obj.copyNum = 0;
    obj.textColor = "#fff";
    obj.textSize = "20px";
    obj.textWeight = "bold";
    obj.textAlign = "center";
}

然后需要将obj这个对象创建至UI界面。就需要jQuery了，添加代码:

$("#" + pos).html($("#" + pos).html() + "<div id=\"" + obj.name + "\"></div>");

然后但是这样网页上只有一个空的div呀，然后该怎么刷新页面上div的css属性呢，我们为obj定义一个成员函数update():

obj.update = function () {
        $("#" + this.name).css({
                "display": "block",
                "background-image": "url(" + this.image + ")",
                "position": "absolute",
                "top": this.y + "px",
                "left": this.x + "px",
                "width": this.width,
                "height": this.height,
                "transform": "rotate(" + this.angle + "deg)",
                "color": this.textColor,
                "font-size": this.textSize,
                "font-weight": this.textWeight,
                "text-align": this.textAlign
            }
        );
        return obj;
    };

这么一来，我们就可以开心地在页面上创建游戏对象了！
可是，我们无法控制对象的样式呀，如果需要改变它呢？我们需定义一个change()的成员函数:

obj.change = function (newImage,newWidth,newHeight,angle,speed){
        this.image = newImage;
        this.width = newWidth;
        this.height = newHeight;

        $("#" + this.name).css({
            "transform": "rotate(" + (0 - this.angle) + "deg)"
        });

        this.angle = angle;
        this.define("speed",speed);
        this.update();
    };

有时，我们还会想要在界面上呈现出文字，就需要有可以操作game object文字的接口函数

obj.setText = function (text,color,size,weight,anlign){
        this.textColor = color;
        this.textSize = size;
        this.textWeight = weight;
        this.textAlign = anlign;
        $("#" + this.name).html(text);
        this.update();
    };

写游戏时经常会遇到这种情况，定义的游戏对象需要携带一些自定义属性，可又无法添加属性，所以还需要define()成员函数以让game object携带自定义属性

obj.define = function (att,val){
        this[att] = val;
    };

能携带以后还需要获取，所以，还需为obj添加get()函数：

obj.get = function (attName){
        return this[attName];
    };

诸如“飞机大战”、“坦克大战”等游戏，运行游戏时需要大量、相同的game object，使用引擎时不是还需要自己编写克隆函数吗？我们可以为game objcet添加一个copy函数，并将子节点添加至game object的children属性。

首先为game object添加children属性：

obj.children = [];

然后编写copy()函数：

obj.copy = function (){
        var newObj = this;
        newObj.name = this.name + this.copyNum;
        $("#" + pos).html($("#" + pos).html() + "<div id=\"" + newObj.name + "\"></div>");
        newObj.update();
        this.children.push(newObj);
        gameObjs.push(newObj);
        this.copyNum++;
        return newObj;
    };

然后，如果游戏需要删除某个游戏对象，就需要为它编写delete()函数

obj.delete = function (){
        this.width = null;
        this.height = null;
        this.image = null;
        this.x = null;
        this.y = null;
        this.angle = null;
        this.copyNum = null;
        this.textColor = null;
        this.textSize = null;
        this.textWeight = null;
        this.textAlign = null;

        $("#" + this.name).remove();
        this.name = null;
    };

这时，基本上游戏对象所有的属性都为null了，这相当于删除了其。并且当游戏对象在程序中要再次使用时只需再次为其设置游戏属性即可。

有时，写游戏时会遇到这种情况：一个游戏对象被背景盖住了，我们需要为其设置css的z-index属性，可以为其设置函数:

obj.updatePos = function () {
        $("#" + this.name).css({
            "z-index": this.get("pos-z"),
        });
    };

然后为其define一个"pos-z"属性

obj.addPosZ = function () {
        this.define("pos-z",gameObjs.length);
    };

再提供一个设置z-index的接口：

    obj.setPosZ = function (z) {
        this.define("pos-z",z);
        this.updatePos();
    };

接下来是移动可以首先编写move()函数:

obj.move = function (x,y){
        // 设置位置
        this.x = x;
        this.y = y;
        // 刷新UI界面
        this.update();
    };

然后利用三角函数为其设置run()函数：

obj.run = function (angle) {
        var x = $("#" + this.name).offset().left;
        var y = $("#" + this.name).offset().top;
        x += Math.cos(angle / 180 * Math.PI) * this.get("speed");
        y += Math.sin(angle / 180 * Math.PI) * this.get("speed");
        this.move(x,y);
        this.update();
    };

其中，这又涉及了一个自定义属性"speed",我们需要编写函数专门为其添加移动函数所需的属性：

obj.addMove = function () {
        this.define("speed",10);
    };
    obj.setMove = function (speed) {
        this.define("speed",speed);
    };

然后，为了方便以后编写，我们定义一个全局数组gameObjs[]:

var gameObjs = [];

再将game object加入gameObjs中：

gameObjs.push(obj);

最终update()一遍UI界面：

obj.update();

obj部分[完]