如何使球悬挂在绳子上？

Question

我正在尝试使用P5.js库制作一个简单的游戏，其中的球是用绳子固定在销子上的，当它掉落时，它不能超过绳子的长度。 球必须掉落，直到与销钉的距离等于绳索长度。我该怎么做？我只需要它与y轴配合使用即可。

下面是一些代码：

var compound;

function Compound(){
    this.pinDiameter = 25;
    this.pinx = width/2;
    this.piny = height/2;

    this.ballDiameter = 50;
    this.ballx = width/2;
    this.bally = height/2 + 200;

    this.ropeWidth = 4;
    this.ropeHeight = 200;
    this.ropex = this.pinx - this.ropeWidth/2;
    this.ropey = this.piny;

    this.updatePin = function(){
    }

    this.updateBall = function(){
        this.ballSpeed  = this.ballSpeed + 1; 
        this.bally = this.bally + this.ballSpeed;
    }

    this.updateRope = function(){
    }

    this.show = function(){
        ellipse(this.pinx, this.piny, this.pinDiameter);
        fill(255);
        noStroke();

        ellipse(this.ballx, this.bally, this.ballDiameter);
        fill(255);
        noStroke();

        rect(this.ropex, this.ropey, this.ropeWidth, this.ropeHeight);
        fill(255);
        noStroke();
    }
}

function setup() {
    createCanvas(600, 600);
    compound = new Compound();
}

function draw() {
    background(0);
    compound.updatePin()
    compound.updateBall()
    compound.updateRope()
    compound.show()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

Answer 1

希望有帮助

var compound;

    function Compound(){
        this.pinDiameter = 25;
        this.pinx = width/2;
        this.piny = height/2;
        
        this.ballDiameter = 50;
        this.ballx = this.pinx;
        this.bally = this.piny + 100;
        this.ballSpeed = 0;
        this.ballGravity = 0.5;
        
        this.ropeWidth = 4;
        this.ropeHeight = 200;
        this.ropex = this.pinx - this.ropeWidth/2;
        this.ropey = this.piny;
        
        this.onPin = function(x, y) {
            let dx = x - this.pinx; 
            let dy = y - this.piny; 
            let dist = Math.sqrt(dx*dx, dy*dy)
            return dist <= this.pinDiameter/2; 
        }
        
        this.ropeheightcalc = function(){
            let dx = this.bally - this.piny; 
            return dx;
        }
        
        this.drag = false;  
        this.catch = function() {
              this.drag = true;
              this.mousex = mouseX;
              this.mousey = mouseY;
        }
    
        this.drop = function() {
              this.drag = false;  
        }
        
        this.updatePin = function(){
            if (this.drag) {
                this.piny = mouseY; 
                this.mousey = mouseY;
            }
        }
        
        this.updateBall = function(){
            this.ballSpeed  = this.ballSpeed + this.ballGravity; 
            this.bally = this.bally + this.ballSpeed;
            
            if(this.bally > this.piny + 200){
                this.bally = this.piny + 200;
                this.ballSpeed = 0;
            }
        }
    
        this.updateRope = function(){
            if (this.drag) {
                this.ropey = this.piny; 
                this.ropeHeight = this.ropeheightcalc();
            }
        }
        
        this.show = function(){
            ellipse(this.pinx, this.piny, this.pinDiameter);
            fill(255);
            noStroke();
            
            ellipse(this.ballx, this.bally, this.ballDiameter);
            fill(255);
            noStroke();
            
            rect(this.ropex, this.ropey, this.ropeWidth, this.ropeHeight);
            fill(255);
            noStroke();
        }
    }
    
    function mousePressed() {
        if ( compound.onPin(mouseX, mouseY))
            compound.catch();
    }
    
    function mouseReleased() {
        compound.drop();
    }
    
    function setup() {
        createCanvas(600, 600);
        compound = new Compound();
    }
    
    function draw() {
        background(0);
        compound.updatePin()
        compound.updateBall()
        compound.updateRope()
        compound.show()
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>

Answer 2

从OP代码开始，这是一个示例，该示例允许球向下滑动，就像绳索穿过球并在末端结了一个结。

var compound;

function Compound(){
    this.pinDiameter = 25;
    this.pinx = width/2;
    this.piny = this.pinDiameter;

    this.ballDiameter = 50;
    this.ballx = width/2;
    this.bally = this.ballDiameter + this.pinDiameter * 2;
    this.ballSpeed = 1;

    this.ropeWidth = 4;
    this.ropeHeight = 200;
    this.ropex = this.pinx - this.ropeWidth/2;
    this.ropey = this.piny;

    this.updatePin = function(){
    }

    this.updateBall = function(){

    if (this.bally < this.piny + 200){
        this.ballSpeed  = this.ballSpeed + 1; 
        this.bally = this.bally + this.ballSpeed;
    }
    }

    this.updateRope = function(){
    }

    this.show = function(){
        ellipse(this.pinx, this.piny, this.pinDiameter);
        fill(255);
        noStroke();

        ellipse(this.ballx, this.bally, this.ballDiameter);
        fill(255);
        noStroke();

        rect(this.ropex, this.ropey, this.ropeWidth, this.ropeHeight);
        fill(255);
        noStroke();
    }
}

function setup() {
    createCanvas(600, 600);
    compound = new Compound();
	setFrameRate(1);
}

function draw() {
    background(0);
    compound.updatePin()
    compound.updateBall()
    compound.updateRope()
    compound.show()
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

主要变化是在更新内，我们需要检查球是否未脱离绳索。我们还将球的位置初始化到绳子的顶部附近，这样我们就可以看到它向下滑动。

this.updateBall = function(){
    if (this.bally < this.piny + 200){
        this.ballSpeed  = this.ballSpeed + 1; 
        this.bally = this.bally + this.ballSpeed;
    }
}