如何製作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); 


     } 

    }, 

現在的作品，感謝您的幫助！ :)