-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpong-demo.html
167 lines (155 loc) · 6.33 KB
/
pong-demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Pong Demo</title>
<!-- Demo site CSS, not needed for PongGame library -->
<link rel="stylesheet" href="pong-demo.css">
<!-- Bootstrap: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- jQuery: Latest compiled and minified JavaScript (Bootstrap needs it, not PongGame) -->
<script src="https://code.jquery.com/jquery-2.2.0.min.js" ></script>
<!-- Bootstrap: Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- PongGame: Latest JavaScript library -->
<script src="pong.js" type="application/javascript"></script>
</head>
<body>
<div class="container">
<h1 class="page-header">
<a class="btn btn-primary" id="backButton" href="https://github.com/SMenigat/html5-pong">
<span class="glyphicon glyphicon-arrow-left"></span>
</a>
HTML5 Pong Demo
</h1>
<div class="row">
<div class="col-md-8">
<div id="canvasWrapper">
<div>
<canvas id="gameCanvas" tabindex="1"></canvas>
</div>
</div>
</div>
<div class="col-md-4" id="optionWrapper">
<h3>Controls Player1</h3>
<div class="input-group">
<div class="input-group-addon">Bat Up</div>
<input type="text" value="W" class="form-control" disabled="disabled">
</div>
<div class="input-group">
<div class="input-group-addon">Bat Down</div>
<input type="text" value="S" class="form-control" disabled="disabled">
</div>
<h3>Controls Player2</h3>
<div class="checkbox">
<label>
<input type="checkbox" onchange="toggleMultiplayer(this);" value="0">
Enable Multiplayer (activates Player2)
</label>
</div>
<div class="input-group">
<div class="input-group-addon">Bat Up</div>
<input type="text" value="O" class="form-control" disabled="disabled">
</div>
<div class="input-group">
<div class="input-group-addon">Bat Down</div>
<input type="text" value="L" class="form-control" disabled="disabled">
</div>
<h3>Themes</h3>
<button class="applyTheme btn btn-default" onclick="applyTheme('standard');">Standard Theme</button>
<button class="applyTheme btn btn-default" onclick="applyTheme('classic');">Classic Pong</button>
<button class="applyTheme btn btn-default" onclick="applyTheme('lego');">Lego Pong</button>
<button class="applyTheme btn btn-default" onclick="applyTheme('blackWhite');">Black and White</button>
<h3>Difficulty</h3>
<label class="radio-inline">
<input type="radio" name="difficulty" onclick="changeDifficulty(this);" data-difficulty="easy" checked="checked">
Easy
</label>
<label class="radio-inline">
<input type="radio" name="difficulty" onclick="changeDifficulty(this);" data-difficulty="normal">
Normal
</label>
<label class="radio-inline">
<input type="radio" name="difficulty" onclick="changeDifficulty(this);" data-difficulty="hard">
Hard
</label>
</div>
</div>
<hr />
</div>
<script>
// initialize the game
var Game = new PongGame('gameCanvas');
Game.run({
difficulty: PongGame.aiDifficulty.easy,
names: {
Player1: 'PongPlayer'
}
});
/**
* applies a theme to the running pong game & redraws the canvas to make the change visable
* @param themeName
*/
function applyTheme(themeName) {
// collection of all click-able themes
var allThemes = {
standard: {
background: 'black',
bat: 'green',
ball: 'white',
scores: 'red'
},
classic: {
background: 'black',
bat: 'green',
ball: 'green',
scores: 'gray'
},
lego: {
background: 'blue',
bat: 'yellow',
ball: 'red',
scores: 'white'
},
blackWhite: {
background: 'white',
bat: 'black',
ball: 'black',
scores: 'gray'
}
};
// apply new color config
Game.setConfiguration({
colors: allThemes[themeName]
});
// manually redraw
Game.resume();
Game.pause();
}
/**
* change event for multiplayer toggle checkbox
* @param checkbox
*/
function toggleMultiplayer(checkbox) {
Game.setMultiplayer(checkbox.checked);
// we have to rename pongbot if this is a real player now
if(checkbox.checked) {
Game.setConfiguration({
names: {
Player2: 'AnotherPongPlayer'
}
});
}
}
/**
* change event for game difficulty
* @param radio
*/
function changeDifficulty(radio) {
Game.setDifficulty(
PongGame.aiDifficulty[radio.getAttribute('data-difficulty')]
);
}
</script>
</body>
</html>