剛剛接觸H5-canvas游戲的開發，寫一下這段時間游戲開發的總結
自制的一個h5小游戲：http://www.alexpers.com/project/game/laohuji/h5.html
基本概念：
視頻 -- 即是通過無數的靜態圖片組合起來，通過一定的頻率切換而組成的一種視覺動態效果
游戲 -- 同樣是無數的靜態圖片的組合，但不同的是，每一幀生成的圖片都是通過游戲內部邏輯進行生成的，如：
玩家通過鼠標點擊一個按鈕，游戲內部邏輯會對此事件進行處理，后生成鼠標點擊這個行為的圖片
現如今對於游戲的頻率，最佳的體驗是在一秒60幀，這樣的頻率，可以讓視覺和操作體驗上達到最佳
游戲開發：
使用面向對象的開發模式，將游戲中的每個元素設計成類和對象的關系，可以更好的開發游戲
canvas方法：
window.setTimeout(callback, 1000 / 60) -- 游戲幀數控制，一千毫秒刷新60次，使用setTimeout，等運行的方法結束后再計時.
isPointInPath（x,y）-- 判斷當前坐標是否在當前路徑中，x，y為目標坐標，（注：canvas使用beginPath()、closePath開啟路徑和關閉路徑，此方法判斷的時候是以最近的路徑作為區域判斷）
與html直接監聽標簽的各種事件不一樣，canvas的監聽是通過此方法結合事件監聽判斷坐標的方式確定當前坐標是否在目標區域
arc(圓心橫坐標,圓心縱坐標,半徑,起始角,結束角,方向) -- 畫圓弧路徑，畫圓的寫法arc(圓心橫坐標,圓心縱坐標,半徑,0,2*Math.PI)
rect(x, y, width, height) -- 畫矩形路徑，x,y為矩形左上角坐標
moveTo(x,y) -- 指定路徑的起始坐標
lineTo(x,y) -- 畫一條直線路徑，x,y為結束坐標，一般以上一個lineTo的結束坐標作為起始坐標，可以使用moveTo指定起始坐標
drawImage(img,sx,sy,swidth,sheight,x,y,width,height) -- 引進圖片並顯示在畫布指定位置上，需new一個image對象，
var img = new Image();
img.src="...";
img.onload = function(){
canvas.drawImage(img,x,y,width,height);
}
監聽事件：
canvas.addEventListener（1，2，3） -- 監聽畫布事件，第一個參數為事件名，第二個參數為調用方法，第三個為指定執行時機，默認false
常用事件--
canvas.addEventListener("click", function(){},false) ;監聽鼠標點擊
canvas.addEventListener("mousemove", function(){},false);監聽鼠標移動
canvas.addEventListener('keydown', function(){}, false);監聽鍵盤按鍵，需在<canvas tabindex="0">標簽上加tabindex="0"啟動，且需聚焦canvas畫布focus()
以下是通過做好的一個小游戲整理出來的簡單開發框架
先列出目錄結構
variable.js--放置全局變量
main.js--主函數運行
gameClass.js--游戲使用類
common.js--公共方法
展示簡單開發模版的代碼
game.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5-Game</title> <style> .canvas{position:absolute;left:50%;margin-left:-480px} </style> </head> <body> <div> <canvas id="bg-canvas" class="canvas" tabindex="0" width="960" height="600" style="position:absolute"></canvas> <canvas id="canvas" class="canvas" tabindex="0" width="960" height="600"></canvas> </div> <script src="js/variable.js"></script> <script src="js/main.js"></script> <script src="js/common.js"></script> <script src="js/gameClass.js"></script> </body> </html>
common.js
function getMovePosition(ev){ //返回移動坐標 if (ev.layerX || ev.layerX == 0){ moveX = ev.layerX; moveY = ev.layerY; }else if (ev.offsetX || ev.offsetX == 0) { // Opera moveX = ev.offsetX; moveY = ev.offsetY; } } function getClickPosition(ev){ //返回點擊坐標 clickChip=1; if(ev.layerX || ev.layerX == 0){ clickX = ev.layerX; clickY = ev.layerY; }else if (ev.offsetX || ev.offsetX == 0) { // Opera clickX = ev.offsetX; clickY = ev.offsetY; } } function isTrueListener(x,y){ //判斷坐標是否當前位置，返回true or false if(ctx.isPointInPath(x,y)){ return true; }else{ return false; } } function getKeyDown(e) { //返回鼠標按下的鍵值 keyDown=e.keyCode ? e.keyCode :e.which; } function requestAnimFrame(callback,element){ //游戲刷新速率 return window.setTimeout(callback, 1000 / 60); }; function getXMLHttpRequest(){ //返回適用當前環境request對象，數據交互 try{ try{ return new ActiveXobject("Microsoft.XMLHTTP"); } catch(e){ return new ActiveXobject("Msxm12.XMLHTTP"); } } catch(e){ return new XMLHttpRequest(); } }
variable.js
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var bgCanvas = document.getElementById("bg-canvas"); var bgCtx = bgCanvas.getContext("2d"); var bgImgae; var clickX; var clickY; var moveX; var moveY; var keyDown=null; var canvasWidth = canvas.offsetWidth; var canvasHeight = canvas.offsetHeight;
main.js
document.body.onload=game; //啟動游戲 function game(){ init(); //初始化元素對象 loops(); //游戲函數 } function backDraw(){ //背景，靜態元素 bgImgae = new Image(); bgImgae.src="bg.jpg"; bgImgae.onload = function(){ bgCtx.drawImage(bgImgae, 0, 0); }; } function init(){ //初始化 canvas.addEventListener("click", getClickPosition,false); //監聽鼠標點擊 canvas.addEventListener("mousemove", getMovePosition,false); //監聽鼠標移動 canvas.addEventListener('keydown', getKeyDown, false); //監聽鍵盤 //聚焦canvas畫布時觸發 canvas.focus(); backDraw(); //初始化靜態元素，執行一次 } function loops(){ //循環游戲動態元素 stop = requestAnimFrame(loops); ctx.clearRect(0,0,960,600) ctx.fillStyle="rgba(0,0,0,0.4)"; ctx.rect(0,0,canvasWidth,canvasHeight); ctx.fill(); }
不對之處請指正
個人原創，轉載請注明來源
博客：http://www.cnblogs.com/alex-web/
注：小瘋紙的yy