Flash games - Basic catch game
Author: Bill Trikojus
This tutorial will show you how to create a basic catch game using Flash Actionscript. Click here to view the finished game.
|
|
Part one |
|
Creating a catch game |
|
|
Publish settings |
|
|
Attach movie |
|
|
Linkage identifiers |
|
|
How to trace functions |
|
|
Variables |
|
|
Depth |
|
|
Random scripts |
|
|
Setting & clearing intervals |
|
|
|
Part two |
|
Collision detections |
|
|
Arrays |
|
|
Hit test |
|
|
Keyboard listener |
|
|
For loops |
|
|
Remove movie clips |
|
|
Splice |
|
|
|
Part three |
|
Create a score board |
|
|
Variables |
|
|
Easing |
|
|
If statements |
|
|
EnterFrame functions |
|
|
WatchKeyboard |
|
|
Setting & clearing intervals |
|
|
|
Source code |
Share
Like this? Click a link below to share it...
Subscribe and Download
Comments
2008-04-19: smit said:Nice tutorial! great, but i was wondering if it is possible to use multiple array's (as in, nog just red round object, but for example also some purple square objects). its not working here. It always uses one of the two arrays. plz send me a mail if you got the awnser
2008-06-19: Bill Trikojus said:
not sure what you mean about the arrays but if you change
newClip = _root.attachMovie('circle', 'circle'+depth, depth++);
to
ran=Math.ceil(Math.random()*2);
if(ran==1){
newClip = _root.attachMovie('circle', 'circle'+depth, depth++);
}else{
newClip = _root.attachMovie('square', 'square'+depth, depth++);
}
then it will randomly attach either a circle or a square
cheers
2008-07-24: Joe Goldstein said:
Great tutorial! Thanks for taking the time to put it together..
Please help if you can - Is it possible to make the slider bar draggable by the mouse instead of using the left & right keys? I wanted to restrict the mouse movement to pan left and right only but I have been unsuccessful so far.
Thanks for any help you can provide,
JOe
2008-07-24: Bill Trikojus said:
This Flash Game Actionscript tutorial shows how to track the mouse movement. All you need to do is set up an onMouseMove event and every time it fire set the x and y of your movieclip to the xmouse and ymouse
cheers
2008-07-25: JOe said:
Thanks for your quick response. I have done as instructed and added the following code -
function onMouseMove(){
slider_mc._x = slider_mc._parent._xmouse;
}
This has worked and the slider now follows the x mouse movement. However the interaction is quite jerky and I was wondering if their is any way of smoothing this out? If possible can it utilize the "ease" function?
Thanks again,
JOe
2008-07-25: Bill Trikojus said:
You can do it by adding an onEnterFrame action for the easing and just setting a var in the onMouseMove
eg
function onMouseMove(){
targX = slider_mc._parent._xmouse;
}
function onEnterFrame(){
slider_mc._x += (slider_mc._x-targX)/5;
}
Something like that anyway. See easing tutorial for more details
cheers
2008-07-29: JOe said:
Thanks for that!, Chhers,
2008-10-30: Charlotte said:
thank you sooo much for this tutorial, it has made my life so very much easier for my I.T project. It's great how you explain what you're doing during the process. I have just one question if you could help please...
i'm making a maths learning game for 6yearold, where there is a maths question (which i have as just text) at the bottom, and droplets with numbers (movieclip) falling from the top of the stage. the object is to catch the correct number.
so i've used your code to make the droplets fall, but can so far only make it randomise just a single droplet, over and over. is there a way to allow flash to select randomly from my various collection of droplets?
2008-10-30: Bill Trikojus said:
Hi Charlotte
Glad you enjoyed the tute. Rather than having many movieclips in the library you should have one drop movieclip that contains a dynamic text box. When you attach a new drop to the stage you enter a random number into the text box. Something like
newDrop.number_txt.text=Math.round(Math.random()*10)
Hope that helps
2008-12-19: Alex said:
Omg you rock, I had to rewatch them a few times, I'm used to typing the codes in the MC themself
how goes an
if(score<-10){
gotoAndStop(2);
}
I tried, nothing worked please help, what should i put if frame two says LOSER?
Im also planning to do
if(score>149){
gotoandStop(3);
}
so when you get 150 (thats what it will be rounded to anway) frame three will have a YOU WIN thing in it.
TY so much if you help at my email
Alex_Is_Ub3r@hotmail.com
2008-12-19: Bill Trikojus said:
Hi Alex
Nothing wrong with your syntax so it is probably a path issue. Where are score and the movieclip located in relation to the code? You may just need to specify which movieclip you are targeting
eg
if(score<-10){
this.gotoAndStop(2);
}
cheers
2008-12-19: Alex said:
So you mean I put it in the wrong place?
I don't get how you say I need to specify an MC because wouldn't it just use the number from the score itself?
and where should I put it?
2008-12-19: Alex said:
Ok i put it inside the bottom where it has all these codes about the score.
It works,
One goes down, -5
Another present falls -10
and then it waits for ANOTHER to fall before going to the next frame!
I put it excactly as you said except score<-9
and at the top I put stop()
Why is this?
Maybe it has to wait for it to update score again and the stop() isn't letting it auto check?
And frame two is totally blank exept for "You lost!"
but for some reason, balls keep falling and the slider is still there.
but it does say you lost.
I know the actions are empty and everything in that frame.
2008-12-19: Bill Trikojus said:
Please post all the code on frame 1 of your main timeline
2008-12-19: Alex said:
It is!
It's really weird
2008-12-19: Bill Trikojus said:
please post it
2008-12-19: Alex said:
You mean post my script?
//this produces random balls that fall from the sky
stop()
depth = 0;
allBalls = new Array();
function makeNewClip() {
clearInterval(ranID);
ran = (Math.random()*4000)-1000-score*6;
ranID = setInterval(makeNewClip, ran);
newClip = _root.attachMovie('circle', 'circle'+depth, depth++);
allBalls.push(newClip);
//trace(allBalls);
newClip._x = Math.random()*Stage.width;
newClip._y = -50;
newClip.speed = (Math.random()*10)+5+(score/10);
newClip.onEnterFrame = function() {
this._y += this.speed;
if (this._y>Stage.height) {
updateScore(-5);
for (i=0; i
allBalls.splice(i,1);
//trace(allBalls)
}
}
this.removeMovieClip();
}
};
}
makeNewClip();
//Slide works
_root.attachMovie('slider','slider_mc',-1);
slider_mc._y = Stage.height-70;
maxSpeed = 20;
xSpeed = 0;
watchKeyboard = new Object();
watchKeyboard.onKeyDown = function() {
clearInterval(easeID);
if (Key.getCode() == Key.LEFT) {
if (xSpeed>-maxSpeed) {
xSpeed--;
}
}
if (Key.getCode() == Key.RIGHT) {
if (xSpeed
}
watchKeyboard.onKeyUp = function() {
clearInterval(easeID);
easeID = setInterval(ease, 5);
}
};
};
function ease() {
if (xSpeed>0) {
xSpeed--;
}
if (xSpeed<0) {
xSpeed++;
}
if (xSpeed == 0) {
clearInterval(easeID);
}
}
Key.addListener(watchKeyboard);
slider_mc.onEnterFrame = function() {
this._x += xSpeed;
}
//Collision works
_root.createEmptyMovieClip('watchCollision',-2);
watchCollision.onEnterFrame = function() {
for (i=0; i
//trace('we hit the slider');
allBalls[i].removeMovieClip();
allBalls.splice(i,1);
updateScore(10);
}
}
};
score = 0;
function updateScore(amount) {
if(score<-5){
this.gotoAndStop(2);
}
score += amount;
score_txt.text = 'Score is '+score;
}
updateScore(0);
Thar it is ty if you can help, and ty for all your help so far
2008-12-19: Bill Trikojus said:
OK you have
function updateScore(amount) {
if(score<-5){
this.gotoAndStop(2);
}
score += amount;
score_txt.text = 'Score is '+score;
}
are you trying to send _root to frame 2? If so that should work. To stop the balls falling you need to turn off the setInterval as well
clearInterval(ranID)
cheers
2008-12-19: Alex said:
So I shouldn't need to change anything?
What is _root?
and How to i turn off the set interval?
2008-12-19: Alex said:
TY so much I just didnt see teh clearInterval(ranID)
I can just leave the slider there
TY TY TY
ty
2008-12-19: Bill Trikojus said:
_root is the main timeline
I already said how to turn off the set interval - please reread last post
2008-12-19: Bill Trikojus said:
no problem
2008-12-19: Alex said:
Hey could i have ur email just incase i need help with something else?
2008-12-19: Bill Trikojus said:
No sorry Alex. That's what forums like actionscript.org are for.
All the best
2009-01-17: Terry said:
Hi Bill, a fantastic tutorial, really clear and helpful for people like me that are new t scripting as well. I have a few questions I wonder if you might be able to advise me how to adapt the script? It would be appreciated. Sorry to ask a few questions.
I'll ask the questions first then post the script beow for you to see how it is:
Q1. I have found actionscript code that I like for the movement of the slider but it currently hs to sit onClipEvent (load) to work, i was wondering if you know how to incoporate that script back on to the timeline and if it is sensible to do this? Tis Script is also posted below.
Q2. For some reason the slider (called 'cocktail' in the code) now sits below the falling object (movieclip 'good') and the movieclip gets removed when the top of 'good' hits the 'cocktail', it is what I want becuase it needs to fal into the glass, but it is visible above the glass until the top is in, it neds to be ata depth lower than the glass I think so it's blocked out of view?
Q3. I want to add a second falling clip called 'bad' but I want this to fal at a different rateto 'good' perhaps 1 of bad to every 10 of good. I want the score of bad to be different and to be able to adjust the frequency of the fall as levels progress.
I am looking to have scores as: 'good' falling of stage= -2, 'bad' falling off stage= 10, 'good' falling in glass (a catch)= 5, 'bad' falling in glass= -30
Also, how can I say if the score goes in to a negative/minus figure below 0 that it needs to remain at 0 and not go to -10 for example.
Q4. I want to trigger the falling movieclips to play themselves when hittest the ground (say 10 pixels up from bottom of the screen to explode just before they leave the screen) Any ideas? In the falling clip I can put 'stop' on first frame and animate the explosion from frame 2 onwards.
Q5. Finally, the slider 'cocktail'actionscript(currently on the movieclip) has a nice friction slow down etc so when moving right and suddenly pressing left it would be great to get the glass to very slightly rotate on it's bottom right corner maybe only 10 or 15 degrees but enough to give the glass a shor tilt before it returns back to no rotation, then mirror this effect to do the same when going the other way.
I'm sorry again that there are so many questions but if you can help with even one or two i wouldbe extremely grateful, i think the priority is the secod movieclip and objects to be behind the slider.
Thanks
Below is the actionscript:
Terry
_____________________
Actionscript on Fr 1 On main _root timeline:
//this produces random balls that fall from the sky
depth = 0;
allBalls = new Array();
function makeNewClip() {
clearInterval(ranID);
ran = (Math.random()*250)+500;
ranID = setInterval(makeNewClip, ran);
newClip = _root.attachMovie('good', 'good'+depth, depth++);
allBalls.push(newClip);
//trace(allBalls);
newClip._x = 140 + Math.random()* 430;
newClip._y = -50;
newClip.speed = (Math.random()*5)+5;
newClip.onEnterFrame = function() {
this._y += this.speed;
if (this._y>Stage.height) {
updateScore(-2);
for (i=0; i
allBalls.splice(i, 1);
//trace(allBalls)
}
}
this.removeMovieClip();
}
};
}
//
makeNewClip();
//
//
_root.createEmptyMovieClip('watchCollision', -2);
watchCollision.onEnterFrame = function() {
for (i=0; i
//trace('we hit the cocktail');
allBalls[i].removeMovieClip();
allBalls.splice(i, 1);
updateScore(5);
}
}
};
score = 0;
function updateScore(amount) {
score += amount;
score_txt.text = 'Score is '+score;
}
updateScore(0);
//Actionscript on slider MC, my slider MC is called 'cocktail':
onClipEvent (load) {
power = 0.5;
yspeed = 0;
xspeed = 10;
friction = 0.95;
}
onClipEvent (enterFrame) {
if (Key.isDown(Key.LEFT)) {
xspeed -= power;
}
if (Key.isDown(Key.RIGHT)) {
xspeed += power;
}
xspeed *= friction;
yspeed *= friction;
_y += yspeed;
_x += xspeed;
}
2009-01-20: Bill Trikojus said:
Hi Terry
Take the clip event code off cocktail, put the code on the frame along with the rest and change it to
cocktail.power = 0.5;
cocktail.yspeed = 0;
cocktail.xspeed = 10;
cocktail.friction = 0.95;
cocktail.onEnterFrame=function(){
if (Key.isDown(Key.LEFT)) {
this.xspeed -= this.power;
}
if (Key.isDown(Key.RIGHT)) {
this.xspeed += this.power;
}
this.xspeed *= this.friction;
this.yspeed *= this.friction;
this._y += this.yspeed;
this._x += this.xspeed;
}
to create random things dropping update the makeNewClip function to say something like
//get a random number between 1 and 3
ranClipID=Math.ceil(Math.random()*3);
//then attach the random clip. The linkage identifiers of the clips you want to attach should be clip1,clip2,clip3 etc
newClip = _root.attachMovie('clip'+ranClipID, 'good'+depth, depth++);
regarding the depth issue, the easiest solution is to place an empty movieclip on the stage at a position of x=0 and y=0 (top left corner of the stage) and give it an instance name of holder_mc. Then attach any new clips to that
newClip = holder_mc.attachMovie('clip'+ranClipID, 'good'+depth, depth++);
then at the bottom of the code on the main timeline bring the cocktail to the front.
cocktail.swapDepths(_root.getNextHighestDepth())
so now the cocktail will appear above holder_mc and any movieclips that get attached to holder_mc.
that's all I have time for I'm afraid. If you're stuck on anything I suggest you post it on the forums at actionscript.org - lots of people there that can help.
cheers
2009-03-01: AJ F. said:
Dude you rock!!! I want to show you what I got so far... I added some variables like difficulty and stuff like that.
http://spamtheweb.com/ul/upload/280209/77618_Catching_game.php
2009-08-20: Svet said:
Thank for taking the time to create this tutorial. This will help me bigtime!
2010-11-17: sven said:
Hi Bill, thanks for the brilliant tutorial.
I just have a question:
If I wanted to add for example birds falling from the sky giving you minus points when colleceted and nothing happens if not collected, how can I add that to it?
I've tried adding a new layer and just copying the code for the balls and chaged it, but now only birds fall from the sky and not the balls anymore..
I also tried just to copy it in layer one, but the same happens..
here is the script for it:
depth = 0;
//birds
allBirds = new Array();
function makeNewClip() {
clearInterval(ranID);
ran = (Math.random()*4000)+1000;
ranID = setInterval(makeNewClip, ran);
newClip = _root.attachMovie('bird', 'bird'+depth, depth++);
allBirds.push(newClip);
//trace(allBirds);
newClip._x = Math.random()*Stage.width;
newClip._y = -50;
newClip.speed = (Math.random()*10)+5;
newClip.onEnterFrame = function() {
this._y += this.speed;
if (this._y>Stage.height) {
updateScore(0);
for (i=0; i
allBirds.splice(i,1);
}
}
this.removeMovieClip();
}
};
}
makeNewClip();
//collision birds
_root.createEmptyMovieClip('watchCollision',-2);
watchCollision.onEnterFrame = function() {
for (i=0; i
allBirds[i].removeMovieClip();
allBirds.splice(i,1);
updateScore(-10);
}
}
};
what am I doing wrong?
thanks!
2010-11-17: Bill Trikojus said:
probably a clash of depths. try changing the bird code to use a birdDepth var and start it at a 1000. Or better yet update all the depth stuff to use _root.getNextHighestDepth()
Also you can have 2 functions on the same timeline called the same thing. One of the makeNewClip functions will need to be called something else.
I think there is an as3 catch game tute on this site that has goodies and baddines dropping randomly with just one function, which is a better solution.
Hope that helps
Post a comment
Garbage posts and SPAM will be deleted.