大鱼吃小鱼游戏-main.js

var can1;       //定义一个canvas
var can2;       //定义另一个canvas

var ctx1;       //定义一个画布场景，用于画fish UI dust circle...
var ctx2;       //定义一个画布场景，用于画背景图、海葵、果实...

var canWidth;   //canvas的宽
var canHeight;  //canvas的高

var ane;        //海葵变量

var lastTime;   //定义结束时间    
var deltaTime;  //定义时间差

var bgPic = new Image();    //定义背景图片

var mom;

var baby;

var mousex;
var mousey;

var babyTail = [];

var babyEye = [];

var babyBody = [];

var momTail =[];
var momEye = [];

var data;

var momBodyOra = [];
var momBodyBlue = [];

var wave;

document.body.onload = game;//启动body，先运行game函数

function game()
{
    init();
    gameloop();
    lastTime = Date.now();
    deltaTime = 0;
}
// 游戏初始化，初始化canvas、背景图、海葵、果实
function init()
{
    // 获得cavas context
    can1 =document.getElementById("canvas1"); //fish UI dust circle canvas1在前
    ctx1 =can1.getContext('2d'); //获得canvas1场景

    can1.addEventListener('mousemove', onMouseMove , false);

    can2 =document.getElementById("canvas2"); //background ane  canvas2在后
    ctx2 =can2.getContext('2d');

    bgPic.src ="./src/background.jpg";

    canWidth = can1.width;
    canHeight = can1.height;

    ane = new aneObj();
    ane.init();

    fruit = new fruitObj();
    fruit.init();

    mom = new momObj();
    mom.init();

    baby = new babyObj();
    baby.init();

    mousex = canWidth * 0.5;
    mousey = canHeight * 0.5;

    for (var i = 0; i < 8; i++)
    {
        babyTail[i] = new Image();
        babyTail[i].src = "./src/babyTail" + i + ".png";
    }

    for (var i = 0; i <2 ; i++)
    {
        babyEye[i] = new Image();
        babyEye[i].src = "./src/babyEye" + i +".png";
    }

    for (var i =0; i < 20 ; i++)
    {
        babyBody[i] = new Image();
        babyBody[i].src ="./src/babyFade" + i +".png";
    }

    for (var i = 0; i < 8; i++)
    {
        momTail[i] = new Image();
        momTail[i].src = "./src/bigTail" + i +".png";
    }

    for(var i = 0; i < 2; i++)
    {
        momEye[i] = new Image();
        momEye[i].src = "./src/bigEye" + i +".png";
    }

    data = new dataObj();

    for(i = 0; i < 8; i++)
    {
        momBodyOra[i] = new Image();
        momBodyBlue[i] = new Image();
        momBodyOra[i].src = "./src/bigSwim" + i + ".png";
        momBodyBlue[i].src = "./src/bigSwimBlue" + i + ".png";
    }

    wave = new waveObj();
    wave.init();

}
//游戏循环，产生时间差值，画背景、画海葵、画果实
function gameloop()
{
    requestAnimFrame(gameloop);//根据机器性能动态计算出帧刷新时间，frame per second  相对于setIntervar setTimeout要好
    //requestAnimFrame
    //console.log("loop");
    var nowTime = 0 ;
    nowTime = Date.now();
    deltaTime = nowTime - lastTime + 1;
    lastTime = nowTime;
    //console.log(deltaTime);
    //console.log(nowTime);


    if(deltaTime > 40 ) deltaTime = 40;

    drawBackground();

    ane.draw();
    fruitMonitor();
    fruit.draw();
    ctx1.clearRect(0, 0, canWidth, canHeight);
    mom.draw();
    baby.draw();

    momFruitsCollision();
    momBodyCollision();
    data.draw();

    wave.draw();
}

function onMouseMove(e)
{
    if(!data.gameOver)
    {
        if(e.offSetX || e.layerX)
        {
            mousex = e.offSetX == undefined ? e.layerX : e.offSetX;
            mousey = e.offSetY == undefined ? e.layerY : e.offSetY;
            //console.log(mousex);
        }
    }

}