gpt4 book ai didi

javascript - JS的雷区出了问题

转载 作者:行者123 更新时间:2023-11-28 02:57:15 25 4
gpt4 key购买 nike

我正在创建一个地雷游戏,我试图每次在一个随机位置放置 10 个炸弹。问题是有时同一 block 可以放置 2 个或更多炸弹,导致游戏中的炸弹少于 10 个。我怎样才能避免这种情况?

我已经尝试将所有炸弹位置保存在一个数组中,并且每次都将新的炸弹位置与所有过去的炸弹位置进行比较,但 id 不起作用。

这是我的代码:

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;
}
* {
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>

已解决:

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]);
return random_num = bombs_do_not_repeat();
}
}
return random_num;
}

最佳答案

您正在递归调用 bombs_do_not_repeat(),但始终忽略递归结果,无论是否重复,都只使用首先选择的内容。

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

random_num = bombs_do_not_repeat();

关于javascript - JS的雷区出了问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46382070/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com