时间戳

首页 > 解决方案 > 物体卡在地板上

javascript - 物体卡在地板上

问题描述

好的，我正在可汗学院使用 PJS 制作拖放程序，这是我的代码：

/*    Just a simple drag and drop program    */ 

// TODO: 
// * Add realistic bouncing
// * Add particles when bouncing

// Changeable variables
var testShapeWidth = 45;
var testShapeHeight = 45;
var testShapeX = 200;
var testShapeY = 200;
var gravityStrength = 0.8;


// Unchangeable variables
var onGround = false;
var mouseDown = false;

var round2 = function (num) {
    num = num / 2;
    num = round(num);
    num *= 2;
    return num;
};

var checkIfClicked = function(x, y, w, h) {
    var mx = mouseX;
    var my = mouseY;
    
    var rightSide = x + w;
    var bottomSide = y + h;
    
    if (mx > x && mx < rightSide && my > y && my < bottomSide) {
        return true;
    }
    
    return false;
};

var draw = function() {
    background(255, 255, 255);
    fill(0);
    rect(testShapeX, testShapeY, testShapeWidth, testShapeHeight);
    
    testShapeY = round2(testShapeY);
    
    // Check if on the ground or not and update the onGround variable
    if (testShapeY + testShapeHeight < 400) { // If the y coorordinate of the bottom edge of the rectangle is less than 400...
        onGround = false; // The rectangle is not on the ground
    } else if (testShapeY + testShapeHeight >= 400) { // If the y coorordinate of the bottom edge of the rectangle is greater than or equal to 400...
        gravityStrength = round2(gravityStrength * -1) / 2;
    }
    
    if (!onGround && !mouseDown) {
        testShapeY += gravityStrength;
        gravityStrength += 0.2;
    }
    
    if (mouseDown) {
        testShapeX = mouseX - testShapeWidth / 2;
        testShapeY = mouseY - testShapeHeight / 2;
        gravityStrength = 0;
    }
};

var mousePressed = function() {
    if (checkIfClicked(testShapeX, testShapeY, testShapeWidth, testShapeHeight)) {
        mouseDown = true;
    }
};
var mouseReleased = function() {
    mouseDown = false;
};

我只是通过替换这些行来添加弹跳：

else if (testShapeY + testShapeHeight >= 400) { // If the y coorordinate of the bottom edge of the rectangle is greater than or equal to 400...
        testShapeY = 400 - testShapeHeight;
        gravityStrength = 0;
}

有了这个：

else if (testShapeY + testShapeHeight >= 400) { // If the y coorordinate of the bottom edge of the rectangle is greater than or equal to 400...
        gravityStrength = round2(gravityStrength * -1) / 2;
}

但现在有时矩形会卡在地板上。这是一个例子：示例视频

起初我认为它与偶数和奇数有关，这就是为什么我添加了 round2 函数（它四舍五入到最接近的 2）无济于事。我希望 stackoverflow 社区可以帮助我解决这个问题，因为我不能。您可以在此处找到我的项目的链接。

标签： javascriptprocessing

解决方案

你是一个幸运的人，因为我不必筛选所有这些代码来知道问题所在（否则我今晚会帮助其他人，真的，这是太多的代码）。你的问题是数学。您的解决方案很简单。

问题

这是发生了什么：当物体足够低可以穿过地板时，你反转并除以 2 gravityStrength。这正是事情出错的地方。

如果对象下落的像素多于gravityStrength / 2地平面下的像素，则它不能再次上升，因为添加新对象时它的位置gravityStrength仍将在地下。然后它会再次恢复它的方向和一半gravityStrength，确保它不会再从这个位置移动（除非你用手移动它）。它绝对卡住了。

解决方案

改变这个：

} else if (testShapeY + testShapeHeight >= 400) { // If the y coorordinate of the bottom edge of the rectangle is greater than or equal to 400...
    gravityStrength = round2(gravityStrength * -1) / 2;
}

为了这：

} else if (testShapeY + testShapeHeight >= 400) { // If the y coorordinate of the bottom edge of the rectangle is greater than or equal to 400...
    testShapeY = 400; // now any speed will bounce. Lower this number to make sure that the object will "get stuck" after a while if otherwise it bounces forever
    gravityStrength = round2(gravityStrength * -1) / 2;
}

这里的想法是您的算法将保持相同的工作，但不会让对象下降到足够低以至于无法gravityStrength将其带回弹跳。或者，您可以将testShapeY = 400;一行下移，并将testShapeY变量基于新的gravityStrength. 那会很不错。

玩得开心！

推荐阅读