div内的弹跳球

Question

我正在尝试在div内创建一个弹跳球（它从左到右开始），但是然后我希望当用户按下键盘时它从上到下开始弹跳（这带有所有箭头，也带有：a，s，d ，w）。

似乎我的问题是当我尝试clearInterval时...但是我不知道如何解决它...

 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：我知道用帆布可以更容易，但是我想以此方式做。

Answer 1

您只需要2个功能-第一个功能可以改变移动方向并调用第二个功能，该功能可以在检查球是否到达任何边界时移动球。

 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

第一个错误是将变量设置为空值。 将其设置为空，但不能为null。 同样，您只需要为函数使用一个参数，因为您实际上从未传递过id，而只是传递了运动（已经根据键码确定了运动）。

放弃下面

 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

我终于用一个全局变量来解决我的问题，检测到哪个方向应该有球

 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>