Be my fan on FacebookCreate a game like Perfectionism with Flash – Step 3
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | _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:
Then, the source code is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | _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 8×8 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.
(No Ratings Yet)
Loading ...They can be easily customized to meet the unique requirements of your project.
7 Responses to “Create a game like Perfectionism with Flash – Step 3”
Leave a Reply
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- 11 Flash isometric engines you can use in your games
- Monetize your Flash games with GamesChart
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a flash artillery game – step 2 (4.74/5)
- Create a survival horror game in Flash tutorial – part 1 (4.73/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Flash game creation tutorial – part 1 (4.70/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)
First Post !
Keep them coming Emanuele, doing great ! Looking good to.
You should make a game like Death Worm aswel, that game is as fun as heck !
Second Post!
Great! Amazing!
You shoud make a game like Block Champs.
Ughh…third post?
Anyways, like Jdog said, you should make a game like deathworm.
Cheers!
Third Post!
I have a feeling that this is going to be much better than I thought!
At the end of this tutorial I’ll take a look at deathworm
youtube watch?v=NwSjfsC9NoU
That’s the original Deathworm. The one at newgrounds was made by another person, and lacks gameplay features.
I don’t find it interesting enough to turn into a good game, though, if there will not be something new gameplay-wise.
Thanks Emanuele ! Made my day, its well worth it. At the moment though keep plugging away at Perfectionism !