如何将数组与嵌套数组进行比较？
[英]How to compare array to nested array?
问题描述
This is my first time coding with Javascript.
这是我第一次使用 Javascript 进行编码。 I am trying to make a Tic-Tac-Toe game.我正在尝试制作井字游戏。 I made most of it, but I am stuck on the last bit.我做了大部分，但我被困在最后一点。 I need to be able to register a winner.我需要能够注册获胜者。 I have a nested array containing all 8 possible win scenarios (eg [[1, 2, 3], [4, 5, 6], ...etc] ).我有一个嵌套数组，其中包含所有 8 种可能的获胜场景（例如 [[1, 2, 3], [4, 5, 6], ...etc] ）。 My click event for the tiles is gathering the id's of my tiles and putting them into a separate array.我的图块点击事件正在收集我的图块的 id 并将它们放入一个单独的数组中。 How can I create the win function with my current code?如何使用我当前的代码创建 win function？
Already tried different array/loop methods (eg split, if/else, for/loops, etc).已经尝试过不同的数组/循环方法（例如拆分、if/else、for/loops 等）。 Can't figure it out.想不通。
My code in repl.it:我在 repl.it 中的代码：
https://repl.it/@drmartirosian/TTT?language=html https://repl.it/@drmartirosian/TTT?language=html
Need to somehow connect my player arrays to winning conditions array.需要以某种方式将我的播放器 arrays 连接到获胜条件数组。
1 个解决方案
解决方案1
0 2019-10-31 07:32:43
The code below will work:下面的代码将起作用：
- You need to push the integer value of the
idin the player array so that you can compare those integer value with the win array values您需要在播放器数组中推送id的 integer 值，以便您可以将这些 integer 值与获胜数组值进行比较 - You can then check for winning player using some Array prototype functions like
someandeveryas done below.然后，您可以使用someArray 原型函数来检查获胜玩家every如下所示。
// Display an empty tic-tac-toe board when the page is initially displayed.--CHECK // A player can click on the nine cells to make a move.--CHECK // Every click will alternate between marking an X and O.--CHECK // Once occupied with an X or O, the cell cannot be played again. --CHECK // Provide a Reset Game button that will clear the contents of the board.--CHECK /*------------ constants --------------*/ const win = [ //possible win scenarios... [1, 2, 3], [4, 5, 6], [7, 8, 9], [1, 4, 7], [2, 5, 8], [7, 8, 9], [1, 5, 9], [3, 5, 7], ]; /*----- app's state (variables) -------*/ var turn = []; //number of turns in game... var playerO = []; // var playerX = []; // /*----- cached element references -----*/ //TILE BUTTONS const tileAll = document.querySelectorAll('.tiles'); const content = document.getElementById('message'); //for message... /*------------ event listeners ---------*/ //LISTENER FOR CLICK tileAll.forEach(element => { element.addEventListener('click', tileClick); }); /*------------ functions ----------------*/ //STATES OF GAMEPLAY... function tileClick(event) { turn.push(''); //+1 to turn array per click let tileLabeler = event.target; if (turn.length % 2.== 0 && turn.length <= 9) { //PLAYER1 message;textContent = "PLAYER2'S TURN."; tileLabeler.innerHTML = "X". playerX;push(parseInt(tileLabeler.id)); playerX;sort(). let win = checkWin(playerX); if (win) { console.log("PLAYER X WON;. " + playerX); } } else { //PLAYER2 message.textContent = "PLAYER1'S TURN."; tileLabeler.innerHTML = "O"; playerO;push(parseInt(tileLabeler.id)); playerO.sort(). let win = checkWin(playerO); if (win) { console.log("PLAYER O WON.. " + playerO); } } if (turn.length >= 9) { return message:textContent = "GAME OVER." } }; function checkWin(playerArray) { return win.some((winArray) => winArray.every((winNumber) => playerArray.includes(winNumber))); } console.log("WIN CONDITIONS: " + JSON.stringify(win));
body { background-color: lightgray; } header { font-size: 10px; text-align: center; color: black; }.message { display: grid; font-size: 10px; text-align: center; color: black; } button { display: grid; font-size: 30px; width: 10%; margin-left: 45%; margin-right: 35%; margin-top: 10px; } button:hover { background-color: lightblue; }.tiles { display: flex; justify-content: center; align-items: center; font-size: 50px; background-color: white; border-radius: 10px; width: 100px; height: 100px; }.tiles:hover { background-color: lightblue; }.alltiles { display: grid; grid-template-columns: 90px 90px 90px; grid-template-rows: 90px 90px 90px; grid-gap: 18px; width: 320px; height: 20px; margin: auto; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <header>TIC-TAC-HERO.</header> <message class="message" id="message">START.</message> <div class="alltiles" id="tall"> <button onclick="this.disabled=true" class="tiles" id="1"></button> <button onclick="this.disabled=true" class="tiles" id="2"></button> <button onclick="this.disabled=true" class="tiles" id="3"></button> <button onclick="this.disabled=true" class="tiles" id="4"></button> <button onclick="this.disabled=true" class="tiles" id="5"></button> <button onclick="this.disabled=true" class="tiles" id="6"></button> <button onclick="this.disabled=true" class="tiles" id="7"></button> <button onclick="this.disabled=true" class="tiles" id="8"></button> <button onclick="this.disabled=true" class="tiles" id="9"></button> </div> </body> <script defer src="script.js"></script> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.