bouncing ball inside div

Question

I'm trying to create a bouncing ball inside a div (it start from left to right) but then i want that when user press keyup it start bounce from top to bot (this with all arrows, also with: a, s, d, w).

Seems like my problem is when i try to clearInterval... but i don't know how to fix it...

 var id=null; myMove('dreta',id); document.onkeyup = checkKey; function checkKey(e) { e = e || window.event; if (e.keyCode == '38' || e.keyCode == '87') { clearInterval(id); myMove('adalt'); } else if (e.keyCode == '40' || e.keyCode == '65') { clearInterval(id); myMove('abaix'); } else if (e.keyCode == '37' || e.keyCode == '83') { clearInterval(id); myMove('esquerra'); } else if (e.keyCode == '39' || e.keyCode == '68') { clearInterval(id); myMove('dreta'); } } function myMove(moviment,id) { var rect = ball.getBoundingClientRect(); var elem = document.getElementById("ball"); var pos = rect.left; var pos2 = rect.top; id = setInterval(frame, 5); function frame() { if(moviment=='dreta'){ if (pos == 180) { clearInterval(id); myMove('esquerra'); } else{ pos++; elem.style.left = pos + "px"; } } else if (moviment=='esquerra'){ if (pos == 0) { clearInterval(id); myMove('dreta'); } else{ pos--; elem.style.left = pos + "px"; } } else if(moviment=='adalt'){ if (pos == 0) { clearInterval(id); myMove('abaix'); } else{ pos++; elem.style.top = pos + "px"; } } else{ if (pos == 180) { clearInterval(id); myMove('adalt'); } else{ pos--; elem.style.top = pos + "px"; } } } } 

 #container { width: 200px; height: 200px; border: 1px solid #000; position: relative; } #ball { position: absolute; width: 20px; height: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: red; } 

 <div id="container"> <div id="ball"></div> </div> 

PD: i know that can be more easy with canvas but i would like to do it on this way.

Answer 1

You need only 2 functions - first func changes moving direction and calls second one, which moves a ball while checking wether a ball has reached any border.

 var id=null; var rect = ball.getBoundingClientRect(); var elem = document.getElementById("ball"); var pos_left = rect.left; var pos_top = rect.top; var h_dir = 0, v_dir = 0; document.onkeyup = checkKey; function checkKey(e) { e = e || window.event; if (e.keyCode == '38' || e.keyCode == '87') { v_dir = -1; } else if (e.keyCode == '40' || e.keyCode == '65') { v_dir = 1; } else if (e.keyCode == '37' || e.keyCode == '83') { h_dir = -1; } else if (e.keyCode == '39' || e.keyCode == '68') { h_dir = 1; } clearInterval(id); id = setInterval(frame, 5); } function frame() { if (pos_left > 179 || pos_left < 1) { h_dir *= -1; } if (pos_top < 1 || pos_top > 179) { v_dir *= -1; } pos_left += h_dir; elem.style.left = pos_left + "px"; pos_top += v_dir; elem.style.top = pos_top + "px"; } 

 #container { width: 200px; height: 200px; border: 1px solid #000; position: relative; } #ball { position: relative; width: 20px; height: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: red; } 

 <div id="container"> <div id="ball"></div> </div> 

Answer 2

The first mistake is setting your variable to a null value. Set it to empty, but not null. Also, you only need one argument for your function as you never actually pass an id, just the movement (which has already been determined based on the keycode).

Give below a go

 var id = ""; myMove('dreta'); document.onkeyup = checkKey; function checkKey(e) { e = e || window.event; if (e.keyCode == '38' || e.keyCode == '87') { clearInterval(id); id = 'adalt'; } else if (e.keyCode == '40' || e.keyCode == '65') { clearInterval(id); id = 'abaix'; } else if (e.keyCode == '37' || e.keyCode == '83') { clearInterval(id); id = 'esquerra'; } else if (e.keyCode == '39' || e.keyCode == '68') { clearInterval(id); id = 'dreta'; } myMove(id); } function myMove(moviment) { var rect = ball.getBoundingClientRect(); var elem = document.getElementById("ball"); var pos = rect.left; var pos2 = rect.top; id = setInterval(frame, 5); function frame() { if (moviment == 'dreta') { if (pos == 180) { clearInterval(id); myMove('esquerra'); } else { pos++; elem.style.left = pos + "px"; } } else if (moviment == 'esquerra') { if (pos == 0) { clearInterval(id); myMove('dreta'); } else { pos--; elem.style.left = pos + "px"; } } else if (moviment == 'adalt') { if (pos == 0) { clearInterval(id); myMove('abaix'); } else { pos++; elem.style.top = pos + "px"; } } else { if (pos == 180) { clearInterval(id); myMove('adalt'); } else { pos--; elem.style.top = pos + "px"; } } } } 

 #container { width: 200px; height: 200px; border: 1px solid #000; position: relative; } #ball { position: absolute; width: 20px; height: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: red; } 

 <div id="container"> <div id="ball"></div> </div> 

Answer 3

I finally solved my problem using a global variable wich detect wich direction should have the ball

 function myMove() { var rect = ball.getBoundingClientRect(); var elem = document.getElementById("ball"); var pos = rect.left; var pos2 = rect.top; id_interval = setInterval(frame, 5); function frame() { if(moviment=='dreta'){ if (pos == 180) { clearInterval(id_interval); moviment = 'esquerra'; myMove(); } else{ pos++; elem.style.left = pos + "px"; } } else if (moviment=='esquerra'){ if (pos == 0) { clearInterval(id_interval); moviment = 'dreta'; myMove(); } else{ pos--; elem.style.left = pos + "px"; } } else if(moviment=='adalt'){ if (pos2 == 0) { clearInterval(id_interval); moviment = 'abaix'; myMove(); } else{ pos2--; elem.style.top = pos2 + "px"; } } else{ if (pos2 == 180) { clearInterval(id_interval); moviment = 'adalt'; myMove(); } else{ pos2++; elem.style.top = pos2 + "px"; } } } } var moviment = 'esquerra'; myMove(); document.onkeyup = checkKey; function checkKey(e) { e = e || window.event; if (e.keyCode == '38' || e.keyCode == '87') { moviment = 'adalt'; } else if (e.keyCode == '40' || e.keyCode == '65') { moviment = 'abaix'; } else if (e.keyCode == '37' || e.keyCode == '83') { moviment = 'esquerra'; } else if (e.keyCode == '39' || e.keyCode == '68') { moviment = 'dreta'; } } 

 #container { width: 200px; height: 200px; border: 1px solid #000; position: relative; } #ball { position: absolute; width: 20px; height: 20px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; background: red; } 

 <div id="container"> <div id="ball"></div> </div>