html5canvas游戲開發實戰
1、Canvas Debugger
在最新版本的firefox中，瀏覽器中添加了Canvas調試。 Canvas Debugger允許你跟蹤所有的canvas上下文調用， 像繪制元素和使用特定的調色器一樣，它會根據具體的要求調用顏色編碼。它不僅在開發基於WebGL的游戲時有用，它同時也可以用來測試基於Canvas 2D的游戲。
2、Shader Editor
當創建一個基於WebGL的游戲時，如果能在游戲運行時測試和修改著色器程序將是非常酷的一件事。而Shader Editor工具就可以實現這些事情。不需要重新載入界面就可以修改頂點和片段著色器，還可以查看其對輸出結果的影響。
3、Web Audio Editor
Web Audio Editor編輯器通過圖表展示了所有的音頻結點和當前AudioContext的連接，你可以通過它查看每個結點的特定屬性。Web Audio API提供了更多混音的創建，對音頻的操作和處理比HTML5的Audio標簽強大很多。
4、Network Monitor
對於HTML5手機游戲開發者來說，需要花費昂貴的代碼來對游戲進行繁瑣的測試。如果游戲是在手機設備中運行，可以使用Network Monitor直觀地看到所有的網路請求，系統耗時和類型大小等屬性。除此之外，你還可以通過Network Monitor直觀地看到游戲的性能分析。
5、Web IDE
不管是運用什麼語言進行軟體軟體，開發前都必須先確定一個開發環境，手機游戲開發也 是如此，在html5游戲開發中，可以選擇Sublime,Eclipse,Dreamweaver,vi等等，如果對，瀏覽器端的開發環境感興趣，你可 以試一下在Firefox的最新版本中上線的Web IDE。Web IDE不僅提供開發者進行正常的編碼，還可以遠程發布、調試、框架管理等。
Ⅱ 《HTML5 Canvas核心技術：圖形、動畫與游戲開發》書本源代碼，哪位大佬給一下
你可以在網上買，或者買二手的也行，便宜。
Ⅲ 如何開發一個簡單的HTML5 Canvas 小游戲
創建畫布
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);
首先我們需要創建一張畫布作為游戲的舞台。這里通過JS代碼而不是直接在HTML里寫一個<canvas>元素目的是要說明代碼創建也是很方便的。有了畫布後就可以獲得它的上下文來進行繪圖了。然後我們還設置了畫布大小，最後將其添加到頁面上。
准備圖片
// 背景圖片
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";
游戲嘛少不了圖片的，所以我們先載入一些圖片先。簡便起見，這里僅創建簡單的圖片對象，而不是專門寫一個類或者Helper來做圖片載入。bgReady這個變數用來標識圖片是否已經載入完成從而可以放心地使用了，因為如果在圖片載入未完成情況下進行繪制是會報錯的。
整個游戲中需要用到的三張圖片：背景，英雄及怪物我們都用上面的方法來處理。
游戲對象
// 游戲對象
var hero = {
speed: 256, // 每秒移動的像素
x: 0,
y: 0
};
var monster = {
x: 0,
y: 0
};
var monstersCaught = 0;
現在定義一些對象將在後面用到。我們的英雄有一個speed屬性用來控制他每秒移動多少像素。怪物游戲過程中不會移動，所以只有坐標屬性就夠了。monstersCaught則用來存儲怪物被捉住的次數。
處理用戶的輸入
// 處理按鍵
var keysDown = {};
addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);
addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);
現在開始處理用戶的輸入(對初次接觸游戲開發的前端同學來說，這部分開始可能就需要一些腦力了)。在前端開發中，一般是用戶觸發了點擊事件然後才去
執行動畫或發起非同步請求之類的，但這里我們希望游戲的邏輯能夠更加緊湊同時又要及時響應輸入。所以我們就把用戶的輸入先保存下來而不是立即響應。
為此，我們用keysDown這個對象來保存用戶按下的鍵值(keyCode)，如果按下的鍵值在這個對象里，那麼我們就做相應處理。
開始一輪游戲
// 當用戶抓住一隻怪物後開始新一輪游戲
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;
// 將新的怪物隨機放置到界面上
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};
reset方法用於開始新一輪和游戲，在這個方法里我們將英雄放回畫布中心同時將怪物放到一個隨機的地方。
更新對象
// 更新游戲對象的屬性
var update = function (modifier) {
if (38 in keysDown) { // 用戶按的是↑
hero.y -= hero.speed * modifier;
}
if (40 in keysDown) { // 用戶按的是↓
hero.y += hero.speed * modifier;
}
if (37 in keysDown) { // 用戶按的是←
hero.x -= hero.speed * modifier;
}
if (39 in keysDown) { // 用戶按的是→
hero.x += hero.speed * modifier;
}
// 英雄與怪物碰到了么？
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};
這就是游戲中用於更新畫面的update函數，會被規律地重復調用。首先它負責檢查用戶當前按住的是中方向鍵，然後將英雄往相應方向移動。
有點費腦力的或許是這個傳入的modifier 變數。你可以在main
方法里看到它的來源，但這里還是有必要詳細解釋一下。它是基於1開始且隨時間變化的一個因子。例如1秒過去了，它的值就是1，英雄的速度將會乘以1，也就
是每秒移動256像素；如果半秒鍾則它的值為0.5，英雄的速度就乘以0.5也就是說這半秒內英雄以正常速度一半的速度移動。理論上說因為這個update 方法被調用的非常快且頻繁，所以modifier的值會很小，但有了這一因子後，不管我們的代碼跑得快慢，都能夠保證英雄的移動速度是恆定的。
現在英雄的移動已經是基於用戶的輸入了，接下來該檢查移動過程中所觸發的事件了，也就是英雄與怪物相遇。這就是本游戲的勝利點，monstersCaught +1然後重新開始新一輪。
渲染物體
// 畫出所有物體
var render = function () {
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
}
if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
}
if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
}
// 計分
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32);
};
之前的工作都是枯燥的，直到你把所有東西畫出來之後。首先當然是把背景圖畫出來。然後如法炮製將英雄和怪物也畫出來。這個過程中的順序是有講究的，因為後畫的物體會覆蓋之前的物體。
這之後我們改變了一下Canvas的繪圖上下文的樣式並調用fillText來繪制文字，也就是記分板那一部分。本游戲沒有其他復雜的動畫效果和打鬥場面，繪制部分大功告成！
主循環函數
// 游戲主函數
var main = function () {
var now = Date.now();
var delta = now - then;
update(delta / 1000);
render();
then = now;
// 立即調用主函數
requestAnimationFrame(main);
};
上面的主函數控制了整個游戲的流程。先是拿到當前的時間用來計算時間差（距離上次主函數被調用時過了多少毫秒）。得到modifier後除以1000(也就是1秒中的毫秒數)再傳入update函數。最後調用render 函數並且將本次的時間保存下來。
關於游戲中循環更新畫面的討論可參見「Onslaught! Arena Case Study」。
關於循環的進一步解釋
// requestAnimationFrame 的瀏覽器兼容性處理
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
如果你不是完全理解上面的代碼也沒關系，我只是覺得拿出來解釋一下總是極好的
為了循環地調用main函數，本游戲之前用的是setInterval。但現今已經有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考慮瀏覽器兼容性。上面的墊片就是出於這樣的考慮，它是Paul Irish 博客原版的一個簡化版本。
啟動游戲！
Ⅳ 請推薦一個HTML5網頁設計實戰的網站
HTML5網頁設計實戰的網站要求有哪些。
Ⅳ 誰有html5 canvas開發詳解第二版 光碟求分享，謝謝
你可以搜索下《HTML5 Canvas游戲開發實戰》這本書看看，內容還比較詳細
Ⅵ html5 canvas 開發游戲 的sprite方法
html5 canvas開發游戲，sprite是自定義的類，動畫完全是通過js的定時器和內置的介面（不需要插件）實現的，和css3動畫不一樣，跟css sprite更是兩碼事，對canvas開發感興趣，可以關注我的【深入淺出HTML5游戲開發視頻教程】。
Ⅶ html5游戲開發，需要學習什麼技術
html5游戲開發，需要學習的技術：
1、HTML5教程
主要學習HTML標簽、屬性和事件。
2、CSS教程
主要學習使用CSS來控制網頁的樣式和布局。
3、javaScript教程
做HTML5開發，主要使用JS語言。所以要學習JS語言。
4、HTML5其它的核心技術
做HTML5開發，可能會用到下面的技術。
（1）WebWorker
可以在瀏覽器中運行多個JS腳本。可以用於需要後台執行某種耗時工作的場合。
（2）WebSocket
瀏覽器可以與伺服器間雙向通信。Socket方式能夠大大提高瀏覽器與伺服器間的通信效率。可以用於瀏覽器與伺服器間通信頻繁的場合，比如實時聊天。
(7)html5canvas游戲開發實戰擴展閱讀：
HTML5的優點：
新一代網路標准能夠讓程序通過Web瀏覽器，消費者從而能夠從包括個人電腦、筆記本電腦、智能手機或平板電腦在內的任意終端訪問相同的程序和基於雲端的信息。
HTML5允許程序通過Web瀏覽器運行，並且將視頻等目前需要插件和其它平台才能使用的多媒體內容也納入其中，這將使瀏覽器成為一種通用的平台，用戶通過瀏覽器就能完成任務。此外，消費者還可以訪問以遠程方式存儲在「雲」中的各種內容，不受位置和設備的限制。
缺點：
1、開放性帶來的困擾
在從前網路平台上存在大量的專利產品，想要實現HTML5技術的大量應用首先就需要將這些專利性的產品變為開放式的產品，由於各種原因，當前面對這一問題還存在許多爭議。
以視頻格式為例，兩大陣營對於視頻格式的設置存在爭議，一大陣營以蘋果為代表，另一大陣營則以Opera、火狐、谷歌為代表。
WPEG陣營是蘋果所屬陣營，由於其自身全部使用的是這一種格式，所以堅持認為應當將此格式作為標准，而WebM陣營則認為由於WPEG格式的專利依然沒有解除，對於HTML5技術要求的開放性沒有達標，所以不同意將其作為標准格式。
2、發展的速度有待提升
在HTML5中提出了一些從前HTML技術中不具有的新技術，但是有許多主流瀏覽器在長時間的發展過程中已經完成了此種技術的開發，在自身瀏覽器中實現了此種功能，就這一情況來說HTML5的發展速度方面存在一定的問題。
同時由於HTML5的不成熟，當前關於HTML5的相關技術標准還沒有完全確定，所以在短時間想要將其投入大規模應用還比較困難。
參考資料：網路-html5
Ⅷ 有什麼HTML5游戲開發方面的書
HTML5游戲開發書籍推薦：
一、HTML5游戲開發實戰
《html5游戲開發實戰》是一本經典的版html5游戲開發教程，它清晰而權全面地展示了如何使用最新的html5和css3標准來構建各種常見類型的游戲。
二、HTML 5游戲開發實踐指南
《html5游戲開發實踐指南》以實踐為導向，全面講解了html5游戲開發所需掌握的各種最新技術、可以使用的各種工具和框架，以及開發的思維和方法，是系統學習html5游戲開發的最佳選擇之一。
三、HTML5游戲開發
《html5游戲開發》共10 章，通過10 個具體的游戲示例詳細介紹html5 的用法。每章都先列出相關的技術特性並給出了應用的描述，然後討論了實現這個應用的關鍵需求，接著強調了滿足這些需求的html5、css 和javascript 特性或者通用編程方法，最後詳細介紹了代碼的實現。
這些是當下比較熱門的HTML5游戲開發書籍。真想把HTML5游戲開發學好，可以去千鋒了解一下。
Ⅸ html5游戲開發工具常用的有哪幾款
為大家推薦12款經常會用到的html5開發工具。
1、Adobe Dreamweaver CS6
Dreamweaver CS6是世界頂級軟體廠商Adobe推出的一套擁有可視化編輯界面，用於製作並編輯網站和移動應用程序的網頁設計軟體。由於Dreamweaver支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，對於初級人員，你可以無需編寫任何代碼就能快速創建Web頁面。其成熟的代碼編輯工具更適用於Web開發高級人員的創作！
2、Adobe Edge
Adobe Edge是一個用HTML5、CSS、Java開發動態互動內容的設計工具。它的一個重要功能是web工具包界面，用於方便確保在不同瀏覽器中架構的一致性，此外，Adobe Edge還將整合TypeKit這樣的字體服務。通過Edge設計的內容可以兼容iOS和Android設備，也可以運行在火狐、Chrome、Safari和IE9等主流瀏覽器上。
3、DevExtreme
DevExtreme Complete Subion是性能最優的HTML5,CSS和Java移動開發框架，可以直接在Visual Studio集成開發環境，構建iOS，Android，Tizen和Windows Phone 8應用程序。DevExtreme包含 PhoneJS 和 ChartJS 兩個原生UI組件，並且提供源代碼。目前，DevExtreme支持VS2010/2012/2013集成開發環境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移動平台，是Visual Studio開發人員開發跨平台移動產品的首選工具。
4、JetBrains WebStorm
WebStorm 是jetbrains公司旗下一款JS開發工具。被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaS IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。
5、Sencha Architect
在開發移動和桌面應用的工具中，Sencha的定位是HTML5可視化應用開發。開發團隊可以在一個單一集成的環境中完成應用的設計、開發和部署。開發者還可以開發Sencha Touch2和Ext JS4 Java應用，並實時預覽。
6、Initializr
Initializr 是製作 HTML5 網站最好的入門輔助開發工具，你可以使用提供的特色模板快速生成網站，也可以自定義，Initializr 會為你生成代碼簡潔的可定製的網頁模板。
7、HTML5demos
想知道你的瀏覽器是否支持 HTML5 Canvas 嗎？想知道 Safari 是否可以運行簡單的 HTML5 聊天客戶端嗎？HTML5demos 會告訴你每一個HTML5特性在哪些瀏覽器中支持。
8、HTML5 Tracker
想了解 HTML5的最新動向嗎? 使用 HTML5 Tracker 吧，它可以跟蹤 HTML5 最新修訂信息。
9、HTML5 visual cheat sheet
想要快速超找一個標簽或者屬性嗎？看看這個非常酷的速查手冊吧，每個Web開發人員的必備。
10、Switch To HTML5
Switch To HTML5 是一個基礎而實用的模板生成工具。如果你開始一個新項目，可以到這里獲取免費的 HTML5 網站模板。
11、HTML5 Test
你瀏覽器准備好迎接 HTML5 革命了嗎？HTML5 Test 將告訴你。這個網站會為你當前使用的瀏覽器生成一份對video、audio、canvas等等特性的支持情況的完整報告。
12、Lime JS
LimeJS 是一個 HTML5 游戲開發框架，用於快速構建運行於觸屏設備和桌面瀏覽器的游戲。非常棒的HTML5開發工具，一定要用用試試。