需要设置if，where数组不等于以前的数组编号

时间：2018-01-02 19:37:36

标签： javascript html css arrays

我正在尝试通过做一些简单的项目来学习Javascript。我在这里做BINGO卡发生器。它随机生成数字，在每一列中最小数量增加15，并且它工作正常，但我无法理解我应该如何识别数组中数字的重复，这样如果它找到重复，它应该再次运行代码。

这是代码：

var numArr = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var newNumArr = new Array();
var num = 0;

function initialize() {
	for(i = 0; i < 24; i++) {
	  fillCard(i);
	}
}

function fillCard(i) {
	newNumArr[i] = Math.floor((Math.random() * 15 + numArr[i] * 15) + 1);
   if(newNumArr[num] != true) {
      document.getElementById('d' + i).innerHTML = num;
      newNumArr[num] = true;
    } else {
      fillCard(i);
    }
}
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: #ee9ca7;
	overflow: hidden;
	font-family: 'Fjalla One', sans-serif;
}

div#info {
	float: left;
	width: 30%;
	margin: 4.5vh auto;
}

p {
	font-family: 'PT Sans', sans-serif;
	margin-left: 5vw;
	margin-right: 2.5vw;
	line-height: 1.5;
	font-size: 1vw;
	text-align: justify;
	justify-content: inter-word;
}

p span{
	font-size: 1.5vw;
	font-weight: 600;
}

h1 {
	font-size: 7.5vw;
	text-align: center;
	margin: 0;
}

input {
	background-color: transparent;
	border: 3px solid #1565c0;
	border-radius: 5px;
	font-size: 2vh;
	width: 65%;
	height: 5vh;
	font-family: 'Fjalla One', sans-serif;
	text-align: center;
	margin-left: 5vw;
	margin-bottom: 1vh;
	position: relative;
}

input:hover {
	background-color: #1e88e5;
}

div#bingoCard {
	box-sizing: border-box;
	margin-top: 3vw;
	width: 40%;
	float: left;
}

div#bingoCard table{
	position: absolute;
	margin: 0 auto;
}

div#bingoCard table td {
	text-align: center;
	width: 7.5vw;
	height: 15vh;
	background-color: #076585;
	color: #fafafa;
	font-size: 24px;
	border-radius: 5px;
}

div#bingoCard table td:hover {
	background-color: #1e88e5;
}

.disabled {
	background: #2196f3 !important;
	border: 5px solid #1565c0;
	box-sizing: border-box;
}
<!-- 
BINGO kortelių generatorius ir žaidimas.
Sugeneruoja nepasikartojančius skaičius kiekviename langelyje.

Pirmas stulpelis 1 - 15;
Antras stulpelis 16 - 30;
Trečias stulpelis 31 - 45;
Ketvirtas stulpelis 46 - 60;
Penktas stulpelis 61 - 75;

Vidurinis lentelės langelis iškarto turi būti užimtas.

Galimybė nusistatyti, kiek skaičių bus išridenta.
Paspaudus 'START', pradedami ridenti skaičiai, kas 5 sek. naujas skaičius.
Atsiranda mygtukas 'B!NGO'.
Žymime išridentus skaičius.

KKOMBINACIJOS:
  Stulpeliai:
    d0 d1 d2 d3 d4;
    d5 d6 d7 d8 d9;
    d10 d11 d12 d13 d14;
    d15 d16 d17 d18 d19;
    d20 d21 d22 d23 d24;

  Eilutės:
    d0 d5 d10 d15 d20;
    d1 d6 d11 d16 d21;
    d2 d7 d12 d17 d22;
    d3 d8 d12 d18 d23;
    d4 d9 d13 d19 d24;

  Įstrižainės:
    d0 d6 d12 d18 d24;
    d4 d8 d12 d16 d20;


Surinkus vieną iš kombinacijų, spaudžiame 'B!NGO'.

Tuomet PROGRAMA TIKRINA:
Išridentus skaičius;
Pažymėtus skaičius;
Ar išridenti ir pažymėti skaičiai sutampa;
Ar sutampantys skaičiai sudaro kokią nors kombinaciją.

Jei sudaro, tai pranešama, kad buvo laimėta.
Jei nesudaro, tai neleidžiama žymėti skaičių 10 sekundžių.

Pasibaigus visiems ridenamiems skaičiams, baigiamas žaidimas.

Tikrinama ar yra sudarytos kombinacijos,
nežiūrint į tai ar yra pažymėtas skaičius.

Jei buvo išridentas skaičius, bet nepažymėtas,
jis pažymimas kita spalva.
-->

