试图用JS创建一个记忆游戏
试图用JS创建一个记忆游戏
提问于 2022-08-28 19:14:34
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>
我正在尝试创建一个游戏，玩家应该点击框，并在电脑后重复订单。有9个单元格，一旦游戏开始，玩家将按照他应该重复的顺序看到突出显示的单元格。问题是，在我的代码中，所有的单元格都是一次高亮显示的，而它们应该是单独高亮显示的，在它们之间只有几秒钟。我怎么才能解决这个问题？
回答 1
Stack Overflow用户
发布于 2022-08-28 19:29:04
问题是您的setTimeout...代码没有等待，它工作异步。
我的方法是将showCell函数封装到承诺中。
async function showCell(index) {
const promise = new Promise(resolve => {
CELLS[index].classList.add("active");
setTimeout(() => {
CELLS[index].classList.remove("active");
resolve();
}, 750);
});
return promise;
}然后，在for-循环的每一步都要等待这个承诺：
async function showLevel() /// shows the level
{
for (let i = 0; i < level[counter].length; i++) {
await showCell(level[counter][i]);
//^^^^^ await here is important
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73521514
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号