-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
executable file
·197 lines (189 loc) · 10.4 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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" id="view_meta">
<meta name="msapplication-TileImage" content="images/app/icons/favicon.png" />
<link rel="shortcut icon" type="images/vnd.microsoft.icon" href="images/app/icons/favicon.ico" sizes="16x16 32x32 48x48 64x64 128x128" />
<meta name="apple-mobile-web-app-status-bar-style" content="white" />
<meta name="apple-mobile-web-app-title" content="MondriPong">
<meta property="og:title" content="MondriPong" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="MondriPong" />
<meta property="og:image" content="images/pongdrian.gif" />
<link rel="icon" type="image/png" href="images/app/icons/favicon.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/icons/mondripong-01.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/icons/mondripong-02.png" />
<link rel="apple-touch-icon-precomposed" href="ryuzine/icons/mondripong-03.png" />
<title>MondriPong</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body onresize="setTimeout(scaleGame,500);" onorientationchange="setTimeout(scaleGame,500);">
<div id="bezelmask"></div>
<div id="gamebox" class="game_a _1player">
<canvas id="game" width="400" height="400"></canvas>
<div id="controllers" class="game_a">
<button id="p1up" class="controller player1color"><span>▲</span></button>
<button id="p1dn" class="controller player1color"><span>▼</span></button>
<button id="p2up" class="controller player2color ai"><span>▲</span></button>
<button id="p2dn" class="controller player2color ai"><span>▼</span></button>
</div>
<div id="splash" class="screen in">
<h1 class="header yellow centertext noborder">MondriPong</h1>
<div class="banner lineblock yellow"><div class="spacebox"></div></div>
<div class="version lineblock blue"><p>v<span id="version">1.3</span></p></div>
<div class="buttonblock center lineblock red"><button id="playnow" class="red">PLAY!</button></div>
<div class="buttonblock bottom left lineblock yellow"><button id="opt_screen" class="yellow">Options</button></div>
<div class="buttonblock bottom right lineblock blue"><button id="about_screen" class="blue">About</button></div>
<div class="footer lineblock white">Copyright 2016 K.M. Hansen, KMHcreative.com</div>
</div>
<div id="options" class="screen out">
<h1 class="header yellow bordered">Options<button class="back blue">Home</button></h1>
<div class="contentbox">
<fieldset>
<legend>Game Mode</legend>
<label>Layout:
<select id="gamemode" class="red">
</select>
</label>
<label> Players:
<select id="numplayers" class="yellow">
<option value="1">1 Player</option>
<option value="2">2 Player</option>
</select>
</label>
<label>Game Type:
<select id="playrounds" class="blue">
<option value="1">Single Game</option>
<option value="3">Tournament (3 Rounds)</option>
<option value="5">Tournament (5 Rounds)</option>
<option value="7">Tournament (7 Rounds)</option>
<option value="9">Tournament (9 Rounds)</option>
</select>
</label>
</fieldset>
<fieldset>
<label>Audio:
<div><input type="checkbox" value="1" id="muteaudio"/> Mute Sound FX</div>
</label>
</fieldset>
<fieldset>
<legend>Screen Mode</legend>
<label id="togglefs">View: <button id="fullscreen" onclick="toggleFullScreen();" class="red">Enter Fullscreen</button></label>
<label>Game Scaling:
<select id="views" class="black">
<option value="0">Original Size</option>
<option value="1">FIT if Too Small</option>
<option value="2">SCALE Up/Down</option>
<option value="3">FILL Window</option>
</select>
</label>
<label>Fade Bezel:
<select id="bezel" class="white">
<option value="0">Opaque</option>
<option value="0.25">25% Fade</option>
<option value="0.50">50% Fade</option>
<option value="0.75">75% Fade</option>
<option value="1.0">100% Fade</option>
</select>
<label>Background Art:
<div><input type="checkbox" value="1" id="realart"/> Use Paintings</div>
</fieldset>
<fieldset>
<legend>Difficulty</legend>
<label>Speed:
<select id="startspeed" class="yellow">
<option value="15">Easy</option>
<option value="30" selected>Normal</option>
<option value="60">Fast</option>
</select>
</label>
<label>Increase Speed:
<select id="difficulty" class="red">
<option value="0">Never</option>
<option value=".01" selected>Slowly</option>
<option value=".02">Moderately</option>
<option value=".04">Quickly</option>
<option value=".08">Very Quickly</option>
<option value=".10">Insanely Fast</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Game Controls:</legend>
<p>Use on-screen controls or use keyboard:</p>
<p class="redplayer"><span class="oh">Left</span><span class="ov">Bottom</span>: A = Up : Z = Down</p>
<p class="bluplayer"><span class="oh">Right</span><span class="ov">Top</span>: ↑ = Up : ↓ = Down</p>
<p>ESC key quits current game</p>
</fieldset>
</div>
</div>
<div id="about" class="screen out">
<h1 class="header blue bordered">About<button class="back yellow">Home</button></h1>
<div class="contentbox">
<h3>Piet Mondrian</h3>
<figure class="right"><img src="images/143px-Piet_Mondrian.jpg"/>
<figcaption>Piet Mondrian (<a href="https://commons.wikimedia.org/w/index.php?curid=5184523" target="_blank">source</a>)</figcaption>
</figure>
<p><strong>Pieter Cornelis "Piet" Mondriaan</strong> (1872-1944) was a Dutch painter and contributor to the
<em>De Stijl</em> art movement and group best known for his "Neoplastic" style.</p>
<p>After moving to France in 1911 he changed the spelling of his last name to "Mondrian" intent on joining the Paris avant-garde, where he encountered
the "Cubist" style of Picasso and Braque. However, it wasn't until the 1920's that he became known for the non-representational style he termed "neoplasticism," which
consisted of a white background intersected by a grid of horizontal and vertical black lines and blocks of primary colors. <a href="https://en.wikipedia.org/wiki/Piet_Mondrian" target="_blank">Read More...</a>
<h3>Mondrian Pong GIFs</h3>
<img src="images/mondripong_ani.gif"/>
<p>The first joke combining Mondrian's signature style with the classic arcade game "Pong" came from user "Custard" in March 2010 as part of the b3ta.com board's "<a href="http://www.b3ta.com/challenge/makeartmoreawesome/popular" target="_blank">Make Art More Awesome</a>" challenge.</p>
<img src="images/pongdrian.gif"/>
<p>The second animated GIF to circulate the Internet riffing on this same joke was "Pongdrian" by user "HappyToast" in March 2016 as part of the b3ta.com board's "<a href="http://www.b3ta.com/challenge/gameart/popular">Video Game Art</a> challenge.</p>
<h3>Playable MondriPong Game</h3>
<p>After the first animated GIF saw a revival of social media sharing in January 2016, designer K.M. Hansen was surprised a Google search didn't turn up a playable version and set out to create one.</p>
The starting point for this game was an HTML5 Canvas tutorial and, of course, the animated GIF itself. A subsequent update added a game mode based on the later animated GIF.</p>
<p>Version 1.5 adds four new game modes that now allow you to play <em>actual</em> Mondrian compositions! There is also an option to use images of the original paintings as the game backgrounds. The new additions are:</p>
<div class="gallery">
<figure class="left">
<img src="images/comp_10.jpg"/>
<figcaption>Composition No. 10 (1942)</figcaption>
</figure>
<figure class="right">
<img src="images/comp_a.jpg"/>
<figcaption>Composition A (1923)</figcaption>
</figure>
</div>
<div class="gallery">
<figure class="left">
<img src="images/comp_BRY_Litho.jpg"/>
<figcaption>Composition in Blue, Red and Yellow Lithograph (1921)</figcaption>
</figure>
<figure class="right">
<img src="images/comp_RBYG.jpg"/>
<figcaption>Composition with Red, Blue and Yellow-Green (1920)</figcaption>
</figure>
</div>
<h3>Credits</h3>
<p>Original code based on "Pong" tutorial by <a href="http://blog.mailson.org/2013/02/simple-pong-game-using-html5-and-canvas/" target="_blank">Mailson</a></p>
<h3>GitHub Contributors:</h3>
<div id="team">
<p>(automatically populated)</p>
</div>
<p>You can contribute to or fork this project on <a href="https://github.com/kmhcreative/MondriPong" target="_blank">GitHub</a></p>
<h2>License</h2>
<p>This game is published under an <a href="LICENSE" target="_blank">MIT License</a>. If you contribute to the code please make sure
it is compatible with this license. Fonts are under a SIL <a href="fonts/Comfortaa/OFL.txt" target="_blank">Open Font license</a>.</p>
</div>
</div>
<div id="gameover" class="screen out">
<h1 id="notice" class="header yellow centertext noborder">Game Over!</h1>
<div class="banner lineblock yellow"><div class="spacebox"></div></div>
<div id="winbox" class="player1color">RED WINS ROUND 5!!</div>
<div id="continuegame" class="buttonblock bottom left lineblock red"><button class="red">Continue</button></div>
<div id="playagain" class="buttonblock bottom left lineblock blue"><button class="blue">Play Again</button></div>
<div id="quitgame" class="buttonblock bottom right lineblock black"><button class="black">Quit</button></div>
</div>
<div id="ready">Ready...</div>
</div>
</body>
<script src="js/mondripong.js"></script>
</html>