<!DOCTYPE html>
<html>
<head>
	<title>B!NGO - Online BINGO Card Generator</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">  
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <div id="info">
    <h1>B!NGO</h1>
    <p><span>Rules of BINGO:</span><br>
    You have to stamp the cells which has numbers same as numbers that appear
	on the right side. When you stamp a column, a row or diagonally press
	BINGO!</p>
	<input type="button" name="numbers" value="GENERATE" id="generate"
		   onclick="initialize();">
    <input type="button" name="play" value="START">
    <input type="button" name="print" value="PRINT">
    <p id="test"></p>
  </div>
  
  <div id="bingoCard">
    <table>
      <tr>
      	<td id="d0" class="lowest"></td>
      	<td id="d5" class="low"></td>
      	<td id="d10" class="mid"></td>
      	<td id="d14" class="high"></td>
      	<td id="d19" class="highest"></td>
      </tr>
      <tr>
      	<td id="d1" class="lowest"></td>
      	<td id="d6" class="low"></td>
      	<td id="d11" class="mid"></td>
      	<td id="d15" class="high"></td>
      	<td id="d20" class="highest"></td>
      </tr>
      <tr>
      	<td id="d2" class="lowest"></td>
      	<td id="d7" class="low"></td>
      	<td class="mid disabled">FREE</td>
      	<td id="d16" class="high"></td>
      	<td id="d21" class="highest"></td>
      </tr>
      <tr>
      	<td id="d3" class="lowest"></td>
      	<td id="d8" class="low"></td>
      	<td id="d12" class="mid"></td>
      	<td id="d17" class="high"></td>
      	<td id="d22" class="highest"></td>
      </tr>
      <tr>
      	<td id="d4" class="lowest"></td>
      	<td id="d9" class="low"></td>
      	<td id="d13" class="mid"></td>
      	<td id="d18" class="high"></td>
      	<td id="d23" class="highest"></td>
      </tr>
    </table>
  </div>

  <script src="main.js"></script>
</body>
</html>

我编辑了JS文件。现在它可以工作，但只有3次，如果我想更多次生成新数字，它什么都不做。

2 个答案:

答案 0 :(得分：0)

你可以检查随机生成的数字是否存在于数组中。如果它存在，那么只需得到另一个随机数，它将确保你不会得到重复，如下所示。 让我知道这是否有帮助

var numArr = new Array(0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,3,3,3,3,3,4,4,4,4,4);
var newNumArr = new Array();
var num = 0;

function initialize() {
	for(i = 0; i < 24; i++) {
	  fillCard(i);
	}
}

function fillCard(i) {
	 var temp = findNonDuplicateRandom()
   
   
   newNumArr[i]=temp;
    if(newNumArr[i] != true) {
      document.getElementById('d' + i).innerHTML = newNumArr[i];
    } else {
      fillCard(i);
    }
}

function findNonDuplicateRandom(){
  var isDuplicate=false;
   var temp = Math.floor((Math.random() * 15 + numArr[i] * 15) + 1);
   
   var x=newNumArr.find(t=>t==temp);
   if(x){
      //console.log("duplicate"+temp);
        return findNonDuplicateRandom();
      }
     else
     {
       //console.log("no duplicate"+temp);
       return temp;
      }

   
}
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: #ee9ca7;
	overflow: hidden;
	font-family: 'Fjalla One', sans-serif;
}

div#info {
	float: left;
	width: 30%;
	margin: 4.5vh auto;
}

p {
	font-family: 'PT Sans', sans-serif;
	margin-left: 5vw;
	margin-right: 2.5vw;
	line-height: 1.5;
	font-size: 1vw;
	text-align: justify;
	justify-content: inter-word;
}

p span{
	font-size: 1.5vw;
	font-weight: 600;
}

h1 {
	font-size: 7.5vw;
	text-align: center;
	margin: 0;
}

input {
	background-color: transparent;
	border: 3px solid #1565c0;
	border-radius: 5px;
	font-size: 2vh;
	width: 65%;
	height: 5vh;
	font-family: 'Fjalla One', sans-serif;
	text-align: center;
	margin-left: 5vw;
	margin-bottom: 1vh;
	position: relative;
}

input:hover {
	background-color: #1e88e5;
}

div#bingoCard {
	box-sizing: border-box;
	margin-top: 3vw;
	width: 40%;
	float: left;
}

div#bingoCard table{
	position: absolute;
	margin: 0 auto;
}

