HTML5 与 AS 语法结合，打造游戏开发新体验

一、从AS到HTML5的转变

我以前常常用AS做游戏开发，感觉很棒！不过现在HTML5火了，我就试着学学。其实HTML5跟AS有点不太一样，但我觉得如果能把AS的思想运用到HTML5里，就能更好地上手。所以，我开始试着用AS的方法理解并编写HTML5代码，结果还真挺不错。

二、开始第一个项目：显示一张图片

public var loader:Loader;  
public function loadimg():void{  
    loader = new Loader();  
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE,complete);  
    loader.load(new URLRequest("10594855.png"));  
}  
public function complete(event:Event):void{  
    var image:Bitmap = Bitmap(loader.content);  
    var bitmap:BitmapData = image.bitmapData;  
    addChild(image);  
}

我首次接触的项目就是在HTML5里放张图。我们平常做AS都是用BitmapData和Bitmap，所以我就想找个跟它差不多的方法。然后，我开始琢磨怎么用JavaScript搞定这个事。开始有点儿头大，不过随着蛮干，我发现只要把AS的思维带到HTML5上，好多事情其实就简单了。

window.onload = function(){    
    var canvas = document.getElementById("myCanvas");    
    var context = canvas.getContext("2d");    
     
    image = new Image();    
    image.onload = function(){    
        context.drawImage(image, 0, 0, 240, 240);    
    };    
    image.src = "10594855.png";  
};

三、代码对比：AS与HTML5

首先，我得把AS跟HTML5的代码弄明白。看起来，AS要用BitmapData加Bitmap才能展示图片，但到了HTML5就不用那么麻烦了，用Canvas和Image就能搞定。然后我想着能不能把AS的代码搞成HTML5那种样子。这不试不知道，一试还真行，感觉好多AS里的东西都能用在HTML5上，像什么事件处理，对象管理之类的。

var loader;  
function main(){  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("10594855.png","bitmapData");  
}  
function loadBitmapdata(event){  
    var bitmapdata = new LBitmapData(loader.content);  
    var bitmap = new LBitmap(bitmapdata);  
    addChild(bitmap);  
}

四、编写自定义JS类库：legend库

var LGlobal = function (){}  
LGlobal.type = "LGlobal";

为了用得顺手，我做了个叫legend库的JavaScript类库。它能模拟ActionScript的一些功能，像是BitmapData啊Bitmap那种用得上的。然后我就写出来两个新类LBitmapData和LBitmap，这俩是用来看图存图的。这样的话，我在HTML5里面弄图片就方便多了。

五、LBitmapData类的设计与实现

LGlobal.canvas = null;  
LGlobal.width = 0;  
LGlobal.height = 0;  
LGlobal.setCanvas = function (id,width,height){  
    var canvasObj = document.getElementById(id);  
    if(width)canvasObj.width = width;  
    if(height)canvasObj.height = height;  
    LGlobal.width = canvasObj.width;  
    LGlobal.height = canvasObj.height;  
    LGlobal.canvas = canvasObj.getContext("2d");  
}

这个LBitmapData就是用来装图片数据滴，就像咱们用HTML5里的Image对象那样。在这儿，我还写了些办法，可以把图像数据给载进来，还能处理一下。这样，我就能更加方便地掌控图片资源！就这样，处理HTML5中的图片，我会变得更有速儿

六、LBitmap类的设计与实现

LGlobal.onShow = function (){  
    if(LGlobal.canvas == null)return;  
    LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);  
}

LBitmap就是搞定图片展示的那帮子人。我用HTML5里那叫Canvas的家伙实现的。这货里面有各种方法画图，用起来特别顺手，能大大提高我在HTML5中展示图片的效率。

七、LEvent类的设计与实现

为了搞定这些事，我想到了搞个LEvent类出来，就像在那个AS里似的那样能处理事儿。然后我就动手开始弄这个LEvent类了，它能处理各种各样的事情，比如你点下鼠标，网页加载啦啥的。这样的话，我就能在HTML5里面轻松应对各种事件！

八、addChild方法的设计与实现

var LGlobal = function (){}  
LGlobal.type = "LGlobal";  
LGlobal.canvas = null;  
LGlobal.width = 0;  
LGlobal.height = 0;  
LGlobal.childList = new Array();  
LGlobal.setCanvas = function (id,width,height){  
    var canvasObj = document.getElementById(id);  
    if(width)canvasObj.width = width;  
    if(height)canvasObj.height = height;  
    LGlobal.width = canvasObj.width;  
    LGlobal.height = canvasObj.height;  
    LGlobal.canvas = canvasObj.getContext("2d");  
}   
LGlobal.onShow = function (){  
    if(LGlobal.canvas == null)return;  
    LGlobal.canvas.clearRect(0,0,LGlobal.width,LGlobal.height);  
    LGlobal.show(LGlobal.childList);  
}  
LGlobal.show = function(showlist){  
    var key;  
    for(key in showlist){  
        if(showlist[key].show){  
            showlist[key].show();  
        }  
    }  
}

我要搞个类似AS里的addChild功能来简化管理显示对象，首先得搞定addChild这个方法。用了它之后，我能更轻松地管理各种显示对象。这样处理起来就更加省时省力！

九、页面加载完成后显示图片

终于搞定！那个页面装载完之后我就开始搞图片了，用的是那个LBitmap类里的show方法，画面出来得挺快的哎~在HTML5里面放个图片啥的，现在轻轻松松就能解决了。

function LBitmapData(image,x,y,width,height){  
    var self = this;  
    self.type = "LBitmapData";  
    self.oncomplete = null;  
    if(image){  
        self.image = image;  
        self.x = (x==null?0:x);    
        self.y = (y==null?0:y);    
        self.width = (width==null?self.image.width:width);    
        self.height = (height==null?self.image.height:height);  
    }else{  
        self.x = 0;    
        self.y = 0;    
        self.width = 0;    
        self.height = 0;  
        self.image = new Image();  
    }  
}

十、总结与展望

这回试了下，觉得用AS的思维来写HTML5超顺手！以后还要多研究怎么这么用，说不定能走出个新天地呢～

function LBitmap(bitmapdata){  
    var self = this;  
    self.type = "LBitmap";  
    self.x = 0;    
    self.y = 0;    
    self.width = 0;    
    self.height = 0;    
    self.scaleX=1;  
    self.scaleY=1;  
    self.visible=true;  
    self.bitmapData = bitmapdata;   
    if(self.bitmapData){  
        self.width = self.bitmapData.width;  
        self.height = self.bitmapData.height;  
    }  
}

最后，我要问问你們哦：你們试過用其他程式語言的思考方式來寫HTML5的代碼嗎？歡迎在留言區分享下你們的經驗跟想法

LBitmap.prototype = {  
    show:function (){  
        var self = this;  
        if(!self.visible)return;  
        LGlobal.canvas.drawImage(self.bitmapData.image,  
                self.bitmapData.x,self.bitmapData.y,self.bitmapData.width,self.bitmapData.height,  
                self.x,self.y,self.width*self.scaleX,self.height*self.scaleY);  
    }  
}