-
Notifications
You must be signed in to change notification settings - Fork 9
/
pong-tutorial.html
143 lines (132 loc) · 4.49 KB
/
pong-tutorial.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ping Pong</title>
<style type="text/css">
/* I want to start make this raw HTML file look like the game of
Pong, so I start with the CSS. Here, I set the background.
In CSS, to reference an HTML tag, merely type the tag name and
the list of rules that follows will apply to any instance of that
tag. This is called the "selector", as it selects what HTML elements
it will apply to, and there are more types of selectors than just
HTML tag names. After the selector is the "declaration group",
surrounded by curly braces, with the list of "declarations", each
ending in a semicolon (;). */
body
{
background-color: black;
margin: 0px;
padding: 0px;
}
/* Now I put one of the paddles into place. These are just rough
guesses at this point as to what these values should be. The
background-color attribute can take named colors like "red" and
"blue" or it can take RGB color values in the format of #RRGGBB,
where each of RR, GG, and BB are hexadecimal numbers for values
between 0 and 255.
Here, the selector has a hash symbol prefixing it. This identifies
the selector as an ID selector. This CSS rule will only apply to the
element that has that ID. Scroll down now to the HTML section and
you will see one of the div tags has an ID attribute set to
"player1". For the HTML element's ID attribute, the hash symbol is
not used. The only place the hash symbol is used for this purpose
is in the CSS.
*/
#player1
{
position:absolute;
top: 100px;
left: 0px;
width: 20px;
height: 200px;
background-color: #00ff00;
}
/* I'm also going to copy the #player1 rule to create a near
duplicate for player2 */
#player2
{
position:absolute;
top: 100px;
left: 400px; /* the left declaration is the only thing that differs here */
width: 20px;
height: 200px;
background-color: #00ff00;
}
/* And I finish off the style sheet with the rest of the elements
that I was looking to block out.
Here, in this declaration group for one of the score elements, I've
included rules for the font. A list of fonts like this will make the
element display in the first font that is available on the system on
which the HTML file is being viewed. Generally speaking, you should
put the font you really want up first, followed by a few fonts that
are more popular but are acceptable substitutes. Finally, there are
a few "catch all" font types that can be used just in case you don't
know what fonts the user has installed: serif, sans-serif, and monospace */
#score1
{
position: absolute;
top: 20px;
left: 175px;
font-family: fixedsys, Courier, "Courier New", monospace;
font-size: 24pt;
color: #00ff00;
}
/* I'm just copying these CSS groups. I'll worry about reducing
their redundancy later. */
#score2
{
position: absolute;
top: 20px;
left: 225px;
font-family: fixedsys, Courier, "Courier New", monospace;
font-size: 24pt;
color: #00ff00;
}
#top
{
position:absolute;
top: 0px;
left: 0px;
width: 400px;
height: 20px;
background-color: #00ff00;
}
#bottom
{
position:absolute;
top: 400px;
left: 0px;
width: 400px;
height: 20px;
background-color: #00ff00;
}
#seperator
{
position:absolute;
top: 0px;
left: 200px;
width: 20px;
height: 400px;
background-color: #00ff00;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div id="board">
<div id="player1" class="paddle"></div>
<div id="player2" class="paddle"></div>
<!-- I also fill in a value for the score elements, just so
there is something to see for the moment -->
<div id="score1" class="score">0</div>
<div id="score2" class="score">0</div>
<div id="top" class="wall"></div>
<div id="bottom" class="wall"></div>
<div id="seperator"></div>
</div>
</body>
</html>
<!-- once this is all done, we can view the file and see that it doesn't
really look right. We'll have to tweak a few things, and along the way,
remove some of the redundancy -->