This repository has been archived by the owner on Dec 27, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhome.html
135 lines (125 loc) · 3.69 KB
/
home.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html>
<!--COP2111C
ASSIGNMENT 1
GROUP 2
Johnny Burnette, Ester Sims, Derek Christian, David Gonzalez
Using the Canvas API, create a game of the team's choice.
The game must include the following:
Instructions on how to play the game.
A save & resume later option.
A leaderboard of highest scores obtained in the game.
Highest scores for the game need only be available for a browser on a computer.
The name of the player, score obtained and date achieved must be displayed on the leaderboard.
-->
<head>
<meta charset="utf-8">
<title>Memory Game team project 1</title>
<style type="text/css">
body {
margin: 0 auto;
text-align: center;
border-radius: 5px;
background-color: #f2f2f2;
color: #436CB9;
padding: 40px;
}
button {
background-color: #436CB9;
color: white;
padding: 10px ;
margin: 5px 0;
border: none;
border-radius: 4px;
cursor: pointer;
box-shadow: 10px 10px 5px grey;
}
button:hover {
background-color: lightblue;
}
canvas {
border: solid 1px grey;
}
#game_container {
clear: left;
}
#rules {
margin-left: 150px;
text-align: left;
float: left;
display: block;
}
ul{
list-style-type: none;
}
#scoreboard{
float:right;
margin-right:150px;
border: #000 1px solid;
border-radius: 3px;
}
td { border: #000 1px solid; }
</style>
</head>
<body>
<h1>Match Game</h1>
<div id="rules">
<h2>Game Rules</h2>
<ul>
<li>The objective of the game is to find all the pairs in the least moves</li>
<li>Click on any two cards.</li>
<li>If the two images match, you got a pair.</li>
<li>If they don't match, they will be turned face down.</li>
<li>Remember what was on each card and where it was.</li>
<li>The game is over when all the cards have been matched.</li>
<li>The player with least moves will be the highest score.</li>
<li>Every time you start a new game, a random selection of the cards ensures a different game</li>
</ul>
</div>
<table id="scoreboard">
<th id="title">Scoreboard</th>
<tr>
<tr><th id="rank">Ranking</th><th id="name">Player Name</th><th>Move Count</th><th>Date</th></tr>
<td>1st</td><td id="1st"></td><td id="score1st"></td><td id="dateOne"></td>
</tr>
<tr>
<td>2nd</td><td id="2nd"></td><td id="score2nd"></td><td id="dateTwo"></td>
</tr>
<tr>
<td>3rd</td><td id="3rd"></td><td id="score3rd"></td><td id="dateThree"></td>
</tr>
</table>
<div id="game_container">
<p id="greet"></p>
<p id="matchCounter"></p>
<p id="moveCounter"></p>
<p id="winGame"></p>
<canvas id="gameboard"></canvas>
</div>
<script>
//capture the name of the player and store his name - Prompt for name
var name = '';
function captureName() {
while (name == '' || name == null) {
name = prompt('What is your name? ');
}
alert('Welcome! ' + name + ', Click ok to start the game');
var greeting = document.getElementById('greet');
greeting.innerHTML = 'Player: ' + name;
}
window.onload = captureName();
</script>
<script type="text/javascript" src="match.js"></script>
<script type="text/javascript">
getMatchCount();
getMoveCount();
</script>
<div>
<br /> <br />
<button type="button" onclick="saveGame()">Save Game</button>
<button type="button" onclick="restoreGame()">Resume Saved Game</button>
<button type="button" onclick="newGame()">Start New Game</button>
</div>
<br /><br />
</body>
</html>