Как сделать препятствия для игры на HTML5?

Question

Я делаю игру HTML5 без каких-либо фреймворков. Мой игрок может идти вверх, вниз, влево и вправо, но он может даже пройти через препятствия. Я отредактировал некоторые вещи, и теперь он не может преодолеть препятствия, но когда мой игрок идет против него, игрок не может вернуться. Он застревает.

Все фиксированные объекты хранятся в this.fixed, и все спрайты хранятся в this.sprite. Структура this.sprite является:

• 0 = х
• 1 = у
• 2 = ш
• 3 =
ч
• Четыре и пять не имеет значения.

Это код:

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); 


     } 

    }, 

Я использую функцию с именем от игрока спрайта.

Что я пробовал?

I 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); 


     } 

    }, 

Сейчас он работает, спасибо за вашу помощь! :)