-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathHTML5Demo.html
58 lines (52 loc) · 2.04 KB
/
HTML5Demo.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML5 Game Demo</title>
<style type="text/css">
canvas { border: 1px solid black; cursor: none; }
#canvasWrapper { margin: 50px auto; width: 700px; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="Pong.js"></script>
<script type="text/javascript" src="Paddle.js"></script>
<script type="text/javascript" src="Player.js"></script>
</head>
<body>
<div id="canvasWrapper">
<canvas id="pong" width="700" height="350">Your browser doesn't support the HTML5 element canvas.</canvas>
<br>
<div>WINS: <span id="wins">0</span> / LOSSES: <span id="losses">0</span></div>
</div>
</body>
</html>
<script type="text/javascript">
/* You can disregard most of this block below. It's basically a shim for requestAnimation frame for cross-browser
compatibility. */
// requestAnimationFrame polyfill by Erik Möller
// fixes from Paul Irish and Tino Zijdel
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
var game = new Pong(); // Creates an instance of the Pong Game
game.init(); // Calls init method of Pong instance
</script>