如何使游戏停止，如果对象击中另一个?

Question

我正在用p5js制作一款躲避球游戏:)玩家可以使用箭头键将一个黄色圆圈从画布的左上角移动到右下角，同时躲避六个线性移动的红点——其中三个是水平移动的，其他是垂直移动的。

我想要的是→如果黄点碰到其中一个红点，游戏停止，背景变黑。

let c;
let cspeed = 4
let x= 25;
let y = 25;
let level=0;
let width = 800
let height = 800
function setup() {
createCanvas(800, 800);
c=0
let d = dist(c,height/4,x,y); //becuz of 'dist is not defined' issue, i moved it to setup() position
let e = dist(c,height/2,x,y);
let f = dist(c,height/9,x,y);
let g = dist(height/2,c,x,y);
let h = dist(height/4,c, x,y);
let j = dist(height/9,c, x,y);
print(d);
print(e); 
print(f);
print(g);
print(h); 
print(j); 
if (d<20||e<20||f<20||g<20||j<20);{
loseScreen();
}
}
function draw() {
keyPressed()
background(220);
fill(50);
textSize(30)
text(level, 770, 30);

fill('green')
square(0, 0, 50);
fill('purple');
square(750, 750, 50);
fill('yellow')
ellipse(x, y, 40);


c+=cspeed;
fill('red');
noStroke();   
ellipse(c, height / 4, 50, 50);
ellipse(c, height / 2, 50, 50);
ellipse(c, height / 9, 50, 50);
ellipse(height / 4, c, 50, 50);
ellipse(height / 2, c, 50, 50);
ellipse(height / 9, c, 50, 50);
if (c > width || c < 0) {
cspeed *= -1;
}

}
if (c > width || c < 0) {
cspeed *= -1;
}
if (x > 770 && y >770){
x = 25
y= 25;
cspeed *= 1.5
level++;
}
function loseScreen(){ // it's not working,,
noStroke(); 
fill('black');
square(0,0,800); 
}
function keyPressed() {
//print(keyCode, key);

if (keyCode == LEFT_ARROW && keyIsPressed) {
x = x - 5;
if (x<20){
x=20
}
} else if (keyCode == RIGHT_ARROW&& keyIsPressed) {
x = x + 5;
if (x>780){
x=780
}
} else if(keyCode == DOWN_ARROW&& keyIsPressed){
y = y + 5; 
if (y>780){
y=780
}
}else if(keyCode == UP_ARROW&& keyIsPressed){
y = y - 5; 
if (y<20){
y=20
}
}
}

这是我的p5js代码https://editor.p5js.org/kiskl/sketches/XzwAM5pDA

我将感谢您提供的任何帮助!

Answer 1

应你的要求，我对你第一个问题的答案进行了扩展。我之前的解决方案的技巧，以及为什么它通常更好地使用数组来处理这样的事情，是因为你可以在for循环中使用几行检查每个点的碰撞。

比起硬编码的点，使用数组肯定有好处。

let height = 700;
let width = 700;
let s = 4;
let d = 50;
let gamestate = 'running';
let level = 0;
let x = 25;
let y = 25;
function setup() {
createCanvas(width, height);
}
let dots = [
{y: height / 4, x: 0, s: s, d: d, direction: 'h' },
{ y: height / 2, x: 0, s: s, d: d, direction: 'h' },
{ y: height / 9, x: 0, s: s, d: d, direction: 'h' },
{ x: width / 4, y: 0, s: s, d: d, direction: 'v' },
{ x: width / 2, y: 0, s: s, d: d, direction: 'v' },
{ x: width / 9, y: 0, s: s, d: d, direction: 'v' },
]
function draw() {
switch (gamestate) {
case 'victory':
victoryScreen();
break;
case 'lose':
loseScreen();
break;
default:
keyPressed();
background(220);
fill(50);
textSize(30)
text(level, 770, 30);

fill('green');
square(0, 0, d);
fill('purple');
square(width - d, height - d, d);
fill('yellow');
ellipse(x, y, 40);
dots.forEach((dot) => {
fill('red')
ellipse(dot.x, dot.y, dot.d, dot.d);
if (dot.direction === 'h') {
dot.x += dot.s
if (dot.x > width || dot.x < 0) {
dot.s *= -1;
}
} else if (dot.direction === 'v') {
dot.y += dot.s
if (dot.y > height || dot.y < 0) {
dot.s *= -1;
}
}
if (x < (dot.x + d) && (dot.x - d) < x) {
if (y < (dot.y + d) && (dot.y - d) < y) {
gamestate = 'lose';
}
}
});
if (x > width - d && y > height - d) {
gamestate = 'victory'
}
}
}

function loseScreen() {
noStroke();
fill('black');
square(0, 0, 800);
}
function victoryScreen() {
noStroke();
fill('green');
square(0, 0, 800);
}
function keyPressed() {
if (keyCode == LEFT_ARROW && keyIsPressed) {
x = x - 5;
if (x < d / 2) {
x = d / 2;
}
} else if (keyCode == RIGHT_ARROW && keyIsPressed) {
x = x + 5;
if (x > (width - d / 2)) {
x = width - d / 2;
}
} else if (keyCode == DOWN_ARROW && keyIsPressed) {
y = y + 5;
if (y > (height - d / 2)) {
y = height - d / 2;
}
} else if (keyCode == UP_ARROW && keyIsPressed) {
y = y - 5;
if (y < d / 2) {
y = d / 2;
}
}
}

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