关于H5-canvas游戏开发初谈

刚刚接触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

posted @ 2016-02-25 14:25 小疯纸的yy 阅读(5237) 评论(1) 编辑收藏举报

刷新页面返回顶部

小疯纸的yy

关于H5-canvas游戏开发初谈

公告