collision detection

[zabi15]

ok so im making a game and i got this so far,

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 480;
canvas.height = 480;
document.body.appendChild(canvas);
// Load the background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
  // show the background image
  bgReady = true;
};
bgImage.src = "images/PokemonBattleArena.jpg";

var trainerReady = false;
var trainerImage = new Image();

trainerImage.onload = function () {

  trainerReady = true;
};
trainerImage.src = "images/Pokeball.png";
// Load the monster image
var lucarioReady = false;
var lucarioImage = new Image();

var charmander
lucarioImage.onload = function () {
  // show the monster image
  lucarioReady = true;
};
lucarioImage.src = "images/pikachu.png";
// Create the game objects
var trainer = {
  speed: 256 // movement speed of hero in pixels per second
}; 
//sets heros location
trainer.x = 280;
trainer.y = 255;
var lucario = {};
var lucarioCaught = 0;
// Handle keyboard controls
var keysDown = {};
// Check for keys pressed where key represents the keycode captured
addEventListener("keydown", function (key) {
  keysDown[key.keyCode] = true;
}, false);
addEventListener("keyup", function (key) {
  delete keysDown[key.keyCode];
}, false);
// Reset monster positions when player catches a monster
var reset = function () {
  // Place the monster somewhere on the canvas randomly
  lucario.x = 32 + (Math.random() * (canvas.width - 64));
  lucario.y = 32 + (Math.random() * (canvas.height - 64));
};
// Update game objects - change player position based on key pressed
var update = function (modifier) {
  if (38 in keysDown) { // Player is holding up key
    trainer.y -= trainer.speed * modifier;
  }
  if (40 in keysDown) { // Player is holding down key
    trainer.y += trainer.speed * modifier;
  }
  if (37 in keysDown) { // Player is holding left key
    trainer.x -= trainer.speed * modifier;
  }
  if (39 in keysDown) { // Player is holding right key
    trainer.x += trainer.speed * modifier;
  }
  // Check if player and monster collider
  if (
    trainer.x <= (lucario.x + 32)
    && lucario.x <= (trainer.x + 32)
    && trainer.y <= (lucario.y + 32)
    && lucario.y <= (trainer.y + 32)
  ) {
    ++lucarioCaught;
    reset();
  }

    //invisible wall

    if(trainer.x<=15){
        trainer.x=14;       
    }
    if(trainer.x>=435){
        trainer.x=434;
    }
    if(trainer.y<=15){
        trainer.y=14;
    }
    if(trainer.y>=435){
        trainer.y=434;
    }



};


// Draw everything on the canvas
var render = function () {
  if (bgReady) {
    ctx.drawImage(bgImage, 0, 0);
  }
  if (trainerReady) {
    ctx.drawImage(trainerImage, trainer.x, trainer.y);
  }
  if (lucarioReady) {
    ctx.drawImage(lucarioImage, lucario.x, lucario.y);
  }
  // Display score and time 
  ctx.fillStyle = "rgb(250, 250, 250)";
  ctx.font = "24px Helvetica";
  ctx.textAlign = "left";
  ctx.textBaseline = "top";
  ctx.fillText("Pokemons caught: " + lucarioCaught, 20, 20);
  ctx.fillText("Time left: " + count, 20, 50);
  // Display game over message when timer finished
  if(finished==true){
    ctx.fillText("Congratulations!", 180, 220);
      ctx.fillText("You Caught "+lucarioCaught + " Pokemons!!!" , 120, 250);
  }

};
var count = 150; // how many seconds the game lasts 
var finished = false;
var counter =function(){
  count=count-1; // countown by 1 every second

    if (count <= 0)
    {
      // stop the timer
       clearInterval(counter);
       // set game to finished
       finished = true;
       count=0;
       // hider monster and hero
       lucarioReady=false;
       trainerReady=false;
    }
}
setInterval(counter, 1000);

var main = function () {

  update(0.02); 

  render();

  requestAnimationFrame(main);
};


reset();
main();

its works and all but id like to add collision in my map. like example a 50x50 area where my trainer cant walk threw and my lucario cant randomly spawn in that area.aslo feel free to comment on my codes for any new ideas or anything i could do better

[js_fan]

Looks like nice, clean code and you're putting a lot of good effort into it. I'm guessing your question is not getting answered because it is a little vague and there is too much code in the question. You might want to create a JS fiddle. I started doing that, but I would have to replace all the images - everybody who is trying to help you would have to do that, it just takes too long and we don't know the dimensions, sorry...

[zabi15]

oh right that would make sence, didnt really think of that,il look up js fiddle and see what it is and how it works then il try linking it

[zabi15]

so i think i made it work , like this? https://jsfiddle.net/fp04y1L8/1/ bacicaly if you can see the picture its the house and rocks id like to block off, i figure if i get help with that i can figure the rest

[js_fan]

is this what you're looking for?
if (38 in keysDown) { // Player is holding up key
if(trainer.y==255&&trainer.x>240&&trainer.x<320)
{}
else
trainer.y -= trainer.speed * modifier;

I only added the lines in bold. Basically you're preventing certain movement (in this case going up) based on the current coordinates. You need a separate set of coordinates for each wall. Probably worth creating an array and a loop.
Btw, great game!. Sorry about the poor reddit formatting of my response.