關於H5-canvas遊戲開發初談

時間 2019-11-11

標籤關於 h5 canvas 遊戲開發欄目遊戲简体版

原文原文鏈接

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

自制的一個h5小遊戲：http://www.alexpers.com/project/game/laohuji/h5.htmlweb

基本概念：canvas

視頻 -- 便是經過無數的靜態圖片組合起來，經過必定的頻率切換而組成的一種視覺動態效果框架

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

　　玩家經過鼠標點擊一個按鈕，遊戲內部邏輯會對此事件進行處理，後生成鼠標點擊這個行爲的圖片oop

　　現現在對於遊戲的頻率，最佳的體驗是在一秒60幀，這樣的頻率，可讓視覺和操做體驗上達到最佳spa

遊戲開發：設計

使用面向對象的開發模式，將遊戲中的每一個元素設計成類和對象的關係，能夠更好的開發遊戲 3d

canvas方法：code

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();
}