help me check the collision v 2 D:

[ICEGAMER]

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; } } }

[StaleHyena]

You don't need to recreate the var brick everytime you want to store a new value in it

[ICEGAMER]

ok so hoow do i write it then

[StaleHyena]

You can write it like you alredy did, but just initializing brick only one time, like this: var brick = createBrick(100, 500, 100, 20); brickList.push(brick); brick = createBrick(200, 400, 100, 20); brickList.push(brick); brick = createBrick(100, 300, 100, 20); brickList.push(brick); brick = createBrick(200, 200, 100, 20); brickList.push(brick); brick = createBrick(100, 100, 100, 20); brickList.push(brick); brick = createBrick(200, 50, 100, 20); brickList.push(brick); brick = createBrick(100, 0, 100, 20); brickList.push(brick); brick = createBrick(200, 0, 100, 20); brickList.push(brick);

Or, even better, you can use a for loop:

var n = 10; for(var i = 0; i < n; i++) { var brick = createBrick(x, y, w, h); brickList.push(brick); } where n is the number of bricks you want to add the above code wont run, because i left the interesting part for you: You need to set the x, y (for this program) according to the value of i.

[StaleHyena]

codeblocks aren't getting formatted properly, no newlines

[ICEGAMER]

and the thing is i dont know how many bricks i want

[ICEGAMER]

and can i use for (var i = 0; i < brickList.length; i++) ?

[StaleHyena]

No, the array doesnt have a size if it hasn't any values in it

[StaleHyena]

Try setting n to a resonable value, like 10

[StaleHyena]

By the way, nice game!

[StaleHyena]

I'm trying to debug your code. If i can patch it, i will explain why it wasnt working

[ICEGAMER]

thank you , im trying to make a game like doodle jump the levels arent gonna be randomny genereted they are gonna be made by hand and the way im going to be doing it by playsing the brick outside the canavas each second this bricks will be dropped by 1 or moore pixels and the bricks outside the canvas will be dropped in canvas so this is what im trying to do :D

P.S: sorry for my english in still learning it so sorry for my grammar :D

[StaleHyena]

found the problem and added comments explaining: `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;

//Gravity var should be in here
jumper.speedY += 0.2;
//                ^
//
//It's best to say 'var maxVel = 10', so you don't end up hardcoding numbers
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 = -3;
}
if(event.keyCode == 65)
{
    jumper.speedX = -jumperXSpeed;
}
else if(event.keyCode == 68)
{
    jumper.speedX = jumperXSpeed;
}

});

document.addEventListener('keyup', function (event) { console.log('key up ' + event.keyCode); 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]; //1: You should detect collision for all the for cardinals in SEPARATE //if statements, because you aren't aways going to want to place the //jumper in the top of the brick! // //2: You are only detecting collision for one of the sides //of the jumper. 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; //There is a typo here jumper.speedY = Math.min(0, jumper.speedY); jumper.speedx = 0; } } } `

[StaleHyena]

I really don't get the rules of this codeblock thingie...

[StaleHyena]

Oh, and these types of questions are better suited for stackoverflow, where you'll get quicker and generally better responses than here.

[ICEGAMER]

yea tackoverflow all the time they say like my english is to bad or something so i dont know how to post in there

[ICEGAMER]

thank you , il try to make tthe collision on the 2ond side

[StaleHyena]

If you want to learn more about game physics engines, which I think is what you're trying to incorporate in your game, check out some of Daniel's videos on the topic, I think it will help you make your game work. Hope it helps!

[ICEGAMER]

hey i made the collision for both sides but .....

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

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

var brickList = []; var isGameOver = false; var jumper = { width: 30, height: 30, x: 100, y: 400, mass: 100,

speedX: 0, speedY: 0 }

var brick = createBrick(100, 500, 100, 20); brickList.push(brick); brick = createBrick(200, 400, 100, 20); brickList.push(brick); brick = createBrick(100, 300, 100, 20); brickList.push(brick); brick = createBrick(200, 200, 100, 20); brickList.push(brick); brick = createBrick(100, 100, 100, 20); brickList.push(brick); brick = createBrick(200, 50, 100, 20); brickList.push(brick); brick = createBrick(100, 0, 100, 20); brickList.push(brick); brick = createBrick(200, -100, 100, 20); brickList.push(brick); brick = createBrick(100, -200, 100, 20); brickList.push(brick); brick = createBrick(700, -300, 100, 20); brickList.push(brick); brick = createBrick(500, -400, 100, 20); brickList.push(brick); brick = createBrick(900, -500, 100, 20); brickList.push(brick); brick = createBrick(200, -600, 100, 20); brickList.push(brick); brick = createBrick(700, -700, 100, 20); brickList.push(brick); brick = createBrick(400, -800, 100, 20); brickList.push(brick); brick = createBrick(900, -900, 100, 20); brickList.push(brick);

registerKeyboard();

requestAnimationFrame(gameController);

function gameController() { move(); checkCollisions(); draw(); if (!isGameOver) { requestAnimationFrame(gameController); } }

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

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() { var oldX = jumper.x; var oldY = jumper.y;

jumper.x += jumper.speedX; jumper.y += jumper.speedY;

var isOnCollision = false; // Check coordinates for (var i = 0; i < brickList.length; i++) { var brick = brickList[i];

var isInX = jumper.x + jumper.width >= brick.x && jumper.x <= brick.x + brick.width;
var isOnTop = jumper.y + jumper.height >= brick.y;
var isOnBottom = jumper.y <= brick.y + brick.height;

if (isOnTop && isInX && isOnBottom) {
  jumper.y = oldY;
  jumper.speedY = 0;
  isOnCollision = true;
  jumper.isJumped = false;
} 

}

jumper.isCollision = isOnCollision;

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)
{
  if(!jumper.isJumped) {
    jumper.isJumped = true;
    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(); jumperCollisions(); }

function moveBricks () { for (var i = 0; i < brickList.length; i++) { var brick = brickList[i];

if (brick.y > canvas.height)
{
  brick.y = -100;
}
brick.y = brick.y + 1;
brickList.y = brickList.y + 1;

} }

function jumperCollisions () { if (jumper.y > canvas.height) { gameOver(); }

if (jumper.y < 0) { levelComplete(); }

if (jumper.y > canvas.width) { jumper.x = 1; }

if (jumper.x < 0) { jumper.x = canvas.width - 1; } }

function levelComplete () { isGameOver = true; alert("Nice job level complete"); }

function gameOver () { isGameOver = true; alert("Game Over , pay to play"); }

function checkBrickCollision(obj, col) { if (obj.x + obj.width > col.x && obj.x < col.x + col.width && obj.y + obj.height >= col.y && obj.y <= col.y + col.height) { return col; } else return null; }

function checkBrickCollisions () { // for (var i = 0; i < brickList.length; i++) { // var brick = brickList[i]; // var jumperTotalX = jumper.x + jumper.width;

// if (jumperTotalX >= brick.x && jumper.x <= brick.x + brick.width) { // if (jumper.y + jumper.height >= brick.y && jumper.y <= brick.y + brick.height) { // // Collision // jumper.speedY = 0; // jumper.speedX = 0; // jumper.isCollision = true; // } // } // } }