HTML and CSS Reference
In-Depth Information
placed back at the starting position and “regenerated” with a new velocity. It acts the same as a newly
created particle, so your fountain will flow forever.
You should play around with this effect; it's simple but looks great. Have the fountain shoot off in different
directions. Make it shoot out of a wall, or even the ceiling. Change the random factors to make the fountain
wider or narrower, or one that shoots higher or lower. Try adding some wind into the mix (hint: make a
wind
variable and add it to vx).
Screen wrapping
The next common way to handle objects going out of bounds is to use screen wrapping. The concept is
simple: If an object moves off the left side of the screen, it then reappears on the right. If it moves off the
right, it comes back on the left. If it moves off the top, it comes back on the bottom. You get the idea.
Screen wrapping is similar to regeneration, in that you put the object back on the screen at a different
location. But in regeneration, you generally return all objects to the same location, making them look like
brand-new objects. In wrapping, you are usually trying to maintain the idea that this is the same object;
that it has just gone out the back door and in the front, so to speak. Thus, you generally don't change
velocity during a screen wrap.
This, again, is reminiscent of that classic game,
Asteroids
. Recall from Chapter 5 that this was one of the
problems with the spaceship animation: The ship would fly off the canvas, and it was sometimes
impossible to figure out where it was and how to get it back. With screen wrapping, the ship is never more
than a pixel from the edge of the screen.
Let's rebuild the spaceship example and add this behavior. Here's the document you'll want to use (
03-
ship-sim-2.html
), with the new code added in bold:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ship Sim 2</title>
<link rel="stylesheet" href="style.css">
<style>
#canvas {
background-color: #000000;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="utils.js"></script>
<script src="ship.js"></script>
<script>
window.onload = function () {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ship = new Ship(),
vr = 0,
vx = 0,
