使一个矩形从画布墙上弹开

时间:2016-04-12 04:27:38

标签: javascript html5 object canvas

我需要的是让这个物体在画布顶部左右移动。目前它产生并且行进得非常好,然后一旦到达画布的右边缘就会停止。

//mainEnemy Variables
        var mainEnemy_x = 10;
        var mainEnemy_y = 10;
        var mainEnemyHeight = 50;
        var mainEnemyWidth = 25;
        var mainEnemyRight = true;
        var mainEnemyLeft = false;
        var mainEnemy_dx = 2;

//Drawing the Main Enemy
    function drawMainEnemy()
    {
        ctx.beginPath();
        ctx.rect(mainEnemy_x, mainEnemy_y, mainEnemyHeight, mainEnemyWidth);
        ctx.fillStyle = "green";
        ctx.fill();
        ctx.closePath();
    }

//Movement speed of mainEnemy
            if(mainEnemyRight && mainEnemy_x < canvas.width-mainEnemyWidth) 
            {
                mainEnemy_x += 5;
            } 
            else if(mainEnemyLeft && mainEnemy_x > 0) 
            {
                mainEnemy_x -= 5;
            }

            //mainEnemy moves across the top of the canvas
            if(mainEnemy_x + mainEnemy_dx - mainEnemyWidth > canvas.width) 
            {
                mainEnemy_dx = -mainEnemy_dx;
            }



            ball_x += dx;
            ball_y += dy;
            mainEnemy_x += mainEnemy_dx;
            }

这是与我需要帮助的对象相关的所有代码。我尝试使用x行来反转mainEnemy_dx = -mainEnemy_dx;移动,但这不起作用。我现在可以看到这段代码是一个绝对的混乱,我只需要让它工作,然后进行一些严肃的清理工作。 任何和所有的帮助将不胜感激!

1 个答案:

答案 0 :(得分:0)

首先,您有两个移动系统。一个用左右标志和常数从x加上或减去,另一个用dx加减。你应该只使用一个或另一个,后者更简单。

对于抖动,你必须还要检查当前dx是否为正边界(左边是负数)然后切换符号,或者当与右边界碰撞时向左移动对象找到。

当你每次移动物体7个单位时,然后当找到边界时,只使用dx(2或-2),但由于你的物体可以越过边界,它可能会在2和-2之间振动。但至少正确的分支总是会尝试向右移动5个单位,即使dx是负数。

使用调试器逐步执行代码并检查在右边缘振动时获取的变量和分支将准确显示其行为方式。