Create a flash artillery game – step 1

Read all posts about "" game

May 25th update: 2nd part released
October 29th update: modification with a bounce effect developed by Massimo M.

Here we are with the beginning of a new tutorial. We are going to create a flash artillery game. Something like Worms. Or similar.
Well… the first thing we need in an artillery game is…

The crosshair

I created a movieclip linkaged as “crosshair”, then on the first frame of the main scene entered this actionscript:

Mouse.hide();
attachMovie("crosshair", "crosshair", 1);
crosshair.onEnterFrame = function() {
	this._x = _xmouse;
	this._y = _ymouse;
};

Line 1: Hiding the mouse

Line 2: Attaching the movie “crosshair” instanced as “crosshair” at depth 1

Lines 3-5: Every time the crosshair is in the stage, its position is updated to _xmouse and _ymouse coordinates. This means you will move the crosshair with the mouse.

Looks simple… it will get (much) more complicated.

The second thing we need in an artillery game is…

The tank

The tank is the core of an artillery game. You will love your tank. Of course I love mine.

Of course, every tank has its cannon. A big cannon. Size matters.

I created a new movieclip linkaged as “tank” and inside this movieclip I created another one instanced as “cannon”. Look at the picture to understand how I placed the movieclips.

Tank

Then the actionscript is:

Mouse.hide();
attachMovie("crosshair", "crosshair", 1);
attachMovie("tank", "tank", 2, {_x:230, _y:350});
crosshair.onEnterFrame = function() {
	this._x = _xmouse;
	this._y = _ymouse;
};
tank.onEnterFrame = function() {
	mousex = _xmouse-this._x;
	mousey = (_ymouse-this._y)*-1;
	angle = Math.atan(mousey/mousex)/(Math.PI/180);
	if (mousex<0) {
		angle += 180;
	}
	if (mousex>=0 && mousey<0) {
		angle += 360;
	}
	this.cannon._rotation = angle*-1;
};

Line 3: places the cannon on the stage

Lines 9-10 determine the x and y distance between the crosshair and the tank

Lines 11-17 determine the angle with trigonometry. This concept is explained in the tutorial called Create a flash draw game like Line Rider or others - part 3.

Line 18 rotates the cannon according to the angle

Sometimes you may need to limit the cannon angle. It's very simple do it this way:

Mouse.hide();
attachMovie("crosshair", "crosshair", 1);
attachMovie("tank", "tank", 2, {_x:230, _y:350});
crosshair.onEnterFrame = function() {
	this._x = _xmouse;
	this._y = _ymouse;
};
tank.onEnterFrame = function() {
	mousex = _xmouse-this._x;
	mousey = (_ymouse-this._y)*-1;
	angle = Math.atan(mousey/mousex)/(Math.PI/180);
	if (mousex<0) {
		angle += 180;
	}
	if (mousex>=0 && mousey<0) {
		angle += 360;
	}
	if (angle>160) {
		angle = 160;
	}
	if (angle<20) {
		angle = 20;
	}
	this.cannon._rotation = angle*-1;
};

Lines 18-23 limit the cannon angle between 20 and 160 degrees. Limiting the cannon angle may affect gameplay, use it wisely.

Now it's time to determine the firepower. In this game, we are going to determine it by the distance from the crosshair to the cannon.

Mouse.hide();
attachMovie("crosshair", "crosshair", 1);
attachMovie("tank", "tank", 2, {_x:230, _y:350});
crosshair.onEnterFrame = function() {
	this._x = _xmouse;
	this._y = _ymouse;
};
tank.onEnterFrame = function() {
	mousex = _xmouse-this._x;
	mousey = (_ymouse-this._y)*-1;
	angle = Math.atan(mousey/mousex)/(Math.PI/180);
	if (mousex<0) {
		angle += 180;
	}
	if (mousex>=0 && mousey<0) {
		angle += 360;
	}
	if (angle>160) {
		angle = 160;
	}
	if (angle<20) {
		angle = 20;
	}
	firepower = Math.sqrt(mousex*mousex+mousey*mousey);
	if (firepower>200) {
		firepower = 200;
	}
	this.cannon._rotation = angle*-1;
};

Lines 24-27 calculate the fire power using the pythagorean theorem (there is no need to publish this example as a .swf because visually it does not change anything).

Now it's time to make our tank do what every tank sould do:

FIRE !!

The first thing to do when you fire a bullet is determine the exit point of the bullet. I mean: the cannon is on a rotating turret, so I have to place the bullet right next to the end of the cannon to give the player the feeling he really fired that bullet.

So I created a new movieclip and linkaged it as "cannonball"

Then I added a new function to the script

