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 ="left";
         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;

      }

   },
   getSetp:function(){
      this.setp++;
     if(this.setp==this.result.length) {
         return 0;
     }
     return this.result[this.setp];
   },
   drawMap : function(){
        var mapBg = context.createPattern(this.imgList.map_bg,"repeat");
        context.save();
        context.fillStyle = mapBg;
        context.fillRect(0,0,667,519);
        context.restore();
        for(var i=0;i 
 
 
 
全部代码请下载。 
 
热情奉献： 
 HTML5 Canvas绘图与动画学习59例源码 
 
 http://www.108js.com/example.html 
 
 
  
 
   
exam.rar (68.6 KB)
 
   
下载次数: 11
 
  
 
  
 
   
 
   
大小: 101.9 KB
 
  
 
  
 
   
查看图片附件