javascript canvas bottom and top collision detection -

so have been looking around , trying tutorials can't seem collision detection systems work. if able explain doing wrong or syntax errors great. player right touch object works player left touch object works

1--not working jump on objects 2-- not working hit top of objects

i'm new in javascript first serious project while if

http://codepen.io/guntarwii/pen/ebmnwb

function startgame() {      gamearea.start();    }    var gamearea = {          canvas: document.createelement("canvas"),          start: function () {              this.canvas.width = 720;              this.canvas.height = 500;                this.context = this.canvas.getcontext("2d");              document.body.insertbefore(this.canvas, document.body.childnodes[0]);                            this.interval = setinterval(updategamearea, 20);              //        console.log(gamearea.context)              document.addeventlistener("keydown", optiones.moveme);              document.addeventlistener("keyup", optiones.stopme);                //            player.renderin()          },            clear: function () {                            this.context.clearrect(0, 0, this.canvas.width, this.canvas.height);          }            }    var img1 = new image();  img1.src = "https://s17.postimg.org/mufqe9pjz/run.png";    var img2 = new image();  img2.src = "https://postimg.org/image/sqk3gcrp9/";    var img3 = new image();  img3.src = "https://s11.postimg.org/w9vlrcphv/layer_1.png";    var ground = new image();  ground.src = "https://s18.postimg.org/u5k0lwb3d/tile.png";    var hero ={      x: 0,      y: 350,      velx: 10,      vely: 0,      img: img1,      dir: "right",      framepos: 70,      framecount: 6,      currentframe: 0,      moving: false,      jumping: false,      animate: false,        }  var walls =[      {"id":ground,"x":500,"y":250,"w":50,"h":50},       {"id":ground,"x":200,"y":400,"w":50,"h":50},        ]      var map = {      gravity: 2,      groundy: 350,      mapwalls:function(){          var w = 70,              h = 70,              y = 488,              x = 688          for(var = 0; < 720; += 50){  //                console.log(walls)                             walls.push({"id":ground,"x":i,"y":450,"w":w,"h":h});                }      },      renderobject:function(){          ctx = gamearea.context          for(var = 0; < walls.length; i++){                            var x = walls[i].x,                  y = walls[i].y,                  width = walls[i].w,                  height = walls[i].h,                  img = walls[i].id                            ctx.drawimage(walls[i].id, walls[i].x, walls[i].y,walls[i].w,walls[i].h);              var x = walls[i].x,                  y = walls[i].y,                  width = walls[i].w,                  height = walls[i].h  //                img = walss[i].id                                          optiones.collisiondetection(x,y,width,height);          }      }  }  map.mapwalls();  var optiones ={      animateplayer: function () {      hero.currentframe = hero.framecount * 70; // frame counter position of next frame          hero.framecount++;          if (hero.framecount > 5) {              hero.framecount = 0;          }          if (hero.jumping == true) {                  // if player jump height + player y position biger or equal  ground position  	            if (hero.y + hero.vely <= map.groundy) {                      //now jumping                      //player y position + jump height  	                hero.y += hero.vely;                      //jump height + gravity  	                hero.vely += map.gravity;  	            } else {                      // jump height can jump becouse jump height 0  	                hero.vely = 0;                      //we cant jump  	                hero.jumping = false;  	            }  	        }          if (hero.animate == true) {                  //if player go right                  if (hero.dir == "right") {                      //player move right speed                      hero.velx = 10;                      //player sprite movien right                      hero.img = img1;                      //player movieng x postion + movieng speed                      hero.x += hero.velx;                      //if player hits wall wall hit position                      //right wall  //                    if (hero.x >= 550 - 89) {  //                        //move player when hits wall  //                        hero.x = 550 - 89;  //                        console.log("right hit")  //                    }                        //if player moves left                  } else {                      //movieng speed                      hero.velx = -10;                      //player sprite movien left                      hero.img = img2;                      //player movieng x postion + movieng speed                      hero.x += hero.velx;                      //if player hits wall on left side  //                    if (hero.x <= 0) {  //                        console.log("lef hit")  //                        hero.x = 0;  //                    }                  }                  }          if (hero.animate == true) {                  gamearea.context.drawimage(hero.img, hero.currentframe, 0, 70, 103, hero.x, hero.y, 70, 100);          }else{              gamearea.context.drawimage(hero.img, 0, 0, 70, 103, hero.x, hero.y, 70, 100);          }      },      collisiondetection: function(x,y,width,height){                              var myleft = hero.x;          var myright = hero.x + (70);          var mytop = hero.y;          var mybottom = hero.y + (100);                    var otherleft = x;          var otherright = x + (width);          var othertop = y;          var otherbottom = y + (height);  //        console.log(width)              //right           if(myright == otherleft && mybottom > othertop && mytop < otherbottom){  //                console.log("hero right side tuch")                  hero.x = hero.x - 10  //                console.log(hero.x)              }          //top          if(mytop == otherbottom && myright > otherleft && myleft < otherright){  //                console.log("hero top side tuch")  //                hero.y = hero.y + 10                              }          //bottom          if(mybottom == othertop && myleft < otherright && myright > otherleft){  //                console.log("hero bottom side tuch")  //                hero.y = hero.y - 10    //                console.log(hero.y)  //                console.log(otherbottom)          }  //      //left          if(myleft == otherright && mybottom > othertop && mytop < otherbottom){                         hero.x = hero.x + 10             console.log("hero left side tuch")             }                          },      stopme: function (e) {          if (e.keycode == 37 || e.keycode == 39) {              hero.animate = false;          }      },      moveme: function (e) {          if (e.keycode == 32 && !hero.jumping) {              hero.jumping = true;              //boyvely jump height              hero.vely = -20;          }          if (e.keycode == 39) { //right                hero.dir = "right";  //            console.log(hero.x)              hero.animate = true;          }          if (e.keycode == 37) { //left              hero.dir = "left";              hero.animate = true;          }      }  }    function renderin(){      gamearea.context.drawimage(img3, 0, 0,720,500);  //    gamearea.context.drawimage(hero.img, hero.currentframe, 0, 70, 103, hero.x, hero.y, 70, 100);  //    console.log(hero.x)  //    ctx.drawimage(boyimg, 0, 0, 89, 103, boyx, boyy, 89, 103);  }    function updategamearea(){  //    console.log(hero.x)      gamearea.clear();      renderin();      optiones.animateplayer();      map.renderobject();  }

<body onload="startgame()">    </body>