In this section we're going to add a character to the simple world we have just created. Our character is nothing more than a ball. The goal is to be able to move the ball around the grid using the arrow keys. If a cell has a type of greater than 1, it is a wall, and we will not let the ball enter this cell. When an arrow key is pressed, we look ahead to see where the edge of the ball would be if we were to move it there. If the edge is in an acceptable cell (type = 1), then we move the ball there; if not, then we disregard the key press. More specifically, if the right arrow key is pressed, then we look at the ball's current position, plus the ball's speed, plus the ball's radius to form a number that represents the far right edge of the ball if it were to be moved one quantity (or unit) of speed to the right. We then check to see in which cell that far-right point is. If it is in a cell of type = 1, then we move the ball there. Looking ahead:where is he going to go?
A function called `initializeBall()`that creates an object to hold the information about the character (which is a ball). This function also creates a few new variables on the`game`object.A function called `moveBall()`. When this function is called, it moves the ball to a new position if that new position is valid.An `onEnterFrame`event. This checks for key presses in every frame. If one of the arrow keys is pressed, then the`moveBall()`function is called.
Here is the 1 function initializeBall() { 2 game.speed = 3; 3 game.path.ball.swapDepths(10000); 4 game.ball = {startx:1, starty:1, clip:game.path.ball}; 5 var x = (game.ball.startx-1)*game.spacing+game.spacing/2; 6 var y = (game.ball.starty-1)*game.spacing+game.spacing/2; 7 game.ball.clip._x = x; 8 game.ball.clip._y = y; 9 game.ball.x = x; 10 game.ball.y = y; 11 game.ball.radius = game.ball.clip._width/2; 12 } The purpose of this function is to initialize all objects and variables needed to hold information about the ball. Line 2 above sets a variable called Next, let's look at the 1 _root.onEnterFrame = function() { 2 if (Key.isDown(Key.RIGHT)) { 3 moveBall("right"); 4 } else if (Key.isDown(Key.LEFT)) { 5 moveBall("left"); 6 } 7 if (Key.isDown(Key.UP)) { 8 moveBall("up"); 9 } else if (Key.isDown(Key.DOWN)) { 10 moveBall("down"); 11 } 12 }; There are two conditional chunks of code in here. One checks to see if either the right or left arrow key is pressed; the other checks to see if either the up or down arrow is pressed. If the right or left arrow key is detected as being pressed, then the Now let's look at the 1 function moveBall(dir) { 2 ob = game.ball; 3 if (dir == "right") { 4 var tempx = ob.x+ob.radius+game.speed; 5 var tempy = ob.y; 6 var cellx = Math.ceil(tempx/game.spacing); 7 var celly = Math.ceil(tempy/game.spacing); 8 var tempCell = game["cell"+cellx+"_"+celly]; 9 if (tempCell.type != 1) { 10 return; 11 } else { 12 ob.x += game.speed; 13 ob.clip._x = ob.x; 14 } 15 } else if (dir == "left") { 16 var tempx = ob.x-ob.radius-game.speed; 17 var tempy = ob.y; 18 var cellx = Math.ceil(tempx/game.spacing); 19 var celly = Math.ceil(tempy/game.spacing); 20 var tempCell = game["cell"+cellx+"_"+celly]; 21 if (tempCell.type != 1) { 22 return; 23 } else { 24 ob.x -= game.speed; 25 ob.clip._x = ob.x; 26 } 27 } else if (dir == "up") { 28 var tempx = ob.x; 29 var tempy = ob.y-ob.radius-game.speed; 30 var cellx = Math.ceil(tempx/game.spacing); 31 var celly = Math.ceil(tempy/game.spacing); 32 var tempCell = game["cell"+cellx+"_"+celly]; 33 if (tempCell.type != 1) { 34 return; 35 } else { 36 ob.y -= game.speed; 37 ob.clip._y = ob.y; 38 } 39 } else if (dir == "down") { 40 var tempx = ob.x; 41 var tempy = ob.y+ob.radius+game.speed; 42 var cellx = Math.ceil(tempx/game.spacing); 43 var celly = Math.ceil(tempy/game.spacing); 44 var tempCell = game["cell"+cellx+"_"+celly]; 45 if (tempCell.type != 1) { 46 return; 47 } else { 48 ob.y += game.speed; 49 ob.clip._y = ob.y; 50 } 51 } 52 } This function accepts a parameter called The next three parts of this big conditional statement do the same thing as the first part, except in how they calculate the ball's edge and update the ball's position. The edge of the ball we are interested in depends on the direction of movement. If the down key was pressed, then we are interested in the lowest edge of the ball. If the left key was pressed, then we are interested in the leftmost edge of the ball. Finally all together now if the up key was pressed, then we are interested in the topmost edge of the ball. Generate a SWF from this file. You can then use your arrow keys to move the ball around. Click the grid to add some walls. Move the ball around and notice how it will not enter a cell that has a wall. Notice that all walls are treated in the same way; it doesn't matter what the wall looks like or how much of the cell the wall occupies. Using creatively drawn walls or smaller cell sizes, this is not as apparent. One other thing to note is that this is just one way to treat cells in a TBW. More-advanced games have real collision detection within a cell. In that case, the ball could enter a cell that has a wall, but then collision detection checks would kick in to make sure the ball did not move through the wall itself. |

Macromedia Flash MX Game Design Demystified: The Official Guide to Creating Games with Flash -- First 1st Printing -- CD Included

ISBN: B003HP4RW2

EAN: N/A

EAN: N/A

Year: 2005

Pages: 163

Pages: 163

Authors: Jobe Makar

Similar book on Amazon

flylib.com © 2008-2017.

If you may any questions please contact us: flylib@qtcs.net

If you may any questions please contact us: flylib@qtcs.net