日期:2014-05-16  浏览次数:20756 次

HTML5 推箱子游戏过关演示动画
点击下面链接可看动画:
http://www.108js.com/article/article3/zip1/exam/a.html

效果图:

代码:
 var canvas = document.getElementById("gameBox");
  var context = canvas.getContext("2d");
var imglen = 14; //需预加载的图片数量
/*游戏主对象*/
var FlGame = {
    grade : 2, //关卡
    loadImgLen : 0, //已加载的图片数量
    imgList : {},//缓存所有图像
    map : [],//地图数据
    timer : null, //计时器
    girlPos : [], //女孩的位置
    girlDirec : "down", //女孩当前的朝向(默认正面朝下)
    girlFrame : 0, //女孩动画第N帧,共两帧
    MoveTimes:0,//移动次数 
    UseTime:0,
    lastTime:0,
    msg: document.getElementById("msg"),
    setp:-1,//移动步数
    result:[],//过关答案
    init : function(){ //入口
        this.result=getSuccess(this.grade).split("");
        this.getMap(this.grade);
        this.draw();
        this.lastTime= Date.now();
        this.run();
   
    },
    getMap : function(_mapIndex){
        this.map = getMap(_mapIndex);
    },
    draw : function(){ //绘制主对象
        this.clearCanvas();
        this.drawMap();
        this.drawGirl();
        this.showMoveInfo();
    },

    // 游戏主循环
    run : function(){ //运行帧
          var now = Date.now();
          var dt = (now - this.lastTime) / 1000.0;
          this.update(dt);//更新
          this.draw();
         this.lastTime = now;
         var that = this;
        
         this.timer =  setTimeout(function(){
           that.run();
         },1000)    
    },

    // 更新游戏对象
    update: function(dt) {
     this.UseTime += dt;
     this.readText(dt);
    },

    readText:function(dt){
      var sc=this.getSetp();
      if(sc=="d"){
         this.girlPos[0]+=1;
         this.girlPos[1]+=0;
         this.girlDirec ="down";

         this.MoveTimes++;
      }
     if(sc=="u"){
         this.girlPos[0]+=-1;
         this.girlPos[1]+=0;
         this.girlDirec ="up";
         this.MoveTimes++;
      }
      if(sc=="l"){
         this.girlPos[0]+=0;
         this.girlPos[1]+=-1;
         this.girlDirec ="left";
         this.MoveTimes++;
      }
     if(sc=="r"){
         this.girlPos[0]+=0;
         this.girlPos[1]+=+1;
         this.girlDirec ="right";
         this.MoveTimes++;
      }

      if(sc=="D"){
         this.girlPos[0]+=1;
         this.girlPos[1]+=0;
         this.girlDirec ="down";
         this.MoveTimes++;
       if(this.map[this.girlPos[0]][this.girlPos[1]]==6)//人的位置是带花的花盆
            this.map[this.girlPos[0]][this.girlPos[1]] = 4;//留下花
        else
            this.map[this.girlPos[0]][this.girlPos[1]] = 3;

        if( this.map[this.girlPos[0]+1][this.girlPos[1]] ==4)
          this.map[this.girlPos[0]+1][this.girlPos[1]] = 6;
        else
            this.map[this.girlPos[0]+1][this.girlPos[1]] = 5;

      }

       if(sc=="U"){
         this.girlPos[0]+=-1;
         this.girlPos[1]+=0;
         this.girlDirec ="up";
         this.MoveTimes++;
        if(this.map[this.girlPos[0]][this.girlPos[1]]==6)//人的位置是带花的花盆
            this.map[this.girlPos[0]][this.girlPos[1]] = 4;//留下花
        else
            this.map[this.girlPos[0]][this.girlPos[1]] = 3;
        if( this.map[this.girlPos[0]-1][this.girlPos[1]] ==4)
            this.map[this.girlPos[0]-1][this.girlPos[1]] = 6;
         else
            this.map[this.girlPos[0]-1][this.girlPos[1]] = 5;
      }
        if(sc=="R"){
         this.girlPos[0]+=0;
         this.girlPos[1]+=1;
         this.girlDirec ="right";
         this.MoveTimes++;
        if(this.map[this.girlPos[0]][this.girlPos[1]]==6)//人的位置是带花的花盆
              this.map[this.girlPos[0]][this.girlPos[1]] = 4;//留下花
        else
            this.map[this.girlPos[0]][this.girlPos[1]] = 3;


         if( this.map[this.girlPos[0]][this.girlPos[1]+1] ==4)
            this.map[this.girlPos[0]][this.girlPos[1]+1] = 6;
         else
            this.map[this.girlPos[0]][this.girlPos[1]+1] = 5;

      }
      if(sc=="L"){
         this.girlPos[0]+=0;
         this.girlPos[1]+=-1;
         this.girlDirec =