Question

嘿我用一个移动的盒子做了一个游戏。当我按下ENTER时我需要帮助我希望盒子复制它的形状并保持在我按下ENTER的位置。我也想要它，所以盒子不能移动到屏幕的宽度和高度之外。

＆＃13;

#box {
  background-color: #FF002F;
  height: 35px;
  width: 35px;
  position: absolute;
}

body {
  background-color: #BDBFBF;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="game.css">
</head>

<body>

  <div id="box"></div>


  <script>
    document.addEventListener("keydown", test);
    var boxS = document.querySelector("#box");
    var radius = boxS.clientWidth / 2;
    console.log(radius);

    var boxY = (window.innerHeight / 2) - radius;
    var boxX = (window.innerWidth / 2) - radius;
    boxS.style.top = boxY + "px";
    boxS.style.left = boxX + "px";




    function test(event) {
      console.log(event.keyCode);
      var keyCode = event.keyCode;

      var boksSize = 35;
      /*var xMin = 0;
      var xMax = screenWidth - boxRadius;
      var yMin = 0;
      var yMax = screenHeigth - boxRadius; */

      if (keyCode === 87 || keyCode === 38 && boxY > boksSize) {
        boxY -= 35;
        boxS.style.top = boxY + "px";
      } else if (keyCode === 68 || keyCode === 39) {
        boxX += 35;
        boxS.style.left = boxX + "px";
      } else if (keyCode === 37 || keyCode === 65) {
        boxX -= 35;
        boxS.style.left = boxX + "px";
      } else if (keyCode === 40 || keyCode === 83) {
        boxY += 35;
        boxS.style.top = boxY + "px";
      }
    }
  </script>
</body>

</html>

＆＃13;

Answer 1

你走了。尝试试验参数。在JSFIDDLE中，我不得不在某个地方添加来自系数而不能在边界之后...因此，它更像guidline，但你必须增强方法才能自己在每个监视器上工作。

https://jsfiddle.net/12914t27/

    <body>

  <div id="box"></div>


  <script>

    var shadows =0;
    document.addEventListener("keydown", test);
    var boxS = document.querySelector("#box");
    var radius = boxS.clientWidth / 2;
    console.log(radius);

    var boxY = (window.innerHeight / 2) - radius;
    var boxX = (window.innerWidth / 2) - radius;
    boxS.style.top = boxY + "px";
    boxS.style.left = boxX + "px";




    function test(event) {
      console.log(event.keyCode);
      var keyCode = event.keyCode;

      var boksSize = 35;
      /*var xMin = 0;
      var xMax = screenWidth - boxRadius;
      var yMin = 0;
      var yMax = screenHeigth - boxRadius; */

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

      if (keyCode === 87 || keyCode === 38 && boxY > boksSize) {
       if (!(boxY-document.getElementById('box').clientHeight <=0)){
          boxY -= 35;
          boxS.style.top = boxY + "px";}

      } else if (keyCode === 68 || keyCode === 39) {
      if (!(boxX+document.getElementById('box').clientWidth*2 >=window.innerWidth)){
         boxX += 35;
        boxS.style.left = boxX + "px";}



      } else if (keyCode === 37 || keyCode === 65) {
      if (!(boxX-document.getElementById('box').clientWidth <=0)){
          boxX -= 35;
        boxS.style.left = boxX + "px";}



      } else if (keyCode === 40 || keyCode === 83) {
        if (!(boxY+document.getElementById('box').clientHeight*2 >=window.innerHeight)){

            boxY += 35;
        boxS.style.top = boxY + "px";
         }

      }

      else if (keyCode === 13) {
// Your existing code unmodified...
var iDiv = document.createElement('div');
iDiv.id = 'shadow'+shadows;
iDiv.className = 'shadowbox';
iDiv.style.top = boxS.style.top;
iDiv.style.left = boxS.style.left;
iDiv.style.left = boxS.style.left;
document.getElementsByTagName('body')[0].appendChild(iDiv);
shadows++;

      }
    }
  </script>
</body>

CSS

#box {
  background-color: #FF002F;
  height: 35px;
  width: 35px;
  position: absolute;
}
.shadowbox {
  background-color: #555555;
  height: 35px;
  width: 35px;
  position: absolute;
}

body {
  background-color: #BDBFBF;
}

//编辑我忘了一件事：为盒子添加z-index:1，为盒子添加z-index:2，这样盒子就在创建的盒子上而不在它们后面，所以你总能看到原来的盒子< / p>

Javascript框复制自己

1 个答案: