HTML and CSS Reference
In-Depth Information
ballvy =-ballvy;
}
if (nbally < inboxboundy) {
nbally = inboxboundy;
ballvy = -ballvy;
}
ballx = nballx;
bally = nbally;
}
You might say that not much actually happens here and youd be correct. The variables
ballx
and
bally
are modified to be used later when things get drawn to the canvas.
It is not obvious from this code, but do keep in mind that vertical values (y values) increase going down
the screen and horizontal values (x values) increase going from left to right.
Validation
Caution: As of this writing, some validation works in Chrome, and perhaps other browsers, but not in
Firefox.
HTML5 provides new facilities for validating form input. The creator of a form can specify that an input field
is of type
number
as opposed to
text,
and HTML5 will immediately check that the user/player entered a
number. Similarly, we can specify
max
and
min
values. The code for the form is
<form name="f" id="f" onSubmit="return change();">
Horizontal velocity <input name="hv" id="hv" value="4" type="number" min="-10"
max="10" />
<br>
Vertical velocity <input name="vv" id="vv" value="8" type="number" min="-10"
max="10"/>
<input type="submit" value="CHANGE"/>
</form>
The input is still text, that is, a string of characters, but the values are to be text that can be interpreted as
a number in the indicated range.
Other types of input include "email" and "URL" and it is very handy to have HTML5 check these. Of course,
you can check any character string to see if its a number using
isNumber
and more complicated coding,
including
regular expressions
(patterns of characters that can be matched against), to check for valid e-
mail addresses and URLs. One common tactic for checking an e-mail address is to make the user type it in
twice so you can compare the two and make sure the user hasnt made any mistakes.
We want to take advantage of the work HTML5 will do for us, but we also want to let the user/player know if
something is wrong. You can use HTML5 and CSS to do this, by specifying a style for valid and invalid
input.
input:valid {background:green;}
input:invalid {background:red;}
