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，而只是传递了运动（已经根据键码确定了运动）。

一意孤行

function GetWeekNumberOfMonth ($date){
    echo $date -> format('d.m.Y');
    //define current year, month and day in numeric
    $_year = $date -> format('Y');
    $_month = $date -> format('n');
    $_day = $date -> format('j');
    $_week = 0; //count of weeks passed
    for ($i = 1; $i < $_day; $i++){
        echo "\n\n-->";
        $_newDate = mktime(0,0,1, $_month, $i, $_year);
        echo "\n";
        echo date("d.m.Y", $_newDate);
        echo "-->";
        echo date("N", $_newDate);
        //on sunday increasing weeks passed count
        if (date("N", $_newDate) == 7){
            echo "New week";
            $_week += 1;
        }

    }
    return $_week + 1; // as we are counting only passed weeks the current one would be on one higher
}

$date = new DateTime("2019-04-08");
echo "\n\nResult: ". GetWeekNumberOfMonth($date);

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;
}

Answer 3

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

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>

div内的弹跳球

3 个答案: