canvas——Game原型逻辑流程

1.获取页面canvas，并赋予一系列初始化值（变量、常量）[可选：便于多个地方使用方便，可使用this指定]；
　　　如：
　　　　　　var Game = function(){
　　　　　　　　this.canvas = document.getElementById("canvas"),
　　　　　　　　this.content = this.canvas.getContext("2d");
　　　　　　};

2.为使用方便，使用原型制作，方便调用；
　　　如：
            Game.prototype = {
                
            }
3.于页面上直接调用游戏方法,并直接在原型中添加初始化函数；
        页面：    var suchen = new Game();
                suchen.init();
        原型：    init : function(now){
                    //此处调用一系列执行函数；如：绘制，动画
                    
                },
        
4.初始化fps，便于游戏的流畅性。在初始化位置初始化fps，并在原型中添加pfs更新获取；
        初始化：    this.fps;            //用于fps频率
                this.lastTime;        //用于更新fps频率
        
        原型：    fps : function(now){
                    this.fps = 1 / (now - this.laseTime) * 1000;        //获取canvas在设备中最好的频率
                    this.lastFramTime = now;                            //用于下一次更新频率
                    return this.fps;
                }
5.于原型初始化函数中调用各种方法；
        原型：    
                init : function(){
                    suchen.animate();        //并在原型中新增 animate函数；        注意调用名为
                },
                animate : function(now){
　　　　　　　　　　　　if(!suchen.paused){　　　　//这里第六步说明
                    　　suchen.clearRectCanvas();        //首先清空画布，并在下方新增清空函数,避免绘制重叠
                    　　suchen.fps(now);        //获取最佳频率
                    　　//------------此处进行一系列的函数制作游戏
　　　　　　　　　　　　}
                    requestAnimationFrame(suchen.animate);        //执行循环本函数，用于时刻更新
                },
                clearRectCanvas : function(){
                    suchen.content.clearRect(0,0,this.canvas.width,this.canvas.height);
                },    
6.于初始化函数中新增一个this.pausedTime用于游戏的绝对暂停和再开始；
　　　　初始化：　　this.pausedTime;
　　　　　　　　　　this.paused = false;　　//true 或者 false自定  并在animate的函数中定义是否是暂停开始
　　　　原型：　　togglePaused : function(){
　　　　　　　　　　　　var now = +new Date();
　　　　　　　　　　　  this.paused = !this.paused;
　　　　　　　　　　　　if(!this.paused){
　　　　　　　　　　　　　　this.pausedTime = now;
　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　this.lastTime += (now - this.pausedTime);
　　　　　　　　　　　　}
　　　　　　　　　　},

　　

　　

 

转载于:https://www.cnblogs.com/sugege/p/7873316.html