在閱讀一本html5遊戲開發相關書籍時發現乙個很好的例子，通過這個例子可以對物件導向的開發進行更深入的理解。這個物件要實現的是：將乙個css sprite中的影象繪製到canvas中。首先建立乙個spritesheet物件，**如下：
var spritesheet = new function();
this.load = function(spritedata,callback);
this.draw = function(ctx,sprite,x,y,frame);
ctx.drawimage(this.image, s.sx+frame*s.w, s.sy, s.w, s.h, x, y, s.w, s.h);
};}首先使用了new function(){}，保證了只會有乙個例項被建立。
接下來物件內部，通過this為其繫結了兩個方法和乙個屬性。load方法起到載入image的作用，傳遞兩個引數，第乙個引數是影象資訊，即要繪製的影象在sprite中的位置大小以及在畫布上的位置大小。注意callback的用法，這裡面的this.image.onload = callbak;當影象載入完成後執行傳入的**函式。
draw方法用來進行影象的繪製，傳入canvas的上下文環境，需要繪製的影象物件資訊以及影象位置。
這個物件的邏輯構造相對複雜，基本的思路就是自定義load方法，通過load方法完成影象資訊的載入。這裡的影象資訊指的是影象在sprite中的位置、大小等。
使用該物件的方法**如下：
function startgame()
},function());
}這裡使用load方法，首先傳入所需切圖部分的相關資料，接下來在**函式中呼叫物件的draw方法進行影象繪製。
html5遊戲開發
一 前言 本次教程將向大家講解如何用html5將小地圖塊拼成大地圖，以及如何用現有的高階html5遊戲開發庫件lufylegend.js開發遊戲。首先讓我們來了解了解如何用html5實現動畫，畢竟 動靜結合 是先有動再有靜。看了上一章的內容，或許你就有了對html5實現動畫有了初步了解 二 html...
Html5 移動遊戲開發
有很多遊戲採用h5技術開發，比如三國來了 巴哈姆特之怒 切繩子等。我們公司也有多款遊戲用h5開發，h5開發成本低，效率高，方便做自動更新，可移植性好。受益於h5技術，我們公司的很多產品都很方便跨平台。早在2012年，我就很榮幸負責技術攻關，把我們的遊戲移植到win8和wp8平台，當時在國內的win8...
《HTML5完美遊戲開發》 導讀
本書的作者都是real wold game開發者，他們將與我們一起分享專業的開發經驗與技巧。前言 第1章 open web game王國 1.1 open web game簡介 1.2 為什麼要關注open web game 第2章 化繁為簡 2.1 自我介紹 2.2 a到b遊戲 2.3 簡化原則 ...