如何制作HTML5游戏障碍？

Question

我正在制作一个没有任何框架的HTML5游戏。我的球员可以向上，向下，向左和向右走，但它甚至可以穿过障碍物。我编辑了一些东西，现在它不能通过障碍物，但是当我的玩家反对它时，玩家不能回来。他被卡住了。

所有固定对象都存储在this.fixed中，所有精灵都存储在this.sprite中。的this.sprite结构是：

• 0 = X
• 1 = Y
• 2 = W
• 3 = H
• 四个和五个无所谓。

这是代码：

moveSprite:function(name, x, y, w, h, type) 
    { 
     w = typeof w !== 'undefined' ? w : this.sprite[name][2]; 
     h = typeof h !== 'undefined' ? h : this.sprite[name][3]; 
     type = typeof type !== 'undefined' ? type : 'rect'; 

     for (f in this.fixed) 
     { 
      if 
      ( 
       // X 

       /* Left */ this.sprite[this.fixed[f]][0] - 3 < this.sprite[name][0] + this.sprite[name][2] && 
       /* Right */ this.sprite[this.fixed[f]][0] + this.sprite[this.fixed[f]][2] > this.sprite[name][0] && 

       // Y 

       /* Bottom */ this.sprite[this.fixed[f]][1] < this.sprite[name][1] + this.sprite[name][3] && 
       /* Top */ this.sprite[this.fixed[f]][1] + this.sprite[this.fixed[f]][3] > this.sprite[name][1] 
      ) 
      { 
       return; 
      } 
     } 

     if(type == 'rect') 
     { 
      this.context.clearRect(this.sprite[name][0],this.sprite[name][1],this.sprite[name][2],this.sprite[name][3]); 
      this.context.fillRect(x,y,w,h); 
     } 
     else 
     { 

      var path = this.sprite[name][5]; 
      this.context.clearRect(0,0,this.canvas.width,this.canvas.height); 
      delete this.sprite[name]; 

      for (var i in this.sprite) 
      { 
       if(this.sprite[i][4] == 'rect') 
       { 
        this.context.fillRect(this.sprite[i][0],this.sprite[i][1],this.sprite[i][2],this.sprite[i][3]); 
       } 
       else if (this.sprite[i][4] == 'image') 
       { 
        this.addImage(this.sprite[i][5], this.sprite[i][0], this.sprite[i][1], this.sprite[i][2], this.sprite[i][3]); 
       } 
      } 

      this.addSprite(name, x,y,w,h,'image', path); 


     } 

    }, 

我使用的功能与来自玩家精灵的名称。

我试过了什么？

我Google'd碰撞检测，现在我有碰撞检测，但我的球员卡住了。 我也Google'd为HTML5障碍，但我没有发现任何有用的。

Answer 1

随着给出的意见，我做了这个：

moveSprite:function(name, x, y, movement, w, h, type) 
    { 
     w = typeof w !== 'undefined' ? w : this.sprite[name][2]; 
     h = typeof h !== 'undefined' ? h : this.sprite[name][3]; 
     type = typeof type !== 'undefined' ? type : 'rect'; 

     //console.log('sdf'); 
     for (f in this.fixed) 
     { 
      if (this.stuck === false) 
      { 
       if 
       ( 
        // X 

        /* Left */ this.sprite[this.fixed[f]][0] < this.sprite[name][0] + this.sprite[name][2] && 
        /* Right */ this.sprite[this.fixed[f]][0] + this.sprite[this.fixed[f]][2] > this.sprite[name][0] && 

        // Y 

        /* Bottom */ this.sprite[this.fixed[f]][1] < this.sprite[name][1] + this.sprite[name][3] && 
        /* Top */ this.sprite[this.fixed[f]][1] + this.sprite[this.fixed[f]][3] > this.sprite[name][1] 
       ) 
       { 
        this.stuck = movement; 
        return; 
       } 

      } 
      else if (this.stuck !== false && movement == this.stuck) 
      { 
       this.block = true; 
       return; 
      } 
      if (this.stuck !== false && this.block == true && movement != this.stuck) 
      { 
       this.block = false; 
       this.stuck = false; 
       movement = null; 
       console.log(1); 
      } 
     } 

     if(type == 'rect') 
     { 
      this.context.clearRect(this.sprite[name][0],this.sprite[name][1],this.sprite[name][2],this.sprite[name][3]); 
      this.context.fillRect(x,y,w,h); 
     } 
     else 
     { 

      var path = this.sprite[name][5]; 
      this.context.clearRect(0,0,this.canvas.width,this.canvas.height); 
      delete this.sprite[name]; 

      for (var i in this.sprite) 
      { 
       if(this.sprite[i][4] == 'rect') 
       { 
        this.context.fillRect(this.sprite[i][0],this.sprite[i][1],this.sprite[i][2],this.sprite[i][3]); 
       } 
       else if (this.sprite[i][4] == 'image') 
       { 
        this.addImage(this.sprite[i][5], this.sprite[i][0], this.sprite[i][1], this.sprite[i][2], this.sprite[i][3]); 
       } 
      } 

      this.addSprite(name, x,y,w,h,'image', path); 


     } 

    }, 

现在的作品，感谢您的帮助！ :)