div#bingoCard table td {
	text-align: center;
	width: 7.5vw;
	height: 15vh;
	background-color: #076585;
	color: #fafafa;
	font-size: 24px;
	border-radius: 5px;
}

div#bingoCard table td:hover {
	background-color: #1e88e5;
}

.disabled {
	background: #2196f3 !important;
	border: 5px solid #1565c0;
	box-sizing: border-box;
}
<!DOCTYPE html>
<html>
<head>
	<title>B!NGO - Online BINGO Card Generator</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">  
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <div id="info">
    <h1>B!NGO</h1>
    <p><span>Rules of BINGO:</span><br>
    You have to stamp the cells which has numbers same as numbers that appear
	on the right side. When you stamp a column, a row or diagonally press
	BINGO!</p>
	<input type="button" name="numbers" value="GENERATE" id="generate"
		   onclick="initialize();">
    <input type="button" name="play" value="START">
    <input type="button" name="print" value="PRINT">
    <p id="test"></p>
  </div>
  
  <div id="bingoCard">
    <table>
      <tr>
      	<td id="d0" class="lowest"></td>
      	<td id="d5" class="low"></td>
      	<td id="d10" class="mid"></td>
      	<td id="d14" class="high"></td>
      	<td id="d19" class="highest"></td>
      </tr>
      <tr>
      	<td id="d1" class="lowest"></td>
      	<td id="d6" class="low"></td>
      	<td id="d11" class="mid"></td>
      	<td id="d15" class="high"></td>
      	<td id="d20" class="highest"></td>
      </tr>
      <tr>
      	<td id="d2" class="lowest"></td>
      	<td id="d7" class="low"></td>
      	<td class="mid disabled">FREE</td>
      	<td id="d16" class="high"></td>
      	<td id="d21" class="highest"></td>
      </tr>
      <tr>
      	<td id="d3" class="lowest"></td>
      	<td id="d8" class="low"></td>
      	<td id="d12" class="mid"></td>
      	<td id="d17" class="high"></td>
      	<td id="d22" class="highest"></td>
      </tr>
      <tr>
      	<td id="d4" class="lowest"></td>
      	<td id="d9" class="low"></td>
      	<td id="d13" class="mid"></td>
      	<td id="d18" class="high"></td>
      	<td id="d23" class="highest"></td>
      </tr>
    </table>
  </div>

  <script src="main.js"></script>
</body>
</html>

答案 1 :(得分：0)

这样的事情应该这样做。我已经简化了一些并添加了一些注释，希望能帮助您更好地理解逻辑。

仅供参考，因为您没有重置newNumArr上的initialize，因此它最终将所有数字都标记为已使用。

// keep a list of the numbers that have already been used
var usedNumbers = [];

function initialize() {
  // reset the list each time generate is clicked
  usedNumbers = []; 
	for(i = 0; i < 24; i++) {
	  fillCard(i);
	}
}

function fillCard(i) {
  var valueFound = false;
  // keep trying to get a random value until we find a unique one
  while (!valueFound) {
    var num = Math.ceil((Math.random() + Math.floor(i / 5)) * 15);
    // only continue if the random number is not already present
    if(usedNumbers.indexOf(num) === -1) {
      document.getElementById('d' + i).innerHTML = num;
      // add this number to the array of used numbers
      usedNumbers.push(num);
      valueFound = true;
    }
  }
}
html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	background-color: #ee9ca7;
	overflow: hidden;
	font-family: 'Fjalla One', sans-serif;
}

div#info {
	float: left;
	width: 30%;
	margin: 4.5vh auto;
}

p {
	font-family: 'PT Sans', sans-serif;
	margin-left: 5vw;
	margin-right: 2.5vw;
	line-height: 1.5;
	font-size: 1vw;
	text-align: justify;
	justify-content: inter-word;
}

p span{
	font-size: 1.5vw;
	font-weight: 600;
}

h1 {
	font-size: 7.5vw;
	text-align: center;
	margin: 0;
}

input {
	background-color: transparent;
	border: 3px solid #1565c0;
	border-radius: 5px;
	font-size: 2vh;
	width: 65%;
	height: 5vh;
	font-family: 'Fjalla One', sans-serif;
	text-align: center;
	margin-left: 5vw;
	margin-bottom: 1vh;
	position: relative;
}

input:hover {
	background-color: #1e88e5;
}

div#bingoCard {
	box-sizing: border-box;
	margin-top: 3vw;
	width: 40%;
	float: left;
}

div#bingoCard table{
	position: absolute;
	margin: 0 auto;
}

