forked from daverix/HTML5-Pong
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (82 loc) · 3.8 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
<!DOCTYPE html>
<!--
This is the classic Pong game implemented with HTML5 canvas
Copyright (C) 2016 David Laurell
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<html>
<head>
<title>Pong in HTML5! | Daverix.net</title>
<meta name="description" content="The classic Pong game made with the HTML5 elements canvas and audio!" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" />
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<header>
<h1>Pong!</h1>
<p>Pong implemented with help of the new canvas and audio elements in HTML5!</p>
</header>
<article>
<div id="gamediv">
<div id="titleScreen">
<h1>Pong!</h1>
<p>This game is based on the HTML5 elements <b>canvas</b> and <b>audio</b>. With some simple javascript to make it work.</p>
<p>To play this game you need a modern web browser with support for HTML5. Audio only works with Firefox 3.5+ at the moment.</p>
<p class="vcard">Made by <a href="http://daverix.net/" class="url fn" target="_top" rel="me">David Laurell</a></p>
<button id="playButton">Play!</button>
</div>
<div id="playScreen">
<canvas width="640" height="360" id="gameCanvas">
<p>Your browser <b>does not</b> support HTML5!</p>
<p>Download <a href="http://firefox.com">Firefox3.6</a> for the full experience or another with good HTML5 support. The game is tested in Firefox 3.0+, Chromium 4+, Chrome 4 beta, Opera and Internet Explorer 8. To get the audio to work you are required to use Firefox for the moment.</p>
<p>Visit the <a href="http://daverix.net/projects/pong/">project page</a> for more info.</p>
</canvas>
<div id="computerScore">0</div>
<div id="playerScore">0</div>
<div class="ingamebuttons">
<button id="pauseButton">Pause</button>
<button id="soundButton">Turn off sound</button>
</div>
<div id="pauseText">Paused</div>
</div>
</div>
</article>
<footer>
<p>Tested in Firefox (version 3.5 and 3), Chromium (version 4.0.202.0) and Internet Explorer 8. Audio only work in Firefox 3.5 when I tested. Firefox 3.5 is recommended for running the game. Canvas support for Internet Explorer comes from <a href="http://code.google.com/p/explorercanvas/">ExplorerCanvas</a></p>
<p>For more cool stuff like this visit <a href="http://daverix.net">Daverix.net</a></p>
</footer>
<audio id="bounceLeft" autobuffer>
<source src="ping.wav" type="audio/x-wav" />
<source src="ping.ogg" type="audio/ogg" />
</audio>
<audio id="bounceRight" autobuffer>
<source src="pong.wav" type="audio/x-wav" />
<source src="pong.ogg" type="audio/ogg" />
</audio>
<audio id="bounceWall" autobuffer>
<source src="bom.wav" type="audio/x-wav" />
<source src="bom.ogg" type="audio/ogg" />
</audio>
<script type="text/javascript" src="game.js"></script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-8667386-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>