HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [192]
♦ MAX_X is a constant holding the maximum value of X. In this program, I’m only moving in one direction, so the only boundary I’m worried about is MAX_X. If the sprite moved in other directions, I’d add some other constants for the other boundary conditions.
Initializing your data
The init() function performs its normal tasks: setting up sprite variables and calling the animate() function on an interval.
function init(){
sprite = document.getElementById(“sprite”);
spriteImage = document.getElementById(“image”);
loadImages();
setInterval(“animate()”, 100);
} // end init
When you move and swap images, sometimes you have to adjust the animation interval and the distance traveled each frame so that the animation looks right. Otherwise, the sprite may seem to skate rather than run.
Preloading the images
I take advantage of the preloading trick described in the previous section to make my images load properly. The loadImages() method does this job:
function loadImages(){
//pre-loads images into an array
//make temporary array of image file names
var imgList = new Array(
“freya/run0.gif”,
“freya/run1.gif”,
“freya/run2.gif”,
“freya/run3.gif”,
“freya/run4.gif”,
“freya/run5.gif”,
“freya/run6.gif”,
“freya/run7.gif”
);
//create the array of image objects used in the
//rest of the program
for(i = 0; i < images.length; i++){
images[i] = new Image();
images[i].src = imgList[i];
} // end for loop
} // end loadImages
This function works just like its counterpart in the preload.html program described earlier in this chapter.
Animating and updating the image
I really have two kinds of animation happening at once, so in the grand tradition of encapsulation, the animate() function passes off its job to two other functions:
function animate(){
updateImage();
updatePosition();
} // end animate
The updateImage() function handles the image-swapping duties:
function updateImage(){
frame++;
if (frame >= images.length){
frame = 0;
} // end if
spriteImage.src = images[frame].src;
} // end updateImage
Moving the sprite
The sprite is moved in the updatePosition() function:
function updatePosition(){
sprite = document.getElementById(“sprite”);
var x = parseInt(sprite.style.left);
x += 10;
if (x > MAX_X){
x = 0;
} // end if
sprite.style.left = x + “px”;
} // end function
I know what you’re thinking: You can use this stuff to make a really cool game. It’s true. You can make games with JavaScript, but you eventually run into JavaScript’s design limitations. JavaScript-based games have a bright future, with advances like the canvas tag, integrated audio, and faster JavaScript engines coming in the newest browsers. However, JavaScript is not yet an ideal game programming platform.
I prefer Flash and Python as languages to learn game development. Now that you mention it, I’ve written other Wiley books on exactly these topics. Check out Beginning Flash Game Programming For Dummies and Game Programming: The L Line (for Python development).
Book V
Server-Side Programming with PHP
Chapter 1: Getting Started on the Server
In This Chapter
Introducing server-side programming
Testing your installation
Inspecting phpinfo()
Writing XHTML with embedded PHP
Understanding various types of quotation
Managing concatenation and interpolation
Using heredocs to simplify coding
Welcome to the server-side programming portion of the book. In this minibook, you discover all the basics of PHP and how you can use PHP to make your pages dynamic and relevant in today’s Internet.
In this chapter, you read about getting your server set up and ready to go. I walk you through the process as painlessly as possible, and by the end, you’ll be up and running, and ready to serve up your own Web pages in a test environment. (I talk about making them available to the rest of the world in Book VIII.)
Introducing Server-Side Programming
I begin with an introduction to server-side