Question

我创建了一个防御游戏，我每次都试图在随机位置投放10枚炸弹。问题在于，有时可以在同一个区域内放置2枚或更多的炸弹，导致游戏中的炸弹少于10枚。我该如何防止这种情况？

我已经尝试将所有炸弹位置保存在一个阵列中，并且每次都将新炸弹位置与过去的炸弹位置进行比较，但是id没有用。

这是我的代码：

＆＃13;

NFData

＆＃13;

var number_of_blocks = 0;
var number_of_bombs = 10;
var minefield_width = 500;
var minefield_height = 500;
var block_width = 50;
var block_height = 50;
var bombs = [];

number_of_blocks = (minefield_width * minefield_height) / (block_width * block_height);

$("#new_game").click(function() {
  create_blocks();
  create_bombs();
});

function random(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}

function create_blocks() {
  //Create the "normal blocks".
  for (var i = 0; i < number_of_blocks; i++) {
    var block = document.createElement("div");
    block.style.width = block_width + "px";
    block.style.height = block_height + "px";
    block.className = "block";
    block.id = "b" + i;
    block.onclick = function() {
      console.log(this.id);
      this.style.backgroundColor = "#ddd";
    };
    document.getElementById("field").appendChild(block);
  }
}

function create_bombs() {
  //Select a "normal block" and transform it into a "bomb block".
  for (var i = 0; i < number_of_bombs; i++) {
    var random_block = bombs_do_not_repeat();
    var bomb = document.getElementById(random_block);
    bomb.style.backgroundColor = "red";
    bomb.classList.add("bomb");
    bomb.onclick = function() {
      alert("GAME OVER");
    };
    bombs[i] = random_block;
  }
}

function bombs_do_not_repeat() {
  //Should prevent a 'bomb block' to go inside the same 'block' more than 1 time. Example:
  //CORRECT: bombs[] = "b1", "b2", "b3", "b4", "b5";
  //INCORRECT: bombs[] = "b1", "b1", "b3", "b4", "b4";
  var random_num = "b" + random(1, number_of_blocks);
  for (var j = 0; j < bombs.length; j++) {
    if (random_num == bombs[j]) {
      console.info("random_num = " + random_num + " && bombs[" + j + "] = " + bombs[j]);
      bombs_do_not_repeat();
    }
  }
  return random_num;
}

＆＃13;

* {
  list-style: none;
  font-family: sans-serif;
  margin: 0px;
}

#field {
  width: 500px;
  height: 500px;
  border: solid 1px black;
  margin: 0px auto;
  margin-top: 50px;
  overflow: auto;
  background-color: #ccc;
}

.block {
  background-color: #aaa;
  border: solid 1px #000;
  box-sizing: border-box;
  float: left;
  cursor: pointer;
}

.block:hover {
  background-color: #eee
}

.block:active {
  background-color: #ddd
}

#container {
  overflow: auto;
}

#menu {
  width: 100%;
  height: auto;
  background-color: #333;
  overflow: auto;
}

#menu li {
  float: left;
  text-align: center;
  width: 100px;
  color: white;
  cursor: pointer;
}

#menu li:hover {
  background-color: #555
}

＆＃13;

解决：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <div id="container">
    <div id="menu">
      <ul>
        <li id="new_game">New Game</li>
      </ul>
    </div>
    <div id="field"></div>
  </div>

</body>

</html>

Answer 1

你以递归方式调用bombs_do_not_repeat()，但总是忽略递归结果，只是首先选择所选择的内容，无论它是否重复。

我怀疑你的意思是分配递归的结果：

random_num = bombs_do_not_repeat();

Answer 2

我建议你将功能改为

 function bombs_do_not_repeat() {
  var check = false;
  var random_num;
    do{
      random_num = "b" + random(1, number_of_blocks);
      for (var j = 0; j < bombs.length && !check; j++) {
        if (random_num == bombs[j]) {
          console.info("random_num = " + random_num + " && bombs[" + j + "] = " + bombs[j]);
          check = true;
        }
      }
    }while(check);
  return random_num;
}

Answer 3

不是创建每个随机数而是准备随机（混洗）数组。这样的事情。

var number_of_blocks = 0;
var number_of_bombs = 10;
var minefield_width = 500;
var minefield_height = 500;
var block_width = 50;
var block_height = 50;
var bombs = [];

var blockArr = []; //helper array

number_of_blocks = (minefield_width * minefield_height) / (block_width * block_height);

$("#new_game").click(function() {
  //reset blockArr and bombs
  bombs = [];
  blockArr = [];
  //clean the field
  document.getElementById('field').innerHTML = '';
  create_blocks();
  //blockArr is now fillewd
  bombs = blockArr.sort(function() {
      return Math.random() < 0.5 ? -1 : 1;
    }) //shuffle
    .slice(0, number_of_bombs);
  //for debug purpose
  //console.log(bombs);
  create_bombs();
});

//function random(min, max) {//obsolete
//  return Math.floor(Math.random() * (max - min)) + min;
//}

function create_blocks() {
  //Create the "normal blocks".
  for (var i = 0; i < number_of_blocks; i++) {
    //fill blockArr in the samee loop
    blockArr.push(i);
    var block = document.createElement("div");
    block.style.width = block_width + "px";
    block.style.height = block_height + "px";
    block.className = "block";
    block.id = "b" + i;
    block.onclick = function() {
      console.log(this.id);
      this.style.backgroundColor = "#ddd";
    };
    document.getElementById("field").appendChild(block);
  }
}

function create_bombs() {
  //Select a "normal block" and transform it into a "bomb block".
  for (var i = 0; i < number_of_bombs; i++) {
    //var random_block = bombs_do_not_repeat(); //no need
    var bomb = document.getElementById('b' + bombs[i]); //random_block);
    bomb.style.backgroundColor = "red";
    bomb.classList.add("bomb");
    bomb.onclick = function() {
      alert("GAME OVER");
    };
    //bombs[i] = random_block;
  }
}
/*
function bombs_do_not_repeat() { //obsolete
  //Should prevent a 'bomb block' to go inside the same 'block' more than 1 time. Example:
  //CORRECT: bombs[] = "b1", "b2", "b3", "b4", "b5";
  //INCORRECT: bombs[] = "b1", "b1", "b3", "b4", "b4";
  var random_num = "b" + random(1, number_of_blocks);
  for (var j = 0; j < bombs.length; j++) {
    if (random_num == bombs[j]) {
      console.info("random_num = " + random_num + " && bombs[" + j + "] = " + bombs[j]);
      bombs_do_not_repeat();
    }
  }
  return random_num;
}
*/

* {
  list-style: none;
  font-family: sans-serif;
  margin: 0px;
}

#field {
  width: 500px;
  height: 500px;
  border: solid 1px black;
  margin: 0px auto;
  margin-top: 50px;
  overflow: auto;
  background-color: #ccc;
}

.block {
  background-color: #aaa;
  border: solid 1px #000;
  box-sizing: border-box;
  float: left;
  cursor: pointer;
}

.block:hover {
  background-color: #eee
}

.block:active {
  background-color: #ddd
}

#container {
  overflow: auto;
}

#menu {
  width: 100%;
  height: auto;
  background-color: #333;
  overflow: auto;
}

#menu li {
  float: left;
  text-align: center;
  width: 100px;
  color: white;
  cursor: pointer;
}

#menu li:hover {
  background-color: #555
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
  <div id="container">
    <div id="menu">
      <ul>
        <li id="new_game">New Game</li>
      </ul>
    </div>
    <div id="field"></div>
  </div>

</body>

</html>

带有JS的Minefield出错了

3 个答案: