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


        }

    },

我使用带有播放器精灵名称的函数。

我尝试了什么？

我谷歌会进行碰撞检测，现在我有碰撞检测，但我的播放器卡住了。我也谷歌为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);


        }

    },

现在它有效，谢谢你的帮助！：）

如何制作HTML5游戏障碍？

1 个答案: