首页 > 解决方案 > 如何在 JavaScript 中编写两个对象之间的碰撞和反应

问题描述

我正在制作一个只有 1 名玩家的乒乓球风格游戏。我已经进行了设置,因此当球击中屏幕边框时会改变方向,但是,如果球要击中屏幕中的另一个对象,我无法编写相同的代码

我使用 Khanacademy 制作了这段代码,因此大小为 400 像素 x 400 像素

这是我当前的代码

var ballx = random(50,350);
var bally = (50);
var ballxmovement = 2.5;
var ballymovement = 2.5;
var padwidth=80;
var padheight=10;
draw = function(){ 
ballx += ballxmovement;
bally += ballymovement;
noStroke();
background(0, 0, 0);
fill(255, 255, 255);
rectMode(CENTER);
rect(mouseX,350,padwidth, padheight);
fill(255, 255, 255);
ellipse(ballx,bally,20,20);
if (bally > 400) {
        ballymovement = -2.5;
    }
if (bally < 0) {
        ballymovement = 2.5;
    }
if (ballx > 400) {
        ballxmovement = -2.5;
    }
if (ballx < 0) {
        ballxmovement = 2.5;
    }    
};

我想要发生的是,当球击中矩形时,它的反应方式与击中边界时的反应方式相同。

根据要求,我已经展示了我为创建反应而制作的不成功的代码。我将矩形的 y 位置更改为一个名为recty 的变量。

while(ballx===mouseX){
    if(bally===recty){
        ballxmovement = -2.5;
        }
    } 

标签: javascript

解决方案


首先,您可以使用 switch case 或 if else 进行代码重构,如果您知道对象的位置(x,y 坐标),您可以在条件下使用它们来实现反弹效果,同时达到所需的位置

//if(ballx >= 400 ) subtract the values
//else if (ball7 >= 400) subtract the valuew
//else(ballx=== x co-ordinate and bally === y co-ordinnate) subtract the value

试试上面的 sudo 代码,这可以解决你的用例


推荐阅读