-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathNIM.html
54 lines (46 loc) · 2.32 KB
/
NIM.html
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
<!--This is HTML for a browser based NIM game -->
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>NIM Game</title>
<link rel="stylesheet" href="NIM.css">
</head>
<body>
<div id = "wrapperDiv">
<button id ="NIM">NIM</button>
<button id ="theRules">the rules</button>
<div id = "introScreen" class = "screenDiv">
<h2>This is the game of NIM:</h2>
<p>The game starts with a stack of nimbs. This is a nimb: <img src="nimb.png" alt="nimb" style="width:20px;height:20px;">. On each turn you'll take one to three nimbs off the stack, then your opponent will do the same. The player who takes the last nimb off the stack is the winner.</p>
<br>
<p>You will need to chose how many nimbs you want to play with, and decide if you want to play with a friend or against the computer.</p>
<button id = "okIntro" class = "standardButton">ok</button>
</div>
<div id = "setupScreen" class = "screenDiv">
<p>How many nimbs would you like to play with?</p>
<h3>choose a number between 12 and 45</h3>
<input id="nimbNumberInput" value = "12" onfocus="this.value=''">
<p>Choose a game mode:</p>
<form action="">
<input type = "radio" class = "pT" name = "playerToggle" id="computer"><label for = "computer"><img src="Human.png" alt="Human" style="width:50px;height:50px;"><img src="Comp.png" alt="Computer" style="width:40px;height:40px;"></label>
<input type = "radio" class = "pT" name = "playerToggle" id="human"><label for = "human"><img src="Human.png" alt="Human" style="width:50px;height:50px;"><img src="Human.png" alt="Human" style="width:50px;height:50px;"></label>
<input type = "radio" class = "pT" name = "playerToggle" id="cpuOnly"><label for = "cpuOnly"><img src="Comp.png" alt="Computer" style="width:40px;height:40px;"><img src="Comp.png" alt="Computer" style="width:40px;height:40px;"></label>
</form>
<button id = "okSetup" class = "standardButton">ok</button>
</div>
<div id = "gameScreen" class = "screenDiv">
<div id = "output">Game Messages Go Here</div>
<div id = "nimStack">
</div>
<div id ="counterBox">
<p>There are</p>
<div id="nimbCounter"></div>
<p>in the stack</p>
</div>
<button id = "takeButton" class = "gameButton">Take Nim!</button><button id = "doneButton" class = "gameButton">Done!</button>
</div>
</div>
<script src="NIM.js"></script>
</body>
</html>