Create a game like Perfectionism with Flash – Step 3

Read all posts about "" game

Welcome to the 3rd step.

At the end of step 2, we left our buttons with a rollover effect. But a button it’s not a button if you can’t press it.

Pressing the buttons

When you press a button, I want the green line to stay on the field, and the button to change color to show it has been pressed.

_root.attachMovie("grid", "grid", 1, {_x:90, _y:90});
_root.createEmptyMovieClip("rays", 2);
horizontal_hover = new Array(0, 0, 0, 0, 0, 0, 0, 0);
vertical_hover = new Array(0, 0, 0, 0, 0, 0, 0, 0);
horizontal_click = new Array(0, 0, 0, 0, 0, 0, 0, 0);
vertical_click = new Array(0, 0, 0, 0, 0, 0, 0, 0);
for (x=1; x<=8; x++) {
	hs = grid.attachMovie("hswapper", "hswapper_"+x, grid.getNextHighestDepth(), {_x:-20, _y:40*x-20});
	hs.pos = x;
	hs.onEnterFrame = function() {
		if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
			this.gotoAndStop(2);
			horizontal_hover[this.pos-1] = 1;
		} else {
			this.gotoAndStop(1);
			horizontal_hover[this.pos-1] = 0;
		}
		if (horizontal_click[this.pos-1] == 1) {
			(this.gotoAndStop(3));
		}
	};
	vs = grid.attachMovie("vswapper", "vswapper_"+x, grid.getNextHighestDepth(), {_x:40*x-20, _y:-20});
	vs.pos = x;
	vs.onEnterFrame = function() {
		if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
			this.gotoAndStop(2);
			vertical_hover[this.pos-1] = 1;
		} else {
			this.gotoAndStop(1);
			vertical_hover[this.pos-1] = 0;
		}
		if (vertical_click[this.pos-1] == 1) {
			(this.gotoAndStop(3));
		}
	};
}
rays.onEnterFrame = function() {
	this.clear();
	this.lineStyle(2, 0x00ff00);
	for (x=0; x<8; x++) {
		if ((horizontal_hover[x] == 1) or (horizontal_click[x] == 1)) {
			this.moveTo(90, x*40+110);
			this.lineTo(410, x*40+110);
		}
		if ((vertical_hover[x] == 1) or (vertical_click[x] == 1)) {
			this.moveTo(x*40+110, 90);
			this.lineTo(x*40+110, 410);
		}
	}
};
_root.onMouseDown = function() {
	for (x=0; x<8; x++) {
		if (horizontal_hover[x] == 1) {
			horizontal_click[x] = 1-horizontal_click[x];
		}
		if (vertical_hover[x] == 1) {
			vertical_click[x] = 1-vertical_click[x];
		}
	}
};

Line 5: Declaring an array to store the position of the horizontal button I clicked (if any). 0 means the button is not clicked, 1 means I am over it

Line 6: Same thing for the vertical one

Line 18: If the (pos-1)-th element of the horizontal_click array is equal to 1 (the button has been clicked)...

Line 19: Show the 3rd frame of the button movieclip. The 3rd frame is the same as the 2nd one, just with a different background color

You will see later in this script how do I change horizontal_click (and vertical_click)elements

Lines 32-34: Same thing as for lines 18-20, just applied to vertical buttons

Line 41: I used to draw the horizontal line only if the button was rolled over, now I draw the horizontal line also if the button is clicked

Line 45: Same thing with the vertical line

Line 51: Beginning of the function to be executed everytime the mouse is pressed

Line 52: Cycle to scan all elements in horizontal_hover and vertical_hover arrays

Line 53: If the x-th element of the horizontal_hover is equal to 1... (if the mouse is over it and the player clicked the mouse...)

Line 54: Change the x-th value of the horizontal_click array from 0 (not pressed) to 1 or from 1 to 0

Lines 56-58: Same thing as lines 53-55, just applied to the vertical buttons.

