如何解决如何检查用户选择了哪个答案并按用户顺序传递最后一个答案的索引?
在用户单击并选择答案后,我想在底部调用checkAnswer
函数,并按用户顺序传递最后一个答案的索引。如何使用gamePattern
和userClickPattern
执行此操作?如果有人可以将菜鸟指向正确的方向,将不胜感激!
let buttonColours = ["red","blue","green","yellow"];
let gamePattern = [];
let userClickedPattern = [];
$(".btn").click(function() {
let userChosenColour = this.id
userClickedPattern.push(userChosenColour);
playSound(userChosenColour);
animatePress(userChosenColour);
})
function nextSequence() {
let randomNumber = Math.floor(Math.random() * 4);
let randomChosenColour = buttonColours[randomNumber];
gamePattern.push(randomChosenColour);
$("#" + randomChosenColour).on("click",function() {
$("#" + randomChosenColour).fadeIn(100).fadeOut(100).fadeIn(100);
playSound(randomChosenColour);
level++;
$("#level-title").text("Level " + level);
})
}
function playSound(name) {
let audio = new Audio("sounds/" + name + ".mp3");
audio.play();
}
function animatePress(currentColor) {
$("#" + currentColor).addClass("pressed");
setTimeout(function() {
$("#" + currentColor).removeClass("pressed");
},100);
}
let started = false;
let level = 0;
$("body").on("keydown",function() {
if (!started) {
$("#level-title").text("level " + level);
nextSequence();
started = true;
}
})
function checkAnswer(currentLevel) {
//???
}
body {
text-align: center;
background-color: #011F3F;
}
#level-title {
font-family: 'Press Start 2P',cursive;
font-size: 3rem;
margin: 5%;
color: #FEF2BF;
}
.container {
display: block;
width: 50%;
margin: auto;
}
.btn {
margin: 25px;
display: inline-block;
height: 200px;
width: 200px;
border: 10px solid black;
border-radius: 20%;
}
.game-over {
background-color: red;
opacity: 0.8;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.pressed {
box-shadow: 0 0 20px white;
background-color: grey;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Simon</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
</head>
<body>
<h1 id="level-title">Press A Key to Start</h1>
<div class="container">
<div lass="row">
<div type="button" id="green" class="btn green">
</div>
<div type="button" id="red" class="btn red">
</div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow">
</div>
<div type="button" id="blue" class="btn blue">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="game.js" charset="utf-8"></script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。