help me check the collision v 2 D:

hey again ive donee the collision it works on top f the brick but not in the bottom in dont knw why heres the js

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var jumperColor = '#660033';;
var jumperXSpeed = 10;
var gravity = 9.8;

var brickList = [];

var jumper =
{
width: 30,
height: 30,
x: 100,
y: 500,
mass: 100,

speedX: 0,
speedY: 0
}

var brick = createBrick(100, 500, 100, 20);
brickList.push(brick);
var brick = createBrick(200, 400, 100, 20);
brickList.push(brick);
var brick = createBrick(100, 300, 100, 20);
brickList.push(brick);
var brick = createBrick(200, 200, 100, 20);
brickList.push(brick);
var brick = createBrick(100, 100, 100, 20);
brickList.push(brick);
var brick = createBrick(200, 50, 100, 20);
brickList.push(brick);
var brick = createBrick(100, 0, 100, 20);
brickList.push(brick);
var brick = createBrick(200, 0, 100, 20);
brickList.push(brick);
registerKeyboard();

setInterval(gameController, 10);

function gameController()
{
draw();
checkCollisions();
move();
}

function move ()
{
moveJumper();
}
GotoMidGuys();

function draw ()
{
clearCanvas();
drawJumper();
drawBricks();

}

function drawBricks() {
for (var i = 0; i < brickList.length; i++) {
var brick = brickList[i];
context.fillStyle = "#3E983A";
context.fillRect(brick.x, brick.y, brick.width, brick.height);
}
}

function moveJumper()
{
jumper.x += jumper.speedX;
jumper.y += jumper.speedY;

jumper.speedY += 0.2;
if (jumper.speedY >= 10) {
jumper.speedY = 10;
}
}

function getRandomCoordinate()
{
return Math.floor(Math.random() * squareCount + 1);
}

function clearCanvas()
{
context.clearRect(0, 0, 600, 600);
}

function drawJumper ()
{
context.fillStyle = jumperColor;
context.fillRect(jumper.x, jumper.y, jumper.width, jumper.height);
}

function GotoMidGuys()
{
document.getElementById("canvas").style.marginLeft = "auto";
document.getElementById("canvas").style.marginRight = "auto";
canvas.style.display = 'block';
}

function registerKeyboard() {
document.addEventListener('keydown', function (event) {
/*
key codes
W = 119
S = 115
A = 65
D = 68
*/

if(event.keyCode == 87)
{
jumper.speedY = -10;
}
if(event.keyCode == 65)
{
jumper.speedX = -jumperXSpeed;
}
else if(event.keyCode == 68)
{
jumper.speedX = jumperXSpeed;
}
});

document.addEventListener('keyup', function() {
console.log('key up')
if(event.keyCode == 119)
{
}
if(event.keyCode == 65 || event.keyCode == 68)
{
jumper.speedX = 0;
}
});
}

function createBrick(x, y, width, height) {
return {
width: width,
height: height,
x: x,
y: y
}
}

function checkCollisions ()
{
checkBrickCollisions();
}

function checkBrickCollisions ()
{
for (var i = 0; i < brickList.length; i++) {
var brick = brickList[i];
if (jumper.x >= brick.x && jumper.x <= brick.x + brick.width && jumper.y + jumper.height >= brick.y && jumper.y <= brick.y + brick.height)
{
jumper.y = brick.y - jumper.height;
jumper.speedY = Math.min(0, jumper.speedY);
jumper.speedx = 0;
}
}
}

Beginne damit, das bereitgestellte JavaScript auszuführen und moveJumper sowie checkBrickCollisions zu untersuchen, insbesondere die Kollisionsbedingung und -reaktion. Reproduziere den Fall, in dem der Jumper den unteren Rand eines Ziegels erreicht, und überprüfe anschließend, dass das Kollisionsverhalten aus beiden Richtungen konsistent funktioniert.

Vom Indexierungsmodell aus dem Issue-Text verfasst.