gpt4 book ai didi

javascript - 算法停止了,我不知道为什么

转载 作者:行者123 更新时间:2023-12-03 00:57:29 25 4
gpt4 key购买 nike

嘿!我正在尝试使用 HTML、CSS 和 Javascript 编写 Pexeso 代码。我有随机生成函数(数字不能使用多次 - 我用数组解决了这个问题)。然后我有另一个函数,它调用上述函数并通过返回的 img 元素的编号 id 进行选择并设置图像源。一切看起来都正确 - IDE 和 Google Chrome 不会返回任何错误,但它仍然没有做正确的事情 - 它永远不会获取所有图像。

我正在放置代码,并在编译后显示它的外观。

HTML

<!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<img class="pexeso" src="" id="1">
<img class="pexeso" src="" id="2">
<img class="pexeso" src="" id="3">
<img class="pexeso" src="" id="4">
<img class="pexeso" src="" id="5">
<img class="pexeso" src="" id="6">
<img class="pexeso" src="" id="7">
<img class="pexeso" src="" id="8">
<img class="pexeso" src="" id="9">
<img class="pexeso" src="" id="10">
<img class="pexeso" src="" id="11">
<img class="pexeso" src="" id="12">
<img class="pexeso" src="" id="13">
<img class="pexeso" src="" id="14">
<img class="pexeso" src="" id="15">
<img class="pexeso" src="" id="16">
</div>
<script src='app.js'></script>
</body>
</html>

JS

var position;
position = new Array();

function generateNumber(){
//generates random number between 0 and 15
var number = Math.round(Math.random()*15)+1;

//checks if number is already used
for (var i = 0; i <= position.length; i++){
if (position[i] == number){
generateNumber();
}

//returns number
console.log(number);
position.push(number);
return number;
}
}

function mixPexeso(){
for (var i = 0; i <= 7; i++){
//sets images to their location and type their position
var firstImage = generateNumber();
var secondImage = generateNumber();
var image = 'img/image-'+i+'.png';

document.getElementById(firstImage).src = image;
document.getElementById(secondImage).src = image;
}
}

mixPexeso();

屏幕:https://prnt.sc/l4wr1q

最佳答案

问题:

当你发现该号码已经存在时,你应该打破循环并返回generateNumber的结果:

if (position[i] == number) {
return generateNumber();
}

替代方式:

无论如何,函数 generateNumber 可以通过删除递归调用并将整个内容包装在 IIFE 中进行封装来以更好的方式实现:

var generateNumber = (function() {
var numbers = [];

return function() {
var number;
do {
number = Math.floor(Math.random() * 16);
} while(numbers.includes(number));
numbers.push(number);
return number;
}
})();

最好的方法:

更好的方法是用数字(0 到 15)预先填充数组,将它们打乱,然后每次调用该函数时,您只需 popshift该数组中的数字:

var generateNumber = (function() {
var numbers = [];

for(var i = 0; i < 16; i++) numbers.push(i);

for(var i = 0; i < 16; i++) {
var randIndex = Math.floor(Math.random() * 16);
var temp = numbers[i];
numbers[i] = numbers[randIndex];
numbers[randIndex] = temp;
}

return function() {
return numbers.pop();
}
})();

关于javascript - 算法停止了,我不知道为什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52763363/

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