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>