Question

问题很简单，但似乎我无法克服，名为“ .player”的div不应从“ .play-ground”的div中消失，它只能在其黄色空间中移动。我要实现的下一个目标是，我想要一个与红色的div大小相同的div，并显示一段时间，以便用户可以用红色的div捕捉它，然后获得积分，否则就没有得分。有什么办法吗？以及如何使div在被捕获后消失？

var a = prompt("Provide nick");
while (a === "") {
  a = prompt("Provide nick");
}
document.write("<p>Nick: " + a + "</p>");

/* -------- */ 
var ground = document.getElementsByClassName('play-ground')[0];
var player = document.getElementsByClassName('player')[0];
var points = document.getElementsByClassName('numba')[0];
var thing = document.getElementsByClassName('thing-tocatch')[0];
document.onkeydown = move;

var lefts = 0;
var tops = 0;

function move(e) {
  console.log(e.keyCode);
  if (e.keyCode == 68) {
    lefts += 100;
    player.style.left = lefts + "px";
    points.innerHTML = lefts;
  }
  if (e.keyCode == 65) {
    lefts -= 100;
    player.style.left = lefts + "px";
  }
  if (e.keyCode == 83) {
    tops += 100;
    player.style.top = tops + "px";
  }
  if (e.keyCode == 87) {
    tops -= 100;
    player.style.top = tops + "px";
  }

}

.play-ground {
  position: relative;
  background: yellow;
  width: 800px;
  height: 700px;
}

.player {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
}

.thing-tocatch {
  background: blue;
  height: 100px;
  width: 100px;
  position: absolute;
  margin: 200px 200px;
}

<div id="game">
  <div class="points">
    <h3>Points: <span class="numba">0</span></h3>
  </div>
  <div class="play-ground">
    <div class="thing-tocatch">
    </div>

    <div class="player">
    </div>
  </div>

</div>
</div>

Answer 1

我无法在此处编写整个应用，但我只想向您展示一些东西。

尝试编写代码：一个动作-一个功能。您可以像我一样看到。我将您的move函数分为两个部分：onKeyDown和movePlayer。当应用程序变大时，它将帮助您支持代码。
您应该存储主题的状态。例如，我已经创建了对象Palyer，并在其中存储了他的坐标（您使用了两个变量：lefts和tops）。如果对应用程序中的所有主题实施相同的设置会更好。例如，播放器具有以下道具：宽度，高度，x，y，颜色。地面有道具：宽度，高度，颜色。 thing还应具有与玩家相关的道具。您应该将这些状态存储为全局变量，因为您将需要在不同的函数中使用它们。

您的问题：

Next thing which I'm trying to achieve is that I want a div same size of the red one, showing up for some time, so that the user can catch it with the red one and after that he gets points otherwise doesn't. Is there any way to do it?。您的问题包含答案。您需要一个函数，该函数将绘制（document.createElement('div')）HTML元素，然后可以更改其样式。 OR ，您可以在开始之前创建thing（与播放器一样）并将其隐藏（样式display: none;）
如何使div在被捕获后消失？您可以从DOM中删除thing或将样式更改为display: none;

我建议您找到类似的应用，以检查其他开发人员如何实现类似的事情：

var a = prompt("Provide nick");
while (a === "") {
  a = prompt("Provide nick");
}
document.write("<p>Nick: " + a + "</p>");

/* -------- */ 
var ground = document.getElementsByClassName('play-ground')[0];
var player = document.getElementsByClassName('player')[0];
var points = document.getElementsByClassName('numba')[0];
var thing = document.getElementsByClassName('thing-tocatch')[0];
document.onkeydown = onKeyDown;

var Player = {x: 0, y: 0};
var STEP = 100;

function onKeyDown (e) {
  console.log(e.keyCode);

  var x = Player.x;
  var y = Player.y;

  if (e.keyCode == 68) {
    x += STEP;
  }
  if (e.keyCode == 65) {
    x -= STEP;
  }
  if (e.keyCode == 83) {
    y += STEP;
  }
  if (e.keyCode == 87) {
    y -= STEP;
  }

  movePlayer(x, y);
}

function movePlayer (x, y) {
  if (!isCoordsInsideGround(x, y)) return;

  Player.x = x || 0;
  Player.y = y || 0;

  player.style.left = Player.x + "px";
  player.style.top = Player.y + "px";
}

function isCoordsInsideGround (x, y) {
  if (x < 0 || ground.offsetWidth - STEP < x) {
    return false;
  }
  if (y < 0 || ground.offsetHeight - STEP < y) {
    return false;
  }
  return true;
}

.play-ground {
  position: relative;
  background: yellow;
  width: 800px;
  height: 700px;
}

.player {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
}

.thing-tocatch {
  background: blue;
  height: 100px;
  width: 100px;
  position: absolute;
  margin: 200px 200px;
}

<div id="game">
  <div class="points">
    <h3>Points: <span class="numba">0</span></h3>
  </div>
  <div class="play-ground">
    <div class="thing-tocatch">
    </div>

    <div class="player">
    </div>
  </div>

</div>
</div>

如何迫使div不能不走错

1 个答案: