Making a Flash game like Plants Vs Zombies – step 3

Read all posts about "" game

Here we go with 3rd step of Plants Vs Zombies game. Now we will place the bought plant on the game field and let the zombies enter.

Adding a zombie is quite easy because we manage it in the same way we managed the sun. Just like suns appear out of the top of the stage and then fall down, Zombies appear out of the right edge of the stage and move left. They don’t interact with plants yet.

As for placing the plant, we have to make sure when the player presses the mouse while dragging the plant that the tile he wants to place the plant is free and it’s inside game area. Then the plant is placed, the selector and the listener are removed, and the routine starts again with the player collecting suns and selecting which plant (only one available at the moment) to place on the game field.

I commented line by line the whole code, to help you understanting what’s happening.

package {
	import flash.display.Sprite;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import flash.text.TextField;
	public class Main extends Sprite {
		// array to store game field information
		private var gameField:Array;
		// timer to make flowers fall down
		private var flowersTimer:Timer=new Timer(5000);
		// timer to make zombies come in
		private var zombieTimer:Timer=new Timer(5000);
		// container for all suns
		private var sunContainer:Sprite=new Sprite();
		// container for all plants
		private var plantContainer:Sprite=new Sprite();
		// container for all zombies
		private var zombieContainer:Sprite=new Sprite();
		// the sun itself
		private var sun:sunMc;
		// plant on the plant bar
		private var plant:plantMc;
		// plant the player can drag on game field
		private var movingPlant:plantMc;
		// the selector square to show the playere where he's going to place the plant
		private var selector:selectorMc;
		// amout of money owned by the player
		private var money:uint=0;
		// dynamic text field where to show player's money
		private var moneyText:TextField=new TextField  ;
		// boolean variable to tell us if the player is moving a plant (true) or not (false)
		private var playerMoving:Boolean=false;
		public function Main():void {
			// function to initialize the game field
			setupField();
			// function to draw the game field itself
			drawField();
			// function to handle falling suns
			fallingSuns();
			// function to add all texts (only the amount of money at the moment)
			addText();
			// function to add plants
			addPlants();
			// function to add zombies
			addZombies();
			// listener to ENTER_FRAME
			addEventListener(Event.ENTER_FRAME,onEnterFrm);
		}
		private function setupField():void {
			// creation of a 5 rows 9 columns matrix filled with zeros
			gameField=new Array();
			for (var i:uint=0; i<5; i++) {
				gameField[i]=new Array();
				for (var j:uint=0; j<9; j++) {
					gameField[i][j]=0;
				}
			}
		}
		private function addText():void {
			// adding a dynamic text field
			addChild(moneyText);
			updateMoney();
			moneyText.textColor=0xFFFFFF;
			moneyText.height=20;
		}
		private function updateMoney():void {
			// writing the amount of money owned by the player
			moneyText.text="Money: "+money.toString();
		}
		private function drawField():void {
			// drawing the game field, will be replaced when the game field will have real graphics
			var fieldSprite:Sprite=new Sprite();
			var randomGreen:Number;
			addChild(fieldSprite);
			fieldSprite.graphics.lineStyle(1,0xFFFFFF);
			for (var i:uint=0; i<5; i++) {
				for (var j:uint=0; j<9; j++) {
					randomGreen=(125+Math.floor(Math.random()*50))*256;
					fieldSprite.graphics.beginFill(randomGreen);
					fieldSprite.graphics.drawRect(25+65*j,80+75*i,65,75);
				}
			}
		}
		private function addZombies():void {
			// adding the zombie container
			addChild(zombieContainer);
			// starting the timer to place zombies
			zombieTimer.start();
			// listener to be triggered every time you have to place a new zombie
			zombieTimer.addEventListener(TimerEvent.TIMER,newZombie);
		}
		private function newZombie(e:TimerEvent):void {
			// constructing the zombie
			var zombie:zombieMc=new zombieMc();
			// adding the zombie
			zombieContainer.addChild(zombie);
			// choosing a random row where to place the zombie
			var row:uint=Math.floor(Math.random()*5);
			// place the zombie on the board, outside the stage to the right
			zombie.x=660;
			zombie.y=row*75+115;
		}
		private function fallingSuns():void {
			// adding the suns container
			addChild(sunContainer);
			// starting the timer to make a new sun fall
			flowersTimer.start();
			// listener ot be triggered every time you have to place a new sun
			flowersTimer.addEventListener(TimerEvent.TIMER, newSun);
		}
		private function newSun(e:TimerEvent):void {
			// choosing the destination row and column for the sun
			var sunRow:uint=Math.floor(Math.random()*5);
			var sunCol:uint=Math.floor(Math.random()*9);
			// constructing the sun
			sun = new sunMc();
			// making the mouse change shape when over the plant 
			sun.buttonMode=true;
			// adding the sun
			sunContainer.addChild(sun);
			// placing the sun in the proper column
			sun.x=52+sunCol*65;
			// definining the sun y destination point
			sun.destinationY=130+sunRow*75;
			// placing the sun out to the upper side of the stage
			sun.y=-20;
			// listener to be triggered when the sun is clicked
			sun.addEventListener(MouseEvent.CLICK,sunClicked);
		}
		private function sunClicked(e:MouseEvent):void {
			// removing the CLICK listener
			e.currentTarget.removeEventListener(MouseEvent.CLICK,sunClicked);
			// making the player earn money (5)
			money+=5;
			// updating money text
			updateMoney();
			// defining which sun we need to remove
			var sunToRemove:sunMc=e.currentTarget as sunMc;
			// removing the sun
			sunContainer.removeChild(sunToRemove);
		}
		private function addPlants():void {
			// adding the plant container
			addChild(plantContainer);
			// constructing a new plant
			plant=new plantMc();
			// adding the plant
			plantContainer.addChild(plant);
			// making the mouse change shape when over the plant
			plant.buttonMode=true;
			// placing the plant
			plant.x=90;
			plant.y=40;
			// listener to be triggered once the plant is clicked
			plant.addEventListener(MouseEvent.CLICK,onPlantClicked);
		}
		private function onPlantClicked(e:MouseEvent):void {
			// checking if the player has enough money (10) to afford the plant and isn't currently dragging a plant
			if (money>=10&&! playerMoving) {
				// paying the plant
				money-=10;
				// updating money text
				updateMoney();
				// constructing a new selector
				selector=new selectorMc();
				// make the selector invisible
				selector.visible=false;
				// adding the selector
				plantContainer.addChild(selector);
				// construcing a new moving plant
				movingPlant=new plantMc();
				// lister to be triggered once the moving plant is clicked
				movingPlant.addEventListener(MouseEvent.CLICK,placePlant);
				// adding the moving plant
				plantContainer.addChild(movingPlant);
				// telling the script the player is actually moving a plant
				playerMoving=true;
			}
		}
		private function placePlant(e:MouseEvent):void {
			// looking in which tile the plant is going to be placed according to mouse position
			var plantRow:int=Math.floor((mouseY-80)/75);
			var plantCol:int=Math.floor((mouseX-25)/65);
			// checking if the tile is inside the game field and there isn't any other plant already placed in that tile
			if (plantRow>=0&&plantCol>=0&&plantRow<5&&plantCol<9&&gameField[plantRow][plantCol]==0) {
				// constructing the plan to be placed
				var placedPlant:plantMc=new plantMc();
				// adding the plant
				plantContainer.addChild(placedPlant);
				// placing the plant
				placedPlant.x=plantCol*65+57;
				placedPlant.y=plantRow*75+115;
				//telling the script the player is no longer moving
				playerMoving=false;
				// removing the CLICK listener from the draggable plant
				movingPlant.removeEventListener(MouseEvent.CLICK,placePlant);
				// removing the selector
				plantContainer.removeChild(selector);
				// removing the plan itself
				plantContainer.removeChild(movingPlant);
				// updating game array adding the new plant
				gameField[plantRow][plantCol]=1;
			}
		}
		private function onEnterFrm(e:Event):void {
			// looping through all zombies
			for (var i:uint=0; i=0&&plantCol>=0&&plantRow<5&&plantCol<9) {
					// show the selector
					selector.visible=true;
					// place the selector over the selected tile
					selector.x=25+plantCol*65;
					selector.y=80+plantRow*75;
				} else {
					// hide the selector
					selector.visible=false;
				}
			}
		}
	}
}

This is the result:

Collect suns and buy and place plants while zombies arrive.

Download the source code. Next time, we'll fight the zombies.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers