HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [184]
The code handles all four borders:
function checkBounds(){
//wrap
if (x > MAX_X){
x = MIN_X;
} // end if
if (x < MIN_X){
x = MAX_X;
} // end if
if (y > MAX_Y){
y = MIN_Y;
} // end if
if (y < MIN_Y){
y = MAX_Y;
} // end if
} // end function
The checkBounds() function depends on the constants, which helps in a couple of ways. When you look at the code, you can easily see what’s going on:
if (x > MAX_X){
x = MIN_X;
} // end if
If x is larger than the maximum value for x, set it to the minimum value. You almost can’t write it any more clearly than this. If the size of the playing surface changes, you simply change the values of the constants.
Shouldn’t you just get size values from the surface?
In a perfect world, I would extract the position values from the playing surface itself. Unfortunately, JavaScript/DOM is not a perfect animation framework. Because I’m using absolute positioning, the position of the sprite isn’t attached to the surface (as it should be) but to the main screen. It’s a little annoying, but some experimentation can help you find the right values.
Remember, when you start using absolute positioning on a page, you’re pretty much committed to it. If you’re using animation like the one described in this section, you’ll probably want to use absolute positioning everywhere or do some other tricks to make sure that the sprite stays where you want it to go without overwriting other parts of the page. Regardless, using constants keeps the code easy to read and maintain, even if you have to hack a little bit to find the specific values you need.
You probably wonder how I came up with the actual values for the constants. In some languages, you can come up with nice mathematical tricks to predict exactly what the largest and smallest values should be. In JavaScript, it’s a little tricky because the environment just isn’t that precise.
I chose a simple but effective technique. I temporarily took out the checkbounds() call and just took a look at the output to see what the values of x and y were. I looked to see how large x should be before the sprite wraps and wrote down the value on paper. Likewise, I found the largest and smallest values for y.
Once I knew these values, I simply placed them in constants. I don’t really care that the maximum value for x is 365. I just want to know that x doesn’t go past the MAX_X value when I’m messing around with it.
If the size of my playing surface changes, I just change the constants, and everything works out fine.
Reading Input from the Keyboard
You can use JavaScript to read directly from the keyboard. This trick is useful in several situations, but it’s especially handy in animation and simple gaming applications.
Figure 7-2 shows a program with a moving ball.
Figure 7-2: You can move the ball with the arrow keys.
The keyboard.html page has no buttons because the keyboard arrows are used to manage all the input.
You know what I’m going to say. Look this thing over in your browser because it just doesn’t have any charm unless you run it and mash on some arrow keys.
Building the keyboard page
The keyboard page is very much like the movement page.
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
type = ”text/css”
href = ”keyboard.css” />
Use arrow keys to move ball
style = ”position: absolute;
top: 100px;
left: 100px;
height: 25px;
width: 25px;” >
alt = “ball” />