關於H5-canvas遊戲開發初談

阿新 • • 發佈：2019-01-19

剛剛接觸H5-canvas遊戲的開發，寫一下這段時間遊戲開發的總結

基本概念：

視訊 -- 即是通過無數的靜態圖片組合起來，通過一定的頻率切換而組成的一種視覺動態效果

遊戲 -- 同樣是無數的靜態圖片的組合，但不同的是，每一幀生成的圖片都是通過遊戲內部邏輯進行生成的，如：

　　玩家通過滑鼠點選一個按鈕，遊戲內部邏輯會對此事件進行處理，後生成滑鼠點選這個行為的圖片

　　現如今對於遊戲的頻率，最佳的體驗是在一秒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();
}

不對之處請指正

注：小瘋紙的yy

關於H5-canvas遊戲開發初談

關於H5-canvas遊戲開發初談

H5鬥地主×××開發淺談（一）

微信小遊戲開發初體驗

HTML5 canvas遊戲開發實戰 5 : 石頭剪刀布

通過遊戲學javascript系列第一節Canvas遊戲開發基礎

【遊戲開發】淺談遊戲開發中常見的設計原則

H5遊戲開發技術的發展進程

【Unity遊戲開發】淺談Unity遊戲開發中的單元測試

微信H5遊戲開發【私人定制】

h5小遊戲構建架設h5棋牌平臺開發制作

h5棋牌遊戲公眾號開發 app開發+源碼平臺搭建分享教程

最新h5牛牛平臺遊戲開發框架之架構

暴雪15年老員工談遊戲開發中經常被忽略的關鍵領域

【原創】使用HTML5+canvas+JavaScript開發的原生中國象棋遊戲及原始碼分享

H5遊戲開發：遊戲引擎入門推薦

H5遊戲開發程式碼總結

網頁HTML5--飛機大戰小遊戲開發--canvas的應用

【Canvas】HTML5遊戲開發的基本流程+P2.js物理引擎實戰開發

H5遊戲開發的架構總結(一) 客戶端

H5遊戲開發之phaser學習筆記（一）

關於H5-canvas遊戲開發初談

相關推薦