如何使HTML5游戏成为障碍？

Question

I'm making a HTML5 game without any frameworks. My player can go up, down, left and right, but it can even walk through obstacles. I edited some things and now it can't get through obstacles, but when my player walks against it, the player can't get back. He gets stuck.

All fixed objects are stored in this.fixed and all sprites are stored in this.sprite . Structure of this.sprite is:

• 0 = x
• 1 = y
• 2 = w
• 3 = h
• Four and five doesn't matter.

This is the code:

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 use the function with the name from the player sprite.

What did I tried?

I Google'd for collision detection, now I have collision detection, but my player gets stuck. I also Google'd for HTML5 obstacles but I didn't found anything useful about that.

Answer 1

With the comments given, I made this:

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


        }

    },

Now it works, thanks for your help! :)