HTML5遊戲開發技術基礎整理，html5遊戲開發整理

HTML5遊戲開發技術基礎整理，html5遊戲開發整理

隨著HTML5標準最終敲定，HTML5將有望成為遊戲開發領域的的熱門平台。HTML5遊戲能夠運行於包括iPhone系列和iPad系列在內的電腦、智能手機以及平板電腦上，是目前跨平台應用開發的最佳實施方案。本文系根據[HML5 Canvas遊戲開發實戰]一書中的內容整理而成，是瞭解和學習HTML5遊戲開發的基礎內容，希望能夠協助到那些和博主一樣致力於遊戲開發的朋友們！

JavaScript中的物件導向編程

對於遊戲開發來說，物件導向編程(OOP)是一種重要而且必要的方法，所以在瞭解HTML5遊戲開發前，首先應該瞭解JavaScript中的物件導向編程。JavaScript是一種基於對象的語言，可它並不是一種真正的物件導向的程式設計語言，因為在JavaScript的文法中不存在類(Class)的概念。下面我們將分析和解決在JavaScript中實現封裝、繼承等物件導向的問題。

在JavaScript中函數(function)就是就是一個類(class)

//聲明一個函數function MyClass(){}//執行個體化一個對象var cls1 = new MyClass();

使用this關鍵字就可以為類增加屬性

//聲明一個類並定義其建構函式function MyClass(name,age){    this.name = name;    this.age  = age;};//執行個體化一個對象var cls1 = new MyClass("張三",20)//輸出cls1的兩個屬性值alert("name=" + cls1.name + "&" + cls1.age)

使用prototype屬性可以為類添加方法

//聲明一個類並定義其建構函式function MyClass(name,age){    this.name = name;    this.age  = age;};//為MyClass增加方法MyClass.prototype={    toString:function()    {        alert("name=" + this.name + "&" + this.age)    },    getName:function()    {        alert("name=" + this.name)    },    getAge:function()    {        alert("age=" + this.age)    }};

使用apply方法實現屬性和方法的繼承

//定義一個父類Peoplefunction People(){    this.type="人"};//為父類定義一個方法People.prototype={    getType:function()    {        alert("type=" + this.type)    }};//定義一個子類Studentfunction Student(name,age,sex){   //繼承父類的屬性type   People.apply(this,arguments);   this.name = name;   this.age = age;   this.sex = sex;};//聲明一個Student執行個體var stu = new Student("張三",20,"男")；//輸出typealert(stu.type)//下面我們來瞭解下如何繼承父類的方法，繼承父類方法主要通過迴圈使用父物件的prototype進行複製來實現，如//重新定義子類Studentfunction Student(name,age,sex){    //繼承父類的屬性type   People.apply(this,arguments);   //繼承父類的方法，略顯抽象   var prop;   for(prop in People.prototype)   {        var proto = this.constructor.prototype;        if(!proto[prop])        {            proto[prop] = People.prototype[prop];        }        proto[prop]["super"] = People.prototype;   }   //屬性定義   this.name = name;   this.age = age;   this.sex = sex;};//執行個體化Student對象var stu = new Student("張三",20,"男");stu.getType();

靜態類的實現

function staticClass(){    staticClass.name = "張三";    staticClass.toString=function    {        alert("name=" + staticClass.name )    };};alert(staticClass.name);staticClass.toString();

Canvas繪圖基礎

HTML5提供了映像、視頻、音頻、表單、位置、本機資料庫、離線儲存、websocket等各種全新的特性，對於HTML遊戲開發而言，我們主要關注映像、音頻、本機資料庫以及websocket等，首先我們來瞭解下Canavs繪圖的基礎內容。

Canvas是HTML5為我們提供的一張畫布，可以讓我們在HTML上直接繪製圖形，因此Canvas可以作為HTML5遊戲開發的基本元素，即HTML5遊戲引擎的底層都是以Canvas元素來驅動的。Canvas本身沒有繪圖的能力，需要藉助於JavaScript來實現繪圖的功能。使用Canvas元素只需要在網頁中添加canvas標記即可，如

<canvas id="myCanavs" width="800" height="480"></canvas>

接下來我們通過JavaScript來擷取這個Canvas並通過相關API實現繪圖環境的初始化

