时间戳

首页 > 解决方案 > 为二维数组创建一个带有嵌套循环的追逐盒游戏区域，仅输出 1 行正方形

javascript - 为二维数组创建一个带有嵌套循环的追逐盒游戏区域，仅输出 1 行正方形

问题描述

我正在创建一个简单的追逐框游戏，但我真的坚持在 gameArea 方格上，我想制作一个 3*8 的 gameArea 方格，但它只能创建 1*24 方格。

我尝试只使用 gameArea 宽度来制作一个水平的正方形数组，但它垂直输出 24 个正方形，我还将游戏框的宽度更改为右侧，但仍然保持相同的输出。这是我的代码：

let box = {};
const score = document.querySelector(".score");
const gameAreaEle = document.querySelector(".gameArea");
const gameArea = gameAreaEle.getBoundingClientRect();
let squares = [];
let gamebox = {
  x: Math.floor(gameArea.width / 100),
  y: Math.floor(gameArea.height / 100)
}
document.addEventListener("DOMContentLoaded", build);

function build() {
  box = document.createElement("div");
  box.classList.add("box");
  box.x = gameArea.top;
  box.y = gameArea.left;
  box.style.top = box.y + "px";
  box.style.left = box.x + "px";
  gameAreaEle.appendChild(box);
  let counter = 1;
  for (let y = 0; y < gamebox.y; y++) {
    for (let x = 0; x < gamebox.x; x++) {
      squares[counter] = document.createElement("div");
      squares[counter].innerHTML = counter;
      squares[counter].classList.add("square");
      gameAreaEle.appendChild(squares[counter]);
      counter++;
    }
  }
  console.log(box);
}
.gameArea {
  width: 800px;
  height: 300px;
}

.score {
  font-size: 3em;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

.square {
  position: relative;
  border: 1px solid #ddd;
  width: 98px;
  height: 98px;
  display: block;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  font-size: 24px;
  color: #ddd;
}

.active {
  background-color: green;
  color: white;
}
<!doctype html>
<html>

<head>
  <title>JavaScript</title>
  <meta charset="utf-8" />
</head>

<body>
  <div class="gameArea"></div>
  <div>Score :<span class="score">0</span></div>
</body>

</html>

我希望在游戏区域中输出 3*8 的方格是有人考虑过的，我只是糊涂了。

标签： javascripthtml

解决方案

您的正方形应显示为内联块而不是块，并将游戏区域的宽度减小到 300 像素，以便您在每行上获得 3 个框，并使您的高度为 800 像素，以便获得 3x8 框

let box = {};
const score = document.querySelector(".score");
const gameAreaEle = document.querySelector(".gameArea");
const gameArea = gameAreaEle.getBoundingClientRect();
let squares = [];
let gamebox = {
  x: Math.floor(gameArea.width / 100),
  y: Math.floor(gameArea.height / 100)
}
document.addEventListener("DOMContentLoaded", build);

function build() {
  box = document.createElement("div");
  box.classList.add("box");
  box.x = gameArea.top;
  box.y = gameArea.left;
  box.style.top = box.y + "px";
  box.style.left = box.x + "px";
  gameAreaEle.appendChild(box);
  let counter = 1;
  for (let y = 0; y < gamebox.y; y++) {
    for (let x = 0; x < gamebox.x; x++) {
      squares[counter] = document.createElement("div");
      squares[counter].innerHTML = counter;
      squares[counter].classList.add("square");
      gameAreaEle.appendChild(squares[counter]);
      counter++;
    }
  }
  console.log(box);
}
.gameArea {
  width: 300px;
  height: 800px;
}

.score {
  font-size: 3em;
}

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

.square {
  position: relative;
  border: 1px solid #ddd;
  width: 98px;
  height: 98px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
  font-size: 24px;
  color: #ddd;
}

.active {
  background-color: green;
  color: white;
}
<!doctype html>
<html>

<head>
  <title>JavaScript</title>
  <meta charset="utf-8" />
</head>

<body>
  <div class="gameArea"></div>
  <div>Score :<span class="score">0</span></div>
</body>

</html>

推荐阅读