尝试用JS创建memory游戏
[英]Trying to create a memory game with JS
问题描述
const CELLS = document.getElementsByClassName("cell"); /// Getting the cells from the HTML let counter = -1; /// Counter so I can go over each level. let level = [ [], [], [], [] ]; /// There are 4 empty levels in the array which are going to be filled eventually with random numbers representing the index of the cells function generateLvl(n) /// filling the level with n number of index values { counter++; for (let i = 0; i < n; i++) { level[counter].push(Math.ceil(Math.random() * (n - 0) + 0)); } } function showCell(index) /// receives the index and highlights the cell for few milliseconds { CELLS[index].classList.add("active"); setTimeout(() => { CELLS[index].classList.remove("active"); }, 750); } function showLevel() /// shows the level { for (let i = 0; i < level[counter].length; i++) { showCell(level[counter][i]); /// calls showCell function and sends values of the current level to highlight its cells } } generateLvl(3); showLevel();
.game-box { display: flex; justify-content: center; }.game-table { display: grid; grid-template-columns: 200px 200px 200px; }.cell { width: 200px; height: 200px; border: 1px solid black; }.active { background-color: green; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <title>Memory Game</title> </head> <body> <div class="game-box"> <div class="game-table"> <div class="cell cell-1"></div> <div class="cell cell-2"></div> <div class="cell cell-3"></div> <div class="cell cell-4"></div> <div class="cell cell-5"></div> <div class="cell cell-6"></div> <div class="cell cell-7"></div> <div class="cell cell-8"></div> <div class="cell cell-9"></div> </div> </div> <script src="./js/game.js"></script> </body> </html>
I am trying to create a game where the player is supposed to click on the boxes and repeat the order after the computer.
我正在尝试创建一个游戏，玩家应该单击框并在计算机之后重复该命令。 There are 9 cells and once the game starts the player sees highlighted cells by the order which he is supposed to repeat.有 9 个单元格，一旦游戏开始，玩家就会按照他应该重复的顺序看到突出显示的单元格。 The problem is that with my code all the cells are highlighted at once while they are supposed to be highlighted separately with few seconds between them.问题是，在我的代码中，所有单元格都会同时突出显示，而它们之间应该以几秒钟的时间分别突出显示。 How can I fix this?我怎样才能解决这个问题？
1 个解决方案
解决方案1
2 2022-08-28 19:29:04
The problem is your setTimeout... piece of code is not awaited, it works asynchronoulsy.问题是你的setTimeout...一段代码没有等待，它异步工作。
My approach would be to wrap showCell function into Promise .我的方法是将showCell function 包装到Promise中。
async function showCell(index) {
const promise = new Promise(resolve => {
CELLS[index].classList.add("active");
setTimeout(() => {
CELLS[index].classList.remove("active");
resolve();
}, 750);
});
return promise;
}
Then you have to await this promise at each step in your for-loop:然后你必须在你的 for 循环中的每一步等待这个 promise：
async function showLevel() /// shows the level
{
for (let i = 0; i < level[counter].length; i++) {
await showCell(level[counter][i]);
//^^^^^ await here is important
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.