h5游戏之js图形封装使用02

希望最终形成这么个效果，index.html和类库js都不用该了，主要代码都在startGame.js里面了。

/*如果平稳的动态的显示动画呢？
说到底本质就是 隔多长时间显示静态图片再消除原来的图片，
也就是说隔多少时间刷新（循环）函数。
一般1秒60帧（次），动画看上去已经很流畅了。那1帧多少时间呢，就是1秒/60，也就1000(毫秒)/60；
所以这个函数一定都看到过setInterval(function() {  // 做某些动画任务}, 1000/60);
function()就是你要做的画图，数据增增减减之类的。
然后在游戏方面用requestAnimationFrame() 比setInterval()要好，所以下面学习用equestAnimationFrame函数
var main = function () {
    var now = Date.now();

    var delta = now - then;
    //console.log(delta);
    update(delta / 1000);
    render();

    then = now;

    // Request to do this again ASAP
    requestAnimationFrame(main);
};
requestAnimationFrame的描述这样一句： 不需要使用者指定循环时间间隔，那假设我需要一个物体移动到一个位置，固定用1秒的时间，该怎么做呢，下次研究
*/

var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=512;
canvas.height=480;
document.body.appendChild(canvas);
var yx;;
var speed;
var w = window;
const raf = window.requestAnimationFrame//这么做是适应这种浏览器
  || window.webkitRequestAnimationFrame
  || window.mozRequestAnimationFrame
  || window.oRequestAnimationFrame
  || window.msRequestAnimationFrame
  || function(callback) {
    window.setTimeout(callback, 1000 / 60); //每帧1000/60ms
  };

function initGame(){

      yx=new Yuanxing(100,100,30,"rgb(0,255,0)");
      yx.draw(); 
      speed=1;
      //alert(requestAnimationFrame);
    main();
}

function update(modifier){//更新数据,这个参数modifier，作为调试速度用的，当然简单的也可以不用

    if(yx.sx<=300){
        yx.sx+=speed*modifier;

    }else{
        yx.sx=100;
    }

}
function render(){//渲染画图
    ctx.clearRect(0,0,canvas.width,canvas.height);
        yx.draw(); 


}
function main(){//住循环函数
    update(20/6);
    render();
    raf (main);

}

我的主要循环函数就是main函数了，main函数写好后在，initGame()中启动了。然后main()中按照1000/60的时间间隔循环调用里面的update()和render()函数，当然这里把render()放到update()函数里也是可以的。

最后这里解释一下1秒的移动时间。 update(20/6)这个参数20/6怎么来的.在update中
yx.sx+=speed*modifier;
ys.sx的值是每一帧增加speed*modifier像素的距离，而;speed=1,就是说求modifier的值。
也就是说每一帧(1000/60毫秒)增加modifier个像素的距离。
我的要求是1秒(1000毫秒)内。x=100到x=300增加200像素的距离。
那么modifier好计算了((1000/60)*200)/1000=20/6
。
下章封装一个四边形。应该很简单了，四边形里面有一桶二筒三筒类似牌一样的圆图案。