CodeBreaker/codeBreaker.html at master · jdhart7/CodeBreaker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!doctype html>
<html lang="en">
<head>
	<meta name = "viewport" content = "width=device-width, initial-scale=1">
	<script src="setup.js"></script>
	<script src="logic.js"></script>
	<link rel = "stylesheet" type = "text/css" href = "codeStyle.css">
    <title>Code Breaker</title>

</head>
<body>

	<center>
	<div style = "background-color: #EBAA79; border-radius: 15px; width: 600px; max-width: 95%; margin-top: 10px; padding-top: 10px;">
		<div id = "answerSpace">
			<div class = "symbols" id = "ans1" style = "background-color: grey;"></div>
			<div class = "symbols" id = "ans2" style = "background-color: grey;"></div>
			<div class = "symbols" id = "ans3" style = "background-color: grey;"></div>
			<div class = "symbols" id = "ans4" style = "background-color: grey;"></div>
			<div class = "clue" style = "background-color: #EBAA79; border-color: #EBAA79;">
			</div><div class = "clue" style = "background-color: #EBAA79; border-color: #EBAA79;"></div>
			<div class = "clue" style = "background-color: #EBAA79; border-color: #EBAA79;"></div>
			<div class = "clue" style = "background-color: #EBAA79; border-color: #EBAA79;"></div>
		</div>

		<div id = "guessSpace"></div>

		<div class = "gameSpace" id = "space">
			<div>
				<div class = "symbols" id = "pl1" onClick="changeColor(this);" style = "cursor: pointer;">0</div>
				<div class = "symbols" id = "pl2" onClick="changeColor(this);" style = "cursor: pointer;">0</div>
				<div class = "symbols" id = "pl3" onClick="changeColor(this);" style = "cursor: pointer;">0</div>
				<div class = "symbols" id = "pl4" onClick="changeColor(this);" style = "cursor: pointer;">0</div>
				<div class = "clue" style = "background-color: #EBAA79; border-color: #EBAA79;"></div>
				<div class = "clue" style = "background-color: #EBAA79; border-color: #EBAA79;"></div>
				<div class = "clue" style = "background-color: #EBAA79; border-color: #EBAA79;"></div>
				<div class = "clue" style = "background-color: #EBAA79; border-color: #EBAA79;"></div>
				<br />
				<button id = "btn" onClick = "checkArrays();">
					Submit Guess
				</button>
			</div>
		</div>
	</div>
	</center>

	<div id = "myModal" class = "modal">
		<div class = "modal-content" id = "modal-content">
		</div>
	</div>

	<div style = "margin: 4vw;">
	<h1>How to play:</h1>
	<p>The goal of the game is to figure out a four-digit code generated by the computer. The code is made up of four colored circles. There are 6 possible colors: green,
		blue, red, yellow, black, and purple. Colors can be repeated in the code. Change the color of the circle on screen by clicking on it. When you are satisfied with your
		guess, click "Submit Guess." If your guess is correct, the grey circles at the top will show you the winning pattern and a message will tell you your score. If your
		guess is incorrect, the guess will be placed above the controls. Some circles may appear beside your guess if you got something right. A black circle represents a
		correct color in the correct position. A white circle represents a correct color in an incorrect position. Colors are only represented once in the hints (for example,
		if there are two green circles in the solution but your guess only has one, you will only recieve one circle) and the hints will not indicate which color was right (if
		you guess the second color correctly, the first block will be black). Example: if you guessed green, green, blue, red and the code was green, green,
		red, green, your guess would appear above the controls with two black circles and a white circle (the two greens were correct and the red was in the wrong
		position).<br /><br />To see the code, click <a href = "https://github.com/jdhart7/CodeBreaker/" target = "_blank" rel = "noopener nereferrer">HERE</a>.</p>
	</div>

</body>
</html>