我想做的效果是類似貪吃蛇那樣，點擊鍵盤上下左右讓div運動，但我的js函式有問題，點擊幾次上下左右后，div開始在一個地方像變成幾個div在不停地來回振動，這是什么回事呢，求解答，還有如果想像貪吃蛇那樣去吃小的div的時候，對應的div消失應該怎么實作，謝謝！
uj5u.com熱心網友回復：
把var time = null;放 document.onkeydown事件外面宣告。每個clearInterval() 放到 setInterval() 的前面。
uj5u.com熱心網友回復：
CSS我記得不是有display屬性嗎，可以用來消失應該uj5u.com熱心網友回復：
謝謝大佬！可以了，能不能再向大佬請教一下關于大div吃小div，小div怎么消失呢，如果大佬能有空請教一下非常感謝！
uj5u.com熱心網友回復：
你發下文本形式的代碼，圖片我沒法修改和除錯uj5u.com熱心網友回復：
大佬，我直接復制代碼過來好像復制不全，有沒有其他方法發給你呀
uj5u.com熱心網友回復：
window.onload=function(){
var odiv=document.getElementsByClassName('random');
for(var i=0;i<odiv.length;i++){
var ot=document.getElementById('outer');
var w=ot.clientHeight||ot.offsetWidth,h=ot.clientHeight||ot.offsetHeight;
var x=Math.random()*w;
var y=Math.random()*h;
odiv[i].style.left=x+"px";
odiv[i].style.top=y+"px";
}
}
var time=null;
function start(){
document.onkeydown = function(ev) {
var oEvent=ev||event;
var speed = 10;
var tdiv=document.getElementById('target');
switch(oEvent.keyCode){
// 上
case 38:
clearInterval(time);
time=setInterval(function(){
tdiv.style.top = tdiv.offsetTop - speed + "px";
collide();
},30)
break;
// 下
case 40:
clearInterval(time);
time=setInterval(function(){
tdiv.style.top = tdiv.offsetTop + speed + "px";
collide();
},30)
break;
// 左
case 37:
clearInterval(time);
time=setInterval(function(){
tdiv.style.left = tdiv.offsetLeft - speed + "px";
collide();
},30)
break;
// 右
case 39:
clearInterval(time);
time=setInterval(function(){
tdiv.style.left = tdiv.offsetLeft + speed + "px";
collide();
},30)
break;
}
}
}
function collide(){
var tdiv=document.getElementById('target');
var t = tdiv.getBoundingClientRect();
var odiv=document.getElementsByClassName('random');
for(var i=0;i<odiv.length;i++){
var g = odiv[i].getBoundingClientRect();
if (!(t.left>g.right || t.right<g.left || t.top>g.bottom || t.bottom<g.top)) {
odiv[i].parentNode.removeChild(odiv[i]);
}
}
}
uj5u.com熱心網友回復：
哇，大佬，明白了，非常感謝！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/68846.html
標籤：JavaScript