I have a game in Javascript. It plays clues with buttons and the user needs to remember which buttons to click after the button is lit up and the clue plays.
I have a variable called pattern that holds an array to represent the different buttons to play in different order. Instead of having this fixed pattern I created a function that sorts the array and then I call it in the startGame function, which initiates the game. However, this time with this sorting function, although I click the correct button that is played and lit up, the game automatically quits and says “you lose” which is what happens when you press the incorrect button.
What do I do? I am guessing it has something to do with the guess function but how do I fix it?
JavaScript
x
133
133
1
//Global Contants2
3
const cluePauseTime = 333; //how long to pause in between clues4
const nextClueWaitTime = 1000; //how long to wait before starting playback of the clue sequence5
6
//Global variables7
var clueHoldTime = 500; //how long to hold each clue's light/sound8
var pattern = [2, 3, 1, 4, 6, 1, 2, 4, 3, 5];9
var progress = 0;10
var gamePlaying = false;11
var tonePlaying = false;12
var volume = 0.5;13
var guessCounter = 0;14
15
function randNum() {16
pattern.sort(() => Math.random() - Math.random() )17
18
}19
function startGame() {20
21
progress = 0;22
gamePlaying = true;23
24
document.getElementById("startBtn").classList.add("hidden");25
document.getElementById("stopBtn").classList.remove("hidden");26
27
playClueSequence();28
29
randNum();30
31
}32
33
function stopGame() {34
gamePlaying = false;35
36
document.getElementById("startBtn").classList.remove("hidden");37
document.getElementById("stopBtn").classList.add("hidden");38
}39
40
function lightButton(btn){41
document.getElementById("button"+btn).classList.add("lit")42
}43
function clearButton(btn){44
document.getElementById("button"+btn).classList.remove("lit")45
}46
47
function playSingleClue(btn){48
if(gamePlaying){49
lightButton(btn);50
playTone(btn,clueHoldTime);51
setTimeout(clearButton,clueHoldTime,btn);52
}53
}54
55
function playClueSequence(){56
guessCounter = 0;57
let delay = nextClueWaitTime; //set delay to initial wait time58
for(let i=0;i<=progress;i++){ // for each clue that is revealed so far59
console.log("play single clue: " + pattern[i] + " in " + delay + "ms")60
setTimeout(playSingleClue,delay,pattern[i]) // set a timeout to play that clue61
delay += clueHoldTime;62
delay += cluePauseTime;63
}64
}65
66
function loseGame() {67
stopGame();68
alert("Game Over. You lost.");69
}70
function winGame() {71
stopGame();72
alert("Yayyyyy, you win!!");73
}74
75
function guess(btn) {76
console.log("user guessed: " + btn);77
if (!gamePlaying) {78
return;79
}80
if (pattern[guessCounter] == btn) {81
if (guessCounter == progress) {82
if (progress == pattern.length - 1) {83
winGame();84
} else {85
progress++;86
playClueSequence();87
}88
} else {89
guessCounter++;90
}91
} else {92
loseGame();93
}94
}95
// Sound Synthesis Functions96
const freqMap = {97
1: 261.6,98
2: 329.6,99
3: 392,100
4: 466.2,101
5: 432.8,102
6: 336.2103
};104
function playTone(btn, len) {105
o.frequency.value = freqMap[btn];106
g.gain.setTargetAtTime(volume, context.currentTime + 0.05, 0.025);107
tonePlaying = true;108
setTimeout(function() {109
stopTone();110
}, len);111
}112
function startTone(btn) {113
if (!tonePlaying) {114
o.frequency.value = freqMap[btn];115
g.gain.setTargetAtTime(volume, context.currentTime + 0.05, 0.025);116
tonePlaying = true;117
}118
}119
function stopTone() {120
g.gain.setTargetAtTime(0, context.currentTime + 0.05, 0.025);121
tonePlaying = false;122
}123
124
//Page Initialization125
// Init Sound Synthesizer126
var context = new AudioContext();127
var o = context.createOscillator();128
var g = context.createGain();129
g.connect(context.destination);130
g.gain.setValueAtTime(0, context.currentTime);131
o.connect(g);132
o.start(0);133
HTML:
JavaScript
1
70
70
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="utf-8" />5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />6
<meta name="viewport" content="width=device-width, initial-scale=1" />7
8
<title>Hello!</title>9
10
<!-- import the webpage's stylesheet -->11
<link rel="stylesheet" href="/style.css" />12
13
<!-- import the webpage's javascript file -->14
<script src="/script.js" defer></script>15
</head>16
<body>17
<h1>Shah's Memory Game</h1>18
19
<p>20
Welcome to the game that will test your memory!21
</p>22
23
<button id="startBtn" onclick="startGame()">24
Start25
</button>26
<button id="stopBtn" class="hidden" onclick="stopGame()">27
Stop28
</button>29
30
<div id="gameButtonArea">31
<button32
id="button1"33
onclick="guess(1)"34
onmousedown="startTone(1)"35
onmouseup="stopTone()"36
></button>37
<button38
id="button2"39
onclick="guess(2)"40
onmousedown="startTone(2)"41
onmouseup="stopTone()"42
></button>43
<button44
id="button3"45
onclick="guess(3)"46
onmousedown="startTone(3)"47
onmouseup="stopTone()"48
></button>49
<button50
id="button4"51
onclick="guess(4)"52
onmousedown="startTone(4)"53
onmouseup="stopTone()"54
></button>55
<button56
id="button5"57
onclick="guess(5)"58
onmousedown="startTone(5)"59
onmouseup="stopTone()"60
></button>61
<button62
id="button6"63
onclick="guess(6)"64
onmousedown="startTone(6)"65
onmouseup="stopTone()"66
></button>67
</div>68
</body>69
</html>70
Advertisement
Answer
You need to increment the guessCounter every time there’s a successful guess. You cannot reset guessCounter = 0 every time you invoke the playClueSequence() function, rather clear it when you startGame(). Find the comments in the code for better clarification.
JavaScript
1
137
137
1
//Global Contants2
3
const cluePauseTime = 333; //how long to pause in between clues4
const nextClueWaitTime = 1000; //how long to wait before starting playback of the clue sequence5
6
//Global variables7
var clueHoldTime = 500; //how long to hold each clue's light/sound8
var pattern = [2, 3, 1, 4, 6, 1, 2, 4, 3, 5];9
var progress = 0;10
var gamePlaying = false;11
var tonePlaying = false;12
var volume = 0.5;13
var guessCounter = 0;14
15
function randNum() {16
pattern.sort(() => Math.random() - Math.random() )17
18
}19
function startGame() {20
21
progress = 0;22
// You can reset the guessCounter here every time you start the game23
guessCounter = 0;24
gamePlaying = true;25
26
document.getElementById("startBtn").classList.add("hidden");27
document.getElementById("stopBtn").classList.remove("hidden");28
29
playClueSequence();30
31
randNum();32
console.log(pattern.toString())33
}34
35
function stopGame() {36
gamePlaying = false;37
38
document.getElementById("startBtn").classList.remove("hidden");39
document.getElementById("stopBtn").classList.add("hidden");40
}41
42
function lightButton(btn){43
document.getElementById("button"+btn).classList.add("lit")44
}45
function clearButton(btn){46
document.getElementById("button"+btn).classList.remove("lit")47
}48
49
function playSingleClue(btn){50
if(gamePlaying){51
lightButton(btn);52
playTone(btn,clueHoldTime);53
setTimeout(clearButton,clueHoldTime,btn);54
}55
}56
57
function playClueSequence(){58
// You cannot reset the guessCounter here every time otherwise, the game will not progress59
//guessCounter = 0;60
let delay = nextClueWaitTime; //set delay to initial wait time61
for(let i=0;i<=progress;i++){ // for each clue that is revealed so far62
console.log("play single clue: " + pattern[i] + " in " + delay + "ms")63
setTimeout(playSingleClue,delay,pattern[i]) // set a timeout to play that clue64
delay += clueHoldTime;65
delay += cluePauseTime;66
}67
}68
69
function loseGame() {70
stopGame();71
alert("Game Over. You lost.");72
}73
function winGame() {74
stopGame();75
alert("Yayyyyy, you win!!");76
}77
78
function guess(btn) {79
console.log("user guessed: " + btn);80
if (!gamePlaying) {81
return;82
}83
if (pattern[guessCounter] == btn) {84
if (guessCounter == progress) {85
if (progress == pattern.length - 1) {86
winGame();87
} else {88
progress++;89
playClueSequence();90
}91
} else {92
//guessCounter++;93
}94
// You need to increment the guessCounter every time it's a successful guess to move forward to the next pattern element95
guessCounter++;96
} else {97
loseGame();98
}99
}100
// Sound Synthesis Functions101
const freqMap = {102
1: 261.6,103
2: 329.6,104
3: 392,105
4: 466.2,106
5: 432.8,107
6: 336.2108
};109
function playTone(btn, len) {110
o.frequency.value = freqMap[btn];111
g.gain.setTargetAtTime(volume, context.currentTime + 0.05, 0.025);112
tonePlaying = true;113
setTimeout(function() {114
stopTone();115
}, len);116
}117
function startTone(btn) {118
if (!tonePlaying) {119
o.frequency.value = freqMap[btn];120
g.gain.setTargetAtTime(volume, context.currentTime + 0.05, 0.025);121
tonePlaying = true;122
}123
}124
function stopTone() {125
g.gain.setTargetAtTime(0, context.currentTime + 0.05, 0.025);126
tonePlaying = false;127
}128
129
//Page Initialization130
// Init Sound Synthesizer131
var context = new AudioContext();132
var o = context.createOscillator();133
var g = context.createGain();134
g.connect(context.destination);135
g.gain.setValueAtTime(0, context.currentTime);136
o.connect(g);137
o.start(0);JavaScript
1
69
69
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="utf-8" />5
<meta http-equiv="X-UA-Compatible" content="IE=edge" />6
<meta name="viewport" content="width=device-width, initial-scale=1" />7
8
<title>Hello!</title>9
10
<!-- import the webpage's stylesheet -->11
<link rel="stylesheet" href="/style.css" />12
13
<!-- import the webpage's javascript file -->14
<script src="/script.js" defer></script>15
</head>16
<body>17
<h1>Shah's Memory Game</h1>18
19
<p>20
Welcome to the game that will test your memory!21
</p>22
23
<button id="startBtn" onclick="startGame()">24
Start25
</button>26
<button id="stopBtn" class="hidden" onclick="stopGame()">27
Stop28
</button>29
30
<div id="gameButtonArea">31
<button32
id="button1"33
onclick="guess(1)"34
onmousedown="startTone(1)"35
onmouseup="stopTone()"36
>1</button>37
<button38
id="button2"39
onclick="guess(2)"40
onmousedown="startTone(2)"41
onmouseup="stopTone()"42
>2</button>43
<button44
id="button3"45
onclick="guess(3)"46
onmousedown="startTone(3)"47
onmouseup="stopTone()"48
>3</button>49
<button50
id="button4"51
onclick="guess(4)"52
onmousedown="startTone(4)"53
onmouseup="stopTone()"54
>4</button>55
<button56
id="button5"57
onclick="guess(5)"58
onmousedown="startTone(5)"59
onmouseup="stopTone()"60
>5</button>61
<button62
id="button6"63
onclick="guess(6)"64
onmousedown="startTone(6)"65
onmouseup="stopTone()"66
>6</button>67
</div>68
</body>69
</html>