forked from christi3k/browser-pairs
/
index.html
170 lines (133 loc) · 6.05 KB
/
index.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html><html><head>
<!--
Keep scrolling down, nothing to see here, this stuff is just for the computers for now
-->
<meta content="mobilegameworkshop" name="webmaker:tags">
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="images/logo.jpg" />
<meta name="viewport" content="width=device-width,user-scalable=no">
<link rel="stylesheet" href="style.css" />
<!-- Here's the START!!!
Lessons to be covered:
- Changing images
- Changing text
- Changing colors
- Changing sound
- Changing font
- Installing or saving a game to a mobile device
-->
<!--
In this project you can create your own pair matching game by altering
some code that already contains the basic functionality. You'll see how to customize the cards, background, and also learn how to play it on several devices like a laptop, tablet, or mobile phone. On a Firefox OS phone you can even install it and play it offline.
-->
<!--
Let's get started.
1) READ THROUGH THE COMMENTS. This is a comment. Everything inside of this tag for HTML or '/*' for CSS, is not processed as code, but instead is just text comments about the code. For this project, the comments will give you instructions, hints and guides to completing the project, so skim down through the comments to get an understanding of what you are being asked to do.
2) GET ORIENTED IN THE CODE. HTML is made up of tags that look like this <p> </p>. The tags tell you something about the information contained between them. Click on the tags in the code on this side of the editor to get a description of what each tag is for.
-->
<!--
Task 1:
Why don't we start by changing the name of your site/app? Any text that goes between the <title></title> tags will show up in the top of the browser window when you go to it on a laptop/tablet and sometimes in the address bar of mobile browsers. It helps people know what page they're on. Tell the world what your game is going to be about!
eg: Kitten Match Game
-->
<title>npch's Browser Pairs — My First Mobile Game</title>
<!--
Task 2:
The below HTML is a link to an 'external' font. These fonts use open
licensing and are available for free on the web for sites (and games)
to use.
Go to https://www.google.com/fonts/ and pick a font you would like
to see in your game, then select the 'quick use' button in the box
of that font. It should provide you with a default line of code
like the one below but for your font. Copy and paste it in here,
REPLACING the line below.
Then, in order to make it work, go into your style.css file and
find the tag 'font-family' - replace 'Days One' with the name of
your new font. eg: 'Caesar Dressing'
Go check your game (refresh the page). See a difference?
-->
<link href='http://fonts.googleapis.com/css?family=Underdog' rel='stylesheet' type='text/css'>
</head>
<!--
The <body> tag is where the parts of the page you see go
-->
<body>
<!--
Every thing about the game goes into this 'div' which you can think
of like a box that holds all your web page code for the game. We give it the id 'game' so that we can address it in the css file for things
like location, style, and other ways to manipulate it visually.
-->
<div id="game">
<!-- This <header> makes the bar on the top of the game area -->
<header id="gameStats">
<p id="reset">Reset »</p>
<p id="gameScore">
Click: <span id="click">0</span>
Time: <span id="timer">0</span>
</p>
</header>
<!-- This <div> holds the cards -->
<div id="cards">
<div class="card">
<div class="face front"></div>
<div class="face back"></div>
</div> <!-- .card -->
</div> <!-- #cards -->
<!-- This <div> holds intro screen that shows when you start the app -->
<div id="gameIntro">
<div id="gamePlay" class="button">0%</div>
<div id="install" class="button">Install</div>
</div>
<!-- This <div> holds complete screen that shows when you finish the game -->
<div id="gameComplete">
<div id="result">
<p id="score"></p>
</div>
<p><a id="gameAgain" class="button" href="#">Play again</a></p>
</div>
</div>
<!--
End of the #game box
-->
<!--
These <audio> tags hold the sounds for the game. They use sounds
stored in the "sound" directory for the app, but you can use any
sound on the internet by using its url for the "src" attribute.
Task 3:
* Search for an .mp3 or .ogg audio file that is already hosted online
* Replace the url between the src="" quotation marks with the link to
your sound file
* Try your game again and see if you hear your new sound(s)!
-->
<audio class="sound">
<source src="sound/intro.ogg" type="audio/ogg; codecs=vorbis" />
<source src="sound/intro.mp3" type="audio/mpeg" />
</audio>
<audio class="sound">
<source src="http://www.freesfx.co.uk/rx2/mp3s/7/8348_1352727401.mp3" type="audio/mpeg" />
</audio>
<audio class="sound">
<source src="sound/match.ogg" type="audio/ogg; codecs=vorbis" />
<source src="sound/match.mp3" type="audio/mpeg" />
</audio>
<audio class="sound">
<source src="sound/applause.ogg" type="audio/ogg; codecs=vorbis" />
<source src="sound/applause.mp3" type="audio/mpeg" />
</audio>
<!--
Task 4:
Now that you've customized your game, try it out on various devices
like tablets, phone, laptops, and if possible a Firefox OS mobile device.
On a Firefox OS device you can install this to the phone and have an
app icon on the homescreen for it.
-->
<!-- These <script> tags load JavaScript code to control the game -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="pxloader.js"></script>
<script src="script.js"></script>
<script src="base.js"></script>
</body>
</html>