//擷取Canvas元素var canvas = document.getElementById('myCanvas');//檢查canvas合法性if(canvas && canvas.getContext){    //擷取當前上下文    var ctx = canvas.getContext('2d')    }

因為目前Canvas只支援2D繪圖，因此，這裡的參數暫時只能為2d。因為Cnavas繪圖的API都封裝在ctx這個執行個體中，因此下面的所有操作都是基於ctx來實現的：

使用Canvas繪製線

//設定線寬ctx.lineWidth = 10;//設定畫筆顏色ctx.strokeStyle = "red";//建立一個路徑ctx.beginPath();//路徑起點ctx.moveTo(10,10);//路徑終點ctx.lineTo(150,50);//繪製路徑ctx.stroke();

使用Cnavas繪製矩形

//設定線寬ctx.lineWidth=5;//設定畫筆顏色ctx.strokeStyle-"red"//建立路徑ctx.beginPath();//繪製矩形ctx.strokeRect(10,10,70,40);

或者

//定義矩形ctx.rect(10,10,70,40);//繪製矩形ctx.stroke();

如果需要對矩形進行填充

//建立路徑ctx.beginPath()//繪製矩形ctx.fillRect(10,10,70,40)

使用Canvas繪製圓

//建立路徑ctx.beginPath();//定義圓ctx.arc(100,100,50,0,360*Math.PI/180,true);//繪製圓ctx.stroke();

同樣地，可以使用fill進行填充繪製

//建立路徑ctx.beginPath();//定義圓ctx.arc(100,100,50,0,360*Math.PI/180,true);//繪製圓ctx.fill();

使用Canvas繪製圓角矩形

繪製圓角矩形需要arcTo函數配合lineTo來完成

//建立路徑ctx.beginPath();ctx.moveTo(40,20);ctx.lineTo(100,20);ctx.arcTo(100,20,120,40,20);ctx.lineTo(120,70);ctx.arcTo(120,90,100,90,20);ctx.lineTo(40,90);ctx.arcTo(20,90,100,70,20);ctx.lineTo(20,40);ctx.arcTo(20,20,40,20,20);//繪製圓角矩形ctx.stroke();

使用Canvas繪製複雜圖形

在HTML5中可以通過quadraticCurveTo函數繪製二次方貝茲曲線，通過bezierCurveTo函數繪製三次貝茲路徑,具體代碼請參考API文檔。

使用Canvas繪製文字

//設定字型ctx.font="30px Arial";//繪製文字ctx.strokeText("Hello HTML5",100,50);

使用Canvas繪製圖片

繪製圖片使用drawImage函數，其函數原型如下：

drawImage(image,dx,dy);

其中image可以是HTML中的標籤或者是JavaScript中的Image對象。如

//定義一個img標籤<img id="img_source" src="source.jpg" width="240" height="240"/>

接下來通過getElementById來取得映像資料，並將其繪製出來

var img=document.getElementById("img_source");ctx.draw(img,200,200);

如果直接使用JavaScript代碼

var img=new Image();img.src="source.jpg";ctx.draw(img,200,200)

圖形的平移操作

使用translate函數實現在水平和垂直方向上的平移

圖形的旋轉操作

使用rotate函數實現旋轉，需要注意的是傳入的參數是弧度

圖形的伸縮操作

使用scale函數實現伸縮，當參數為負值時表示在該方向上翻轉

圖形進階特效

這裡主要介紹線性漸層、放射狀漸層、顏色反轉、灰階。

線性漸層

//建立一個線性漸層容器var grd=ctx.createLinearGradient(0,0,200,0);//添加顏色grd.addColorStop(0.2,"#00ff00");grd.addColorStop(0.8,"#ff0000");//應用漸層ctx.fillStyle=grd;

放射狀漸層

//建立一個放射狀漸層容器var grd=ctx.createRadialGradient(100,100,10,100,100,50);//添加顏色grd.addColorStop(0,"#00ff00");grd.addColorStop(,"#ff0000");//應用漸層ctx.fillStyle=grd;

顏色反轉

遍曆每個像素並對RGB值進行取反

灰階

灰階計算公式：gary=red*0.3+green*0.59+blue*0.11

基礎的內容就是這些了，以後如果碰到需要HTML5的地方可以回過頭來看看。