Mouse.hide();
attachMovie("crosshair", "crosshair", 1);
attachMovie("tank", "tank", 2, {_x:230, _y:350});
crosshair.onEnterFrame = function() {
	this._x = _xmouse;
	this._y = _ymouse;
};
tank.onEnterFrame = function() {
	mousex = _xmouse-this._x;
	mousey = (_ymouse-this._y)*-1;
	angle = Math.atan(mousey/mousex)/(Math.PI/180);
	if (mousex<0) {
		angle += 180;
	}
	if (mousex>=0 && mousey<0) {
		angle += 360;
	}
	if (angle>160) {
		angle = 160;
	}
	if (angle<20) {
		angle = 20;
	}
	firepower = Math.sqrt(mousex*mousex+mousey*mousey);
	if (firepower>200) {
		firepower = 200;
	}
	this.cannon._rotation = angle*-1;
};
function onMouseDown() {
	angle = tank.cannon._rotation-1
	start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
	start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
	attachMovie("cannonball", "cannonball", 3, {_x:start_ball_x, _y:start_ball_y});
}

Line 30: Beginning of the actions to be executed when the player press the fire... pardon, the mouse button.

Lines 32-33: Determining the exit point of the cannonball using with trigonometry. This concept too is explained in the tutorial called Create a flash draw game like Line Rider or others - part 3. The "48" value you can see it given by the cannon lenght (40) plus the ball radius (5) plus 3 "safety pixels" since sine and cosine functions returns non-integer values.

Line 34: Attaching the movieclip with the cannon ball. Notice the "3": it's the depth of the movieclip, and giving a fixed depth assure us to have only one cannon ball on the stage.

FIRE!!! (again)

Now that the cannonball has been released, it's time to make it fly.

Mouse.hide();
attachMovie("crosshair", "crosshair", 1);
attachMovie("tank", "tank", 2, {_x:230, _y:350});
crosshair.onEnterFrame = function() {
	this._x = _xmouse;
	this._y = _ymouse;
};
tank.onEnterFrame = function() {
	mousex = _xmouse-this._x;
	mousey = (_ymouse-this._y)*-1;
	angle = Math.atan(mousey/mousex)/(Math.PI/180);
	if (mousex<0) {
		angle += 180;
	}
	if (mousex>=0 && mousey<0) {
		angle += 360;
	}
	if (angle>160) {
		angle = 160;
	}
	if (angle<20) {
		angle = 20;
	}
	firepower = Math.sqrt(mousex*mousex+mousey*mousey);
	if (firepower>200) {
		firepower = 200;
	}
	this.cannon._rotation = angle*-1;
};
function onMouseDown() {
	angle = tank.cannon._rotation-1;
	start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
	start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
	cannonball_fired = attachMovie("cannonball", "cannonball_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:start_ball_x, _y:start_ball_y});
	cannonball_fired.dirx = Math.cos(angle*Math.PI/180)*firepower;
	cannonball_fired.diry = Math.sin(angle*Math.PI/180)*firepower;
	cannonball_fired.onEnterFrame = function() {
		this._x += this.dirx/50;
		this._y += this.diry/50;
	};
}

Line 34: This time I want more than one cannonball in the stage, so I call the attachMovie function giving the cannon ball the next highest depth available. I can do this using the getNextHighestDepth() function. The name of the movieclip is also affected by the next highest depth available.

Line 35: The dirx variable is the horizontal vector of the cannonball, according to its firing angle and the firepower.

Line 36: Same thing for diry, the vertical vector

Line 37: Every time the cannonball enters in a frame (every frame)...

Lines 38-39: ... its _x and _y position changes according to dirx and diry. That "50" is simply a divider to make the ball not to go too fast.

What happens to a cannonball once in the air? It starts falling due to...

Gravity

In an arcade game initially gravity is not calculated in a strict physics formula, so we are going to simulate the gravity in this way:

Mouse.hide();
gravity = 2;
attachMovie("crosshair", "crosshair", 1);
attachMovie("tank", "tank", 2, {_x:230, _y:350});
crosshair.onEnterFrame = function() {
	this._x = _xmouse;
	this._y = _ymouse;
};
tank.onEnterFrame = function() {
	mousex = _xmouse-this._x;
	mousey = (_ymouse-this._y)*-1;
	angle = Math.atan(mousey/mousex)/(Math.PI/180);
	if (mousex<0) {
		angle += 180;
	}
	if (mousex>=0 && mousey<0) {
		angle += 360;
	}
	if (angle>160) {
		angle = 160;
	}
	if (angle<20) {
		angle = 20;
	}
	firepower = Math.sqrt(mousex*mousex+mousey*mousey);
	if (firepower>200) {
		firepower = 200;
	}
	this.cannon._rotation = angle*-1;
};
function onMouseDown() {
	angle = tank.cannon._rotation-1;
	start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
	start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
	cannonball_fired = attachMovie("cannonball", "cannonball_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:start_ball_x, _y:start_ball_y});
	cannonball_fired.dirx = Math.cos(angle*Math.PI/180)*firepower;
	cannonball_fired.diry = Math.sin(angle*Math.PI/180)*firepower;
	cannonball_fired.onEnterFrame = function() {
		this.diry += gravity;
		this._x += this.dirx/50;
		this._y += this.diry/50;
	};
}

Line 2: A variable called gravity is set to 2

Line 39: The gravity value is added to the vertical vector at every frame.

Final result is quite reasonable.

At the moment the tut stops here, download all source codes, give me feedback, change a line or two and publish them as your own game on various game portals :)

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

214 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
// 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