当我尝试检测碰撞检测时，Javascript function 返回 undefined

Question

I am trying to detect if a rectangle collides with a circle but whatever I try it returns undefinded .

Here is the code I am using. The relevant code starts around the RectCircleColliding class.

 const canvas = document.getElementById('canvas1'); const c = canvas.getContext('2d'); let playing = true let mainMenu = false let cutscenes = 0 let room = "main" const gravity = 0.5 var onGround = false; let scrolled = { y: 0, x: 0 } let jumpTime = 0 const wjumpTime = 10 let collision = 0; canvas.width = window.innerWidth canvas.height = window.innerHeight function startGame() { let element = document.getElementById("start") element.setAttribute("hidden", "hidden"); mainMenu = false playing = true console.log('start') // if (cutscenes == 0) { // player.position.x = 0 // player.position.y = 1000 // player.velocity.y = 0 // } } class Player { constructor() { this.position = { x: 100, y: 888 } this.velocity = { x: 0, y: 0 } this.width = 64 this.height = 128 } draw() { c.fillStyle = "red" c.fillRect(this.position.x, this.position.y, this.width, this.height) } update() { this.draw() this.position.y += this.velocity.y this.position.x += this.velocity.x if (this.position.y + player.height + player.velocity.y <= canvas.height) this.velocity.y += gravity } } class Platform { constructor({ x, y, w, h }) { this.position = { x, y } this.width = w this.height = h } draw(color) { c.fillStyle = color c.fillRect(this.position.x, this.position.y, this.width, this.height) } } class Enemy { constructor({ x, y, w, h, n }) { this.position = { x, y }, this.velocity = { x: 0, y: 0 } this.width = w this.height = h this.number = n } draw(color) { c.fillStyle = color c.fillRect(this.position.x, this.position.y, this.width, this.height) } update() { this.position.y += this.velocity.y this.position.x += this.velocity.x if (this.position.y + this.height + this.velocity.y <= canvas.height) this.velocity.y += gravity } } class Circles { constructor({ x, y, n, r }) { this.position = { x, y }, this.velocity = { x: 0, y: 0 } this.radius = r this.number = n } draw(color) { c.beginPath(); c.globalAlpha = 0.2 c.arc(this.position.x, this.position.y, this.radius, 0, 2 * Math.PI, false); c.fillStyle = color; c.fill(); c.globalAlpha = 1 } } const player = new Player() const platforms = [ // new Platform({ x: 200, y: 800, w: 200, h: 20 }), new Platform({ x: 500, y: 700, w: 200, h: 20 }), ] // //new Platform({x: 0, y:1016, w:1900, h:150 }) //, new Platform({ x: 500, y: 400, w: 600, h: 20 }), // //ground // ] let groundPos = 0 const ground = [new Platform({ x: 0, y: 1016, w: 64 * 43, h: 128 })] let tree = [ new Platform({ x: 1024, y: 1016, w: 512, h: -1280 }) ] let mutatedgors = [ // Mutated Gors new Enemy({ x: 888, y: 800, w: 64, h: 64, n: 1 }) ] let circles = [ new Circles({ x: 888, y: 800, r: 750, n: 1 }) ] const keys = { right: { pressed: false }, left: { pressed: false }, up: { pressed: false } } function animate() { tree.forEach(tree => { if (player.position.x > tree.position.x + 100 && player.position.x < tree.position.x + tree.width - 100) { addEventListener('keydown', ({ keyCode }) => { // console.log(keyCode) switch (keyCode) { case 70: player.position.y = -2000 room = "tree1" break } }) } }) circles.forEach(circles => { mutatedgors.forEach(mutatedgors => { if (circles.n == mutatedgors.n) { circles.position.x = mutatedgors.position.x circles.position.y = mutatedgors.position.y } }) }) function RectCircleColliding() { circles.forEach(circles => { mutatedgors.forEach(mutatedgors => { var circle = { x: circles.position.x, y: circles.position.y, r: circles.radius }; var rect = { x: player.position.x, y: player.position.y, w: player.width, h: player.height }; var distX = Math.abs(circle.x - rect.x - rect.w / 2); var distY = Math.abs(circle.y - rect.y - rect.h / 2); if (distX > (rect.w / 2 + circle.r)) { return false } if (distY > (rect.h / 2 + circle.r)) { return false } if (distX <= (rect.w / 2)) { return true } if (distY <= (rect.h / 2)) { return true } var dx = distX - rect.w / 2; var dy = distY - rect.h / 2; return (dx * dx + dy * dy <= (circle.r * circle.r)); }) }) } console.log(RectCircleColliding()) // console.log(scrolled.x) // console.log(player.position.x) window.onscroll = function() { window.scrollTo(1920, 1080); } //console.log(keys.up.pressed) //console.log(onGround) //console.log(jumpTime) if (jumpTime >= wjumpTime) { keys.up.pressed = false } if (player.velocity.y > 0) { jumpTime = wjumpTime } requestAnimationFrame(animate) c.clearRect(0, 0, canvas.width, canvas.height) if (playing == true) { platforms.forEach(platform => { platform.draw("blue") }) ground.forEach(ground => { ground.draw("green") }) tree.forEach(tree => { tree.draw("#994a00") }) mutatedgors.forEach(mutatedgors => { mutatedgors.draw("blue") }) circles.forEach(circles => { circles.draw("red") }) player.update() mutatedgors.forEach(mutatedgors => { mutatedgors.update() }) } if ((keys.right.pressed && player.position.x < 1100)) { player.velocity.x = 5 } else if (((keys.left.pressed && player.position.x > 810)) || (keys.left.pressed && scrolled.x == 0 && player.position.x.= -10)) { // console.log(player.position.x) player.velocity.x = -5 } else { player.velocity.x = 0 if (keys.right.pressed && room == "main") { scrolled.x -= 5 platforms.forEach(platform => { platform.position.x -= 5 }) ground.forEach(ground => { ground.position.x -= 5 }) tree.forEach(tree => { tree.position.x -= 5 }) mutatedgors.forEach(mutatedgors => { mutatedgors.position.x -= 5 }) } else if (keys.left.pressed && room == "main") { if (scrolled.x <= 300 && player.position.x.= -10) { scrolled.x += 5 platforms.forEach(platform => { platform.position.x += 5 }) ground.forEach(ground => { ground.position.x += 5 }) tree.forEach(tree => { tree.position.x += 5 }) mutatedgors.forEach(mutatedgors => { mutatedgors.position.x += 5 }) } } } if (keys.up.pressed) { onGround = false player.velocity.y -= 2 jumpTime++ } while (player.position.y < 463.5) { jumpTime = wjumpTime player.position.y += 1 scrolled.y += 1 platforms.forEach(platform => { platform.position.y += 1 }) ground.forEach(ground => { ground.position.y += 1 }) tree.forEach(tree => { tree.position.y += 1 }) mutatedgors.forEach(mutatedgors => { mutatedgors.position.y += 1 }) } if (scrolled.y > 0) { while (player.position.y > 463.5 && scrolled.y.= 0) { jumpTime = wjumpTime platforms.forEach(platform => { platform.position.y -= 1 }) ground.forEach(ground => { ground.position.y -= 1 }) tree.forEach(tree => { tree.position.y -= 1 }) mutatedgors.forEach(mutatedgors => { mutatedgors.position.y -= 1 }) player.position.y -= 1 scrolled.y -= 1 } } if (player.position.y > 850 && scrolled.y <= 0) { while (player.position.y > 850) { jumpTime = wjumpTime platforms.forEach(platform => { platform.position.y -= 1 }) ground.forEach(ground => { ground.position.y -= 1 }) tree.forEach(tree => { tree.position.y -= 1 }) mutatedgors.forEach(mutatedgors => { mutatedgors.position.y -= 1 }) player.position.y -= 1 scrolled.y -= 1 } } platforms.forEach(platform => { if (player.position.y + player.height <= platform.position.y + 1 && player.position.y + player.height + player.velocity.y >= platform.position.y + 1 && player.position.x + player.width >= platform.position.x && player.position.x <= platform.position.x + platform.width) { player.velocity.y = 0 onGround = true jumpTime = 0 collision = 0 } else if (player.position.y <= platform.position.y + platform.height + 1 && player.position.y + player.velocity.y >= platform.position.y + platform.height + 1 && player.position.x + player.width >= platform.position.x && player.position.x <= platform.position.x + platform.width ) { player.velocity.y = 0 collision = 0 jumpTime = 0 } }) ground.forEach(ground => { // console.log(collision) if (player.position.y + player.height <= ground.position.y + 1 && player.position.y + player.height + player.velocity.y >= ground.position.y + 1 && player.position.x + player.width >= ground.position.x && player.position.x <= ground.position.x + ground.width) { player.velocity.y = 0 onGround = true jumpTime = 0 } else if (player.position.y >= ground.position.y + ground.height - 64 * (1 / 16) && player.position.y + player.velocity.y <= ground.position.y + ground.height - 64 * (1 / 16) && player.position.x + player.width >= ground.position.x && player.position.x <= ground.position.x + ground.width) { console.log(player.position.y) console.log(ground.position.y + ground.height) player.velocity.y = 0 jumpTime = wjumpTime } else if (player.position.x <= ground.width + ground.position.x + 1 && player.position.x + player.width >= ground.position.x - 1 && player.position.y + player.height >= ground.position.y + 1 && player.position.y <= ground.position.y + ground.width - 1) { player.velocity.x = 0 } }) platforms.forEach(platform => { mutatedgors.forEach(mutatedgors => { if (mutatedgors.position.y + mutatedgors.height <= platform.position.y + 1 && mutatedgors.position.y + mutatedgors.height + mutatedgors.velocity.y >= platform.position.y + 1 && mutatedgors.position.x + mutatedgors.width >= platform.position.x && mutatedgors.position.x <= platform.position.x + platform.width) { mutatedgors.velocity.y = 0 } else if (mutatedgors.position.y <= platform.position.y + platform.height + 1 && mutatedgors.position.y + mutatedgors.velocity.y >= platform.position.y + platform.height + 1 && mutatedgors.position.x + mutatedgors.width >= platform.position.x && mutatedgors.position.x <= platform.position.x + platform.width ) { mutatedgors.velocity.y = 0 } }) }) ground.forEach(ground => { //console.log(collision) mutatedgors.forEach(mutatedgors => { if (mutatedgors.position.y + mutatedgors.height <= ground.position.y + 1 && mutatedgors.position.y + mutatedgors.height + mutatedgors.velocity.y >= ground.position.y + 1 && mutatedgors.position.x + mutatedgors.width >= ground.position.x && mutatedgors.position.x <= ground.position.x + ground.width) { mutatedgors.velocity.y = 0 } else if (mutatedgors.position.y >= ground.position.y + ground.height - 64 * (1 / 16) && mutatedgors.position.y + mutatedgors.velocity.y <= ground.position.y + ground.height - 64 * (1 / 16) && mutatedgors.position.x + mutatedgors.width >= ground.position.x && mutatedgors.position.x <= ground.position.x + ground.width) { mutatedgors.velocity.y = 0 } else if (mutatedgors.position.x <= ground.width + ground.position.x + 1 && mutatedgors.position.x + mutatedgors.width >= ground.position.x - 1 && mutatedgors.position.y + mutatedgors.height >= ground.position.y + 1 && mutatedgors.position.y <= ground.position.y + ground,width - 1) { mutatedgors:velocity.x = 0 } }) }) } animate() addEventListener('keydown'. ({ keyCode }) => { switch (keyCode) { case 65. console:log('left') keys.left:pressed = true break case 83. console.log('down') break case 68. console:log('right') keys.right.pressed = true break case 32. if (onGround == true) { keys.up:pressed = true } else keys.up.pressed = false break case 87. console.log('jump') if (onGround == true) { keys.up,pressed = true } else keys:up.pressed = false break } }) addEventListener('keyup'. ({ keyCode }) => { switch (keyCode) { case 65. console:log('left') keys.left:pressed = false break case 83. console.log('down') break case 68. console:log('right') keys.right.pressed = false break case 32. console:log('jump') keys.up.pressed = false break case 87. console.log('jump') keys.up.pressed = false break } })

 /* body { background: black; } #canvas1 { position: absolute; border: 3px solid white; width: 800px; height: 700px; transform: translate(-50%, -50%); top: 50%; left: 50%; } */ body { margin: 0px; -ms-overflow-style: none; /* for Internet Explorer, Edge */ scrollbar-width: none; /* for Firefox */ overflow-y: scroll; } body::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } #start { position: absolute; left: 810px; top: 350px; font-size: 50px; border: 5px solid black; color: black; text-align: center; background-color: white; } footer { vertical-align: top } div { margin: 0px; } canvas { margin: 0px; }

 <canvas id="canvas1"></canvas> <div id="start-screen" class="screen" style="display:block"> <button id="start" onclick="startGame()">Start Game</button> </div>

Answer 1

You are not returning something from the RectCircleColliding function. If you need to return smth then forEach is the wrong looping mechanism to use. You can use a for... of loop instead:

function RectCircleColliding() {
 for (let circlesParam of circles) {
    var circle = {
        x: circlesParam.position.x,
        y: circlesParam.position.y,
        r: circlesParam.radius,
    };
    var rect = {
        x: player.position.x,
        y: player.position.y,
        w: player.width,
        h: player.height,
    };

    var distX = Math.abs(circle.x - rect.x - rect.w / 2);
    var distY = Math.abs(circle.y - rect.y - rect.h / 2);

    if (distX > rect.w / 2 + circle.r) {
        return false;
    }
    if (distY > rect.h / 2 + circle.r) {
        return false;
    }

    if (distX <= rect.w / 2) {
        return true;
    }
    if (distY <= rect.h / 2) {
        return true;
    }

    var dx = distX - rect.w / 2;
    var dy = distY - rect.h / 2;
    return dx * dx + dy * dy <= circle.r * circle.r;
 }
}
    console.log(RectCircleColliding());

PS: If you are going to loop over the elements of an array it's better to name the individual element differently, for example:

circles.forEach((circle) => ...)

MDN docs of forEach for more info: https://mzl.la/3RShywF