gpt4 book ai didi

javascript - 延迟更改颜色两次的问题

转载 作者:行者123 更新时间:2023-12-01 01:36:07 24 4
gpt4 key购买 nike

我最近开始了我的前端之旅,我想使用 HTML、CSS 和 JavaScript 创建一个类似于“Simon Says”的简单游戏。

我希望应用程序将第一个字段标记为绿色以显示序列,然后 - 在短暂的延迟之后 - 将其更改回默认颜色(白色)。然后与第二个按钮、第三个按钮...等相同。

结果我得到了这个:

function showFields() {
for( var x = 0; x<computerSeq.length; x++) {

field[computerSeq[x]].style.backgroundColor = "green";

setTimeout(() => {
field[computerSeq[x]].style.backgroundColor = "white";
}, 1000);
}
}

但是,它并没有像我想象的那样工作,因为背景仍然是白色的。我附上下面的其余代码: https://codepen.io/jhrwekuh/pen/wYrYgV

最佳答案

问题在于,您在超时结束之前增加了循环,导致程序因索引未定义而崩溃。

在超时内,您需要引用 x - 1 而不是 x:

setTimeout(() => {
field[computerSeq[x - 1]].style.backgroundColor = "white";
}, 1000);

$(document).ready(() => {
let computerSeq = [];
let playerSeq = [];
const field = document.querySelectorAll('.field');
const button = document.getElementById('startButton');
let computerField;
let roundNumber = 0;
let failed = 0;
let running = 0;
var interval;
var currentfield;

function newField() {
computerField = Math.floor(Math.random() * 4);
computerSeq.push(computerField);
}

function showFields() {
for (var x = 0; x < computerSeq.length; x++) {
field[computerSeq[x]].style.backgroundColor = "green";
setTimeout(() => {
field[computerSeq[x - 1]].style.backgroundColor = "white";
}, 1000);
}
}

button.addEventListener("click", () => {
$('#round').text('1');
roundNumber = 1;
button.style.display = "none";
running = 1;

if (running == 1) {
newField();
showFields();
console.log(computerSeq);
}

});
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
color: white;
}

#title {
font-size: 40px;
text-align: center;
padding: 30px;
text-shadow: 2px 2px black;
}

body {
background-color: rgb(0, 75, 145);
}

.game-wrapper {
background-color: rgb(20, 0, 110);
text-align: center;
.table {
background-color: rgb(0, 71, 165);
.row {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#row1 {
padding-top: 60px;
}
#row2 {
padding-bottom: 60px;
}
.field {
width: 100px;
height: 100px;
background-color: white;
margin: 5px;
transition: 500ms ease;
box-shadow: 2px 2px rgb(78, 78, 78);
}
.field:hover {
cursor: pointer;
background-color: rgb(185, 185, 185);
}
}
.info-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 30px 0;
font-size: 30px;
.score-wrapper {
margin-right: 30px;
}
button {
background-color: rgb(40, 0, 104);
border: 1px solid rgb(0, 0, 26);
font-size: 25px;
width: 200px;
border-radius: 5px;
transition: 500ms ease;
}
button:hover {
cursor: pointer;
}
.info {
align-self: center;
margin-left: 30px;
}
}
}
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Memo Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js"></script>
</head>

<body>

<h1 id="title">The Memo Game</h1>
<div class="game-wrapper">
<div class="table">
<div class="row" id="row1">
<div class="field" id="field1"></div>
<div class="field" id="field2"></div>
</div>
<div class="row" id="row2">
<div class="field" id="field3"></div>
<div class="field" id="field4"></div>
</div>
</div>

<div class="info-wrapper">
<div class="score-wrapper">
<h3>Round:</h3>
<p id="score">0</p>
</div>
<button id="startButton" type="button">START</button>
<div class="info">No one's turn</div>
</div>
</div>
</body>

</html>

这可以在CodePen上看到 here

关于javascript - 延迟更改颜色两次的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52807486/

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