Making a Zombie Game with FlashJuly 10th , 2008

This is a fairly simple game concept. Basically, it is a game where you walk around and defend yourself from being brutally mauled by zombies who are closing in on all sides. If you don't know what I'm talking about, try playing Zombie Horde 3. We'll expand on our movement from "A Simple Start: Interactivity with Flash." We'll add player rotation, so that the character is always facing the mouse. In later tutorials, we'll add shooting, so that your character can fire at the zombies. We'll even go into a little AI, so that the zombies can follow you around.

Well, what are we waiting for? Lets get started.

First, open a new Flash document. First make a new symbol by pressing Ctrl+F8. When the "New Symbol" box comes up, make sure to check "Export for ActionScript" and name give it the name "hero", like this:

Now, draw a guy from above with one arm out, like this:

Now, go back to your main timeline, so you are no longer editing the hero.
In the frame actions panel, use this code:

Code:
  1. _root.attachMovie("hero", "hero", 30);
  2. hero.speed = 2;
  3. hero._x = 275;
  4. hero._y = 200;
  5. hero.onEnterFrame = function() {
  6. 	if (Key.isDown(Key.RIGHT)) {
  7. 		this._x += this.speed;
  8. 	}
  9. 	if (Key.isDown(Key.LEFT)) {
  10. 		this._x -= this.speed;
  11. 	}
  12. 	if (Key.isDown(Key.UP)) {
  13. 		this._y -= this.speed;
  14. 	}
  15. 	if (Key.isDown(Key.DOWN)) {
  16. 		this._y += this.speed;
  17. 	}
  18. 	dx = _root._xmouse-this._x;
  19. 	dy = _root._ymouse-this._y;
  20. 	this._rotation = 90+Math.atan2(dy, dx)*180/Math.PI;
  21. }

What this code does is the same as what we did in A Simple Start, except that we add a special piece to the end, which rotates the hero in the direction of the mouse, so that he is always facing where the mouse is. I could take an extremely long time to explain trigonometry to you if you don't already know some, but I'll just give the the basics.
We get this distances, both x and y, between the mouse and the hero. Then we use the arc-tangent trig function to determine the angle formed. Then, we convert this angle, which is in radians, to degrees, and then we rotate the hero to this angle.
The code results in this:


Next tutorial we will look at shooting with the mouse. Until then, download the source code and tell me of any trouble you may be having.

Search