In other words, the click routine works this way: when the mouse button is pressed, I check if there is any game button that has been rolled over. There can be only one button rolled over at the same time, just like with real buttons. If I click on a rolled over button, the button becomes pressed if it was unpressed, and unpressed if it was pressed.

And that's the result:

Now you can click the buttons and watch lines remain on the field

Adding elements

Now it's time to add some elements to the game... I'll add the square and the ring, this way:

Perfectionism

Then, the source code is:

_root.attachMovie("grid", "grid", 1, {_x:90, _y:90});
_root.createEmptyMovieClip("rays", 2);
horizontal_hover = new Array(0, 0, 0, 0, 0, 0, 0, 0);
vertical_hover = new Array(0, 0, 0, 0, 0, 0, 0, 0);
horizontal_click = new Array(0, 0, 0, 0, 0, 0, 0, 0);
vertical_click = new Array(0, 0, 0, 0, 0, 0, 0, 0);
level = new Array(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
for (x=0; x<64; x++) {
	if (level[x] == 1) {
		grid.attachMovie("cell", "cell_"+x, grid.getNextHighestDepth(), {_x:(x%8)*40, _y:Math.floor(x/8)*40});
	}
	if (level[x] == 2) {
		grid.attachMovie("atom", "atom"+x, grid.getNextHighestDepth(), {_x:(x%8)*40, _y:Math.floor(x/8)*40});
	}
}
for (x=1; x<=8; x++) {
	hs = grid.attachMovie("hswapper", "hswapper_"+x, grid.getNextHighestDepth(), {_x:-20, _y:40*x-20});
	hs.pos = x;
	hs.onEnterFrame = function() {
		if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
			this.gotoAndStop(2);
			horizontal_hover[this.pos-1] = 1;
		} else {
			this.gotoAndStop(1);
			horizontal_hover[this.pos-1] = 0;
		}
		if (horizontal_click[this.pos-1] == 1) {
			(this.gotoAndStop(3));
		}
	};
	vs = grid.attachMovie("vswapper", "vswapper_"+x, grid.getNextHighestDepth(), {_x:40*x-20, _y:-20});
	vs.pos = x;
	vs.onEnterFrame = function() {
		if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
			this.gotoAndStop(2);
			vertical_hover[this.pos-1] = 1;
		} else {
			this.gotoAndStop(1);
			vertical_hover[this.pos-1] = 0;
		}
		if (vertical_click[this.pos-1] == 1) {
			(this.gotoAndStop(3));
		}
	};
}
rays.onEnterFrame = function() {
	this.clear();
	this.lineStyle(2, 0x00ff00);
	for (x=0; x<8; x++) {
		if ((horizontal_hover[x] == 1) or (horizontal_click[x] == 1)) {
			this.moveTo(90, x*40+110);
			this.lineTo(410, x*40+110);
		}
		if ((vertical_hover[x] == 1) or (vertical_click[x] == 1)) {
			this.moveTo(x*40+110, 90);
			this.lineTo(x*40+110, 410);
		}
	}
};
_root.onMouseDown = function() {
	for (x=0; x<8; x++) {
		if (horizontal_hover[x] == 1) {
			horizontal_click[x] = 1-horizontal_click[x];
		}
		if (vertical_hover[x] == 1) {
			vertical_click[x] = 1-vertical_click[x];
		}
	}
};

Line 7: Declaring an array called level that stores the entire 8x8 grid. The top-left cell in the grid is at level[0], while the bottom-right element is at level[63]

I coded the level this way:

0: empty cell
1: ring
2: square
3 (2+1): ring + square

Line 8: Cycle scanning all 64 level array elements

Line 9: If the x-th element of level array is equal to 1...

Line 10: Attach the ring movieclip (linked as cell) as a child of grid movieclip, and put it in the right position according to x value

Lines 12-14: Same thing as lines 9-11, just using squares (linked as atom, don't ask me why do I use those stupid names)

And here it is:

Now we have all elements we need to make a working game... during next step I'll show you the most hardest part... making things move and swapping elements

Meanwhile, download the source code.

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