ランダムな場所でブロックをスポーンする

bugfix> javascript > 投稿

画面上のランダムな場所に要素を作成しようとしていますが、いくつかの問題に直面しています。要素を作成することはできますが、ランダムな場所を作成しようとしても、何も起こりません。事前に助けてくれてありがとう。

ここに私のコードがあります：

var newObject = document.createElement("DIV");
newObject.setAttribute("class", "object");
newObject.setAttribute("id", "powerup");
document.body.appendChild(newObject);
var powerup = document.getElementById("powerup");
var object = document.getElementsByClassName("object");
for (i = 0; i < object.length; i++) {
  object[i].style.top = Math.floor(Math.random() * window.innerHeight) + 50 + "px";
  object[i].style.left = Math.floor(Math.random() * window.innerWidth) + 50 + "px";
}
function createObject() {
  var newObject = document.createElement("DIV");
  newObject.setAttribute("class", "object");
  newObject.setAttribute("id", "powerup");
  document.body.appendChild(newObject);
  for (i = 0; i < object.length; i++) {
    object[i].style.top = Math.floor(Math.random() * window.innerHeight) + 50 + "px";
    object[i].style.left = Math.floor(Math.random() * window.innerWidth) + 50 + "px";
  }
}


html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
#powerup {
  background: red;
  height: 10px;
  width: 10px;
}


<body>
  <button onclick="createObject()">Create a Block</button>
</body>

javascript

html

css

回答 2 件

  • あなたのコードでCodePenを作成しました。

    それらの要素に top を持たせるため  および left  プロパティには効果があるため、 position: absolute; を追加する必要があります   #powerup へ  要素。

    #powerup {
  background: red;
  height: 10px;
  width: 10px;
  position: absolute;
}

    また、これが意図したものかどうかはわかりませんが、JavaScriptコードは既存の #powerup ごとに新しいランダムな場所を選択しています  ボタンをクリックするたびに要素。

  • コードは正常に機能しています。各 #powerup の上部と左側を設定できます  素子。唯一の問題は、 position   #powerup の  は static です  デフォルトで。だからあなたはちょうど #powerup のCSSを変更する必要があります  への要素

    #powerup {
    background: red;
    height: 10px;
    width: 10px;
    position: relative;
}

    position: absolute  使用することもできます。要件に合ったものを選択してください。

あなたの答え

関連記事