該樓層疑似違規已被系統折疊?隱藏此樓查看此樓

本次課題：制作HTML5在線五子棋對弈游戲。

預計開發周期：還沒想好看心情，先預計7天完成。

備注：最近做學校課題有關數據挖掘的，有時候搞得沒得頭緒，做個小游戲和大家分享一下，并將小程序開源到Github，歡迎下載。

接上期。傳送門：

Version:100.00,
Src:newArray("GobangLogo.png" unselectable="on" pic_type="1"/>

"),

Class:function(){

//初始化函數

this.Constructor = function(){

}

this.Draw = function(ctx){

var Img = this.Src[0];

ctx.drawImage(Img,this.Left-Img.width/2,this.Top-Img.height/2,Img.width,Img.height);

return true;

}

this.Over = function(){

var Img = this.Src[0];

var x = this.Left > 0 ? this.Left : 0-this.Left;

var y = this.Top > 0 ? this.Top : 0-this.Top;

if(x <= Img.width/2 && y <= Img.height/2)

return true;

return false;

}

}

},

{

ID:"BeginGameButton",

Version:100.00,

Src:new Array("BeginGame.png"),

Class:function(){

//初始化函數

this.Constructor = function(){

}

this.Draw = function(ctx){

var Img = this.Src[0];

ctx.drawImage(Img,this.Left-Img.width/2,this.Top-Img.height/2,Img.width,Img.height);

return true;

}

this.Over = function(){

var Img = this.Src[0];

var x = this.Left > 0 ? this.Left : 0-this.Left;

var y = this.Top > 0 ? this.Top : 0-this.Top;

if(x <= Img.width/2 && y <= Img.height/2)

return true;

return false;

}

}

}

];

按照我之前的講解，這些代碼并不是很難理解，大致都是在做一件事，分別講我們之前的兩個圖片，以中心為控制坐標點定義出來。

定義之后，我們打開我們之前所做的HTML文件，我在之前的HTML文件引用的兩個script的下面有注釋，另創建Game.js文件單獨存放游戲部分代碼，也就現在創建Game.js，并在該處引入到HTML文件，我們這里將HTML文件保存為Gobang.html。

//用于移植的控制代碼

使用代碼編輯器打開Game.js，為了開發標準化防止變量泄露，我們創建一個js的自執行函數，并對外暴露一個Gobang的游戲類名。在Game.js文件中寫入：

var Gobang;

(function(){

Gobang = function(Container){

//Gobang游戲類的構造函數

}

Gobang.fn = Gobang.prototype = {

}

})();

在構造函數中提供1個參數，用于傳遞存放Canvas畫布的容器句柄，IAnimation.js插件并不是需要我們顯式提供元素，而是提供容器，自行填充Canvas，填充的大小會自動充滿整個容器內部，這樣做的一大好處是大大方便了項目移植。

這里注意我們在編輯Gobang的類時，所有的成員變量要定義成 this.xxx，所有的成員函數應定義成 this.xxx= function(){}，成員函數的定義也可以在prototype中使用形如JSON的定義方式，但變量數據不能在該處定義。這里我們約定所有函數使用首字母大寫命名，對私有成員的標注我們在命名前增加一個下劃線區分。

接下來我們在Gobang構造器中初始化IAnimation，寫入如下代碼：

this._Animation = new IAnimation(Container); //Container是參數

我們回到Game.html頁面中提供一個Div容器，并使用CSS控制其大小，然后在用于移植的控制代碼段中實例化Gobang類，隨后我們打開瀏覽器查閱下執行效果。

給一下完整的Gobang.html代碼內容：

基于HTML5的在線小游戲制作 Power By Liuxinyumo.cn

div{

border: 1px solid red;

width: 750px;

height: 600px;

}

//用于移植的控制代碼

var Container = document.getElementById("container");

var game = new Gobang(Container);

那么現在有了游戲視窗，我們將我們第一個場景，歡迎頁面布置上。由于該景布置歸屬于游戲自身，因此我們打開Game.js在該文件中進行定義。

在使用自定義元素前我們需要先對外部資源進行選擇性的異步加載，這里是一個擴充數組，將我們所有用到的自定義元素ID進行列舉，告訴引擎哪些是本次作業需要加載的資源項。通用的寫法為：

var t = this;

function CallBack(a,b){

if(a == b){

t._DownloadFinished();

}

}

this._Animation.DownloadIMGing = CallBack; this._Animation.DownloadIMG(["GobangLogo","BeginGameButton"]);

我們需要將該代碼段單獨放到一個 Init()的函數里，同時對Gobang創建一個_DownloadFinished()函數。

_DownloadFinished()函數一旦之行到意味著我們想要加載的外部資源已經準備就緒，因此我們就可以調用自定義資源庫中的元素了，我們在初始化階段實際上是可以將游戲界面、歡迎界面一并裝在，游戲界面我們隨后設計，因此在代碼結構上留好位置。

接下來開始布局歡迎界面，單獨定義創建函數_CreateWelcomeScene()，引擎中我們使用Page來區分場景，因此首先利用引擎創建一個WelcomePage，并保存到成員函數中，將該名稱在構造器中聲明，以便日后查找。使用this._Animation.CreatePage() 即可創建一個場景，返回值賦值給我們所定義的this._WelcomePage變量。接下來我們就可以利用該變量向場景中添加自定義的元素了。

利用this._WelcomePage.AddElement("GobangLogo");即可創建Logo元素，但元素默認Visible屬性均是false，所以先對其進行位置布局，再將其設置為可視。同理，我們對BeginGame也做同樣的處理。

保存后我們運行下效果：

還算滿意，給下Game.js到目前為止的完整代碼。

var Gobang;

(function(){

Gobang = function(Container){

//Gobang游戲類的構造函數

this._Animation = new IAnimation(Container);

//成員變量聲明

this._WelcomePage = null;

this._Init();

}

Gobang.fn = Gobang.prototype = {

_Init:function(){

var t = this;

function CallBack(a,b){

if(a == b){

t._DownloadFinished();

}

}

this._Animation.DownloadIMGing = CallBack;

this._Animation.DownloadIMG(["GobangLogo","BeginGameButton"]);

},

_DownloadFinished:function(){

//此處外部資源已經全部加載完畢可以創建游戲場景。

this._CreateWelcomeScene();

//這里留有部分用于創建游戲界面

},

_CreateWelcomeScene:function(){

//創建游戲歡迎頁面

this._WelcomePage = this._Animation.CreatePage();

//在場景中布局

var Logo = this._WelcomePage.AddElement("GobangLogo");

Logo.Left(this._Animation.Width/2);

Logo.Top(this._Animation.Height/2-100);

Logo.Visible(true);

var BeginGameButton = this._WelcomePage.AddElement("BeginGameButton");

BeginGameButton.Left(this._Animation.Width/2);

BeginGameButton.Top(this._Animation.Height/2+20);

BeginGameButton.Visible(true);

}

}

})();

篇幅也已經很長了，本篇先結束。

總結

以上是生活随笔為你收集整理的php在线对弈,【图片】手把手开始制作HTML5在线五子棋对弈游戏【编程吧】_百度贴吧...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。