div#bingoCard table td {
	text-align: center;
	width: 7.5vw;
	height: 15vh;
	background-color: #076585;
	color: #fafafa;
	font-size: 24px;
	border-radius: 5px;
}

div#bingoCard table td:hover {
	background-color: #1e88e5;
}

.disabled {
	background: #2196f3 !important;
	border: 5px solid #1565c0;
	box-sizing: border-box;
}
<!-- 
BINGO kortelių generatorius ir žaidimas.
Sugeneruoja nepasikartojančius skaičius kiekviename langelyje.

Pirmas stulpelis 1 - 15;
Antras stulpelis 16 - 30;
Trečias stulpelis 31 - 45;
Ketvirtas stulpelis 46 - 60;
Penktas stulpelis 61 - 75;

Vidurinis lentelės langelis iškarto turi būti užimtas.

Galimybė nusistatyti, kiek skaičių bus išridenta.
Paspaudus 'START', pradedami ridenti skaičiai, kas 5 sek. naujas skaičius.
Atsiranda mygtukas 'B!NGO'.
Žymime išridentus skaičius.

KKOMBINACIJOS:
  Stulpeliai:
    d0 d1 d2 d3 d4;
    d5 d6 d7 d8 d9;
    d10 d11 d12 d13 d14;
    d15 d16 d17 d18 d19;
    d20 d21 d22 d23 d24;

  Eilutės:
    d0 d5 d10 d15 d20;
    d1 d6 d11 d16 d21;
    d2 d7 d12 d17 d22;
    d3 d8 d12 d18 d23;
    d4 d9 d13 d19 d24;

  Įstrižainės:
    d0 d6 d12 d18 d24;
    d4 d8 d12 d16 d20;


Surinkus vieną iš kombinacijų, spaudžiame 'B!NGO'.

Tuomet PROGRAMA TIKRINA:
Išridentus skaičius;
Pažymėtus skaičius;
Ar išridenti ir pažymėti skaičiai sutampa;
Ar sutampantys skaičiai sudaro kokią nors kombinaciją.

Jei sudaro, tai pranešama, kad buvo laimėta.
Jei nesudaro, tai neleidžiama žymėti skaičių 10 sekundžių.

Pasibaigus visiems ridenamiems skaičiams, baigiamas žaidimas.

Tikrinama ar yra sudarytos kombinacijos,
nežiūrint į tai ar yra pažymėtas skaičius.

Jei buvo išridentas skaičius, bet nepažymėtas,
jis pažymimas kita spalva.
-->

<!DOCTYPE html>
<html>
<head>
	<title>B!NGO - Online BINGO Card Generator</title>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">  
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <div id="info">
    <h1>B!NGO</h1>
    <p><span>Rules of BINGO:</span><br>
    You have to stamp the cells which has numbers same as numbers that appear
	on the right side. When you stamp a column, a row or diagonally press
	BINGO!</p>
	<input type="button" name="numbers" value="GENERATE" id="generate"
		   onclick="initialize();">
    <input type="button" name="play" value="START">
    <input type="button" name="print" value="PRINT">
    <p id="test"></p>
  </div>
  
  <div id="bingoCard">
    <table>
      <tr>
      	<td id="d0" class="lowest"></td>
      	<td id="d5" class="low"></td>
      	<td id="d10" class="mid"></td>
      	<td id="d14" class="high"></td>
      	<td id="d19" class="highest"></td>
      </tr>
      <tr>
      	<td id="d1" class="lowest"></td>
      	<td id="d6" class="low"></td>
      	<td id="d11" class="mid"></td>
      	<td id="d15" class="high"></td>
      	<td id="d20" class="highest"></td>
      </tr>
      <tr>
      	<td id="d2" class="lowest"></td>
      	<td id="d7" class="low"></td>
      	<td class="mid disabled">FREE</td>
      	<td id="d16" class="high"></td>
      	<td id="d21" class="highest"></td>
      </tr>
      <tr>
      	<td id="d3" class="lowest"></td>
      	<td id="d8" class="low"></td>
      	<td id="d12" class="mid"></td>
      	<td id="d17" class="high"></td>
      	<td id="d22" class="highest"></td>
      </tr>
      <tr>
      	<td id="d4" class="lowest"></td>
      	<td id="d9" class="low"></td>
      	<td id="d13" class="mid"></td>
      	<td id="d18" class="high"></td>
      	<td id="d23" class="highest"></td>
      </tr>
    </table>
  </div>

  <script src="main.js"></script>
</body>
</html>

相关问题
最新问题