-
-
Notifications
You must be signed in to change notification settings - Fork 4
/
help.html
158 lines (156 loc) · 4.4 KB
/
help.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
<html>
<head>
<link rel="icon"
type="image/png"
href="favicon.png">
<style type="text/css">
#maincanvas {
cursor:crosshair;
}
body {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
select {
background-color:black;
color:white;
}
canvas {
position:relative;
}
body {
background-color:black;
color: white;
margin-top: 0;
padding-top: 0;
border-top: 0;
}
ul {
overflow:hidden; overflow-y:scroll;
}
input {
background-color: black;
color:white;
font-size: 200%;
text-align: center;
margin-bottom: 5px;
}
input#linkInput {
background-color: black;
color:white;
font-size: 150%;
text-align: center;
margin-bottom: 5px;
padding-bottom:3px;
}
a {
color:white;
}
a.layerItem{
color: white;
background-color: black;
text-decoration: none;
width:100%;
display:block;
}
a.layerItem.selectedItem{
color: black;
background-color: white;
}
img.selected {
border: 2px solid red;
}
li.selected {
cursor:auto;
color:white;
}
a{
white-space:nowrap;
}
div.selected {
height:16px;
width:30px;
border: 2px solid red;
}
div.unselected {
height:16px;
width:30px;
border: 2px solid black;
}
img.radius {
border: 1px solid black;
}
img.selected {
border: 1px solid red;
}
select {
width:100%;
-webkit-appearance: none;
-moz-appearance: none;
}
select::-ms-expand {
display: none;
}
canvas#dropdownthumb {
border:2px solid gray;
background-color:black;
}
</style>
</head>
<body>
<h1>how to</h1>
<p>
draw a pinball table and then play it.
<p>
[ [ <a href="http://www.plingpling.org/play.html?p=177b1f589fdb9e0bcb69">example game</a> ] ]
<p>
<h2>editor</h2>
<p>
<b>C</b> : copy current image<br>
<b>V</b> : paste current image<br>
<b>Z</b> : undo<br>
<b>P</b> : play<br>
<b>+</b>/<b>-</b> : change brush<br>
<b>,</b> / <b>.</b> : cycle color palette<br>
<b>shift</b>+<b>click</b> : draw line
<p>
<table style="border:0">
<tr>
<td colspan=2 style="border:0">
<b>Controls:<b>
</td>
</tr>
<tr><td style="border:0">
<b>LEFT</b>/<b>RIGHT</b> </td><td style="border:0"> flippers</td>
</tr>
<tr>
<td style="border:0"><b>DOWN</b> </td><td style="border:0"> launcher</td>
</tr><tr>
<td style="border:0"><b>UP</b></td> <td style="border:0"> tilt</td>
</tr>
<tr>
<td style="border:0"><b>R</b> </td><td style="border:0"> restart</td>
</tr>
</table>
<p>
<h4>levels</h4>
<p>
The levels are played in order, going to the next one when you hit an exit point, until you reach a blank level - this ends the game and plays a small animation.
<p>
<h2>player</h2>
<b>F</b> : go fullscreen
<p>
<h3>How to make an updateable table? </h3>
<p> If you want to share a link to a table you've made, but still be able to update it (in case there are bugs you want to fix, or new levels you want to add), here's how you do that: <ul> <li>Click Share in the PlingPling editor as you normally would.</li> <li>Copy the ID at the end of the shareable URL that PlingPling just generated for you: <a href="http://www.plingpling.org/play.html?p=6878337">http://www.plingpling.org/play.html?p=<span style="color:magenta;font-weight:bold;">6878337</span></a>, and paste it at the end of this URL: <a href="https://gist.github.com/anonymous/6878337">https://gist.github.com/anonymous/<span style="color:magenta;font-weight:bold;">6878337</span></a>.</li> <li>If you're signed into <a href="https://github.com">GitHub</a>, you should see a button labelled Fork. Press that. (If you don't have a <a href="https://github.com">GitHub</a> account, you'll need to create one for the following to work).</li> <li>Now you have your own updatable PlingPling file! Take the ID at the end of the URL of your fork (it will be different to the one you pasted above) and perform Step 2 in reverse to find out your shareable and updatable game URL.</li> </ul> Now anytime you want to update it, just go back to the fork you made, make some changes, and the same game URL should be updated too!
<p>
<h2>source code</h2>
<p>
[ [ <a href="https://github.com/increpare/plingpling">github</a> ] ]
<p>
<hr>
<p>
made by <a href="http://www.increpare.com">increpare</a> [ support my work on <a href=https://www.paypal.me/increparegames">paypal</a> or <a href="https://www.patreon.com/increpare">patreon</a> ]
</body>
</html>