Add Timer to my game
Leissa

Hello!

 

I just started to use this amazing library.

I want to add a timer to a game. For eg. let's take the moles game from the tutorial. It is possible to add a timer and stop the game after 40 sec.? I want to count all the clicks and all hits and show them on the screen, after the game is finish.

 

If it is possible to do something like this, please help me with this info.

Thank you very much.

All 9 Comments
Gio

Hi Leissa and welcome to the forums

 

It's been a while since I last saw the moles tutorial, so I hope I remember it correctly.To track the number of clicks, you could just increment a variable in the onMouseDown function of your app. Initialize this variable (and one for successful hits) like this in the init function:

this.numClicks = 0;this.numHits = 0;

in the mole's onMouseDown function increment both variables:

this.numClicks++;this.numHits++;return true;

It's important that this function returns true, so the click doesn't "propagate" down to your app's onMouseDown function when a mole is clicked.

 

In your app's onMouseDown function (whcih only gets executed when the user clicks anywhere that is NOT a mole):

this.numHits++;

As for the timer - you could do it in a variety of ways. One way, is to create an object that responds to the onAppTimer event (that happens once per second by default):

var time = 40;var timerText = new TextSprite(time, '18px Arial');var timerObject = new SceneObject(timerText);timerObject.onAppTimer = function(){    time--;    timerText.setText(time);    if (time == 0)    {        // game over    }}wade.addSceneObject(timerObject, true); // note the second parameter is set to true so we automatically listen for onAppTimer events

There are nicer ways of doing this too - I'd look at these excellent resources on the Share & Fork section of our website:

 

A simple timer bar

A counter to display scores and numbers in a nice way as they change

 

They are both  set up as behaviors that you can easily reuse in your own projects.

 

I hope this helps, but if you have any more questions do feel free to ask here.

Leissa

Incredible how fast you answered to me! Thank you a lot!!!!

I will look to the codes and  I'll come back with a feedback.

Thanks again!

Leissa

I used the simple bar from Share&Fork and it is working on my app too :)

 

Now I have another issue.

I made some buttons and when you press on each you have to hear a command, different command for each button.

 

So, I created a new sprite and a onMouseDown function for each button.

I want each command to be repeated till the next button is clicked. So I inserted into the function an interval like this

 

              setInterval(function ()
                   {
                       wade.playAudioIfAvailable('commands/a.ogg');
                   }, 4000);
 
My problem is that I don,t know how to clear the interval (to stop audio file) when the next button is clicked.
So now, when you click on the first button you can hear the first command.
When you click on the second button you can hear the first and the second commands , instead to stop the first command hear only the second.
All the button sprites and the onMouseDown() for each button are in the init function.
 
Please give me an advice.
Thank you very much. 
Gio

Hi

 

setInterval returns an ID that you can use with clearInterval.

 

You could declare a variable in the init function like this

var currentInterval;

If you declare it there, then it's accessible to all your buttons' onMouseDown functions. So you can do:

if (currentInterval){    clearInterval(currentInterval);}currentInterval = setInterval(function(){    wade.playAudioIfAvailable('commands/a.ogg');}, 4000);
Leissa

Thank you very much. Done :)

Leissa

Hi,

 

I'm stuck again, for sure, cause I try hard to learn few about js too in the meantime :)

Please help me again to write a scene.

 

I try to make a shooting game and I have a kind of start menu (start page). It is an iron gate which is surrounded by a iron door frame.

At the begging the door is closed. In the middle of the door it is an object (logo. img). Clicking the logo you open the door and, in the same time, the logo is moving on the right-down corner of the door frame and 3 more buttons appear in the rest of the door frame corners (the logo will act like a button too).

 

One of these buttons is PLAY - which is clear the Scene and start the game.

The other 2 buttons and the logo (positioned each one in a different corner of the door frame) will close and reopen the door and under the door you will see a different text (logged by each button separately - commands, briefing and score).

 

All these objects (the door, the door frame, the logo and the buttons) are loaded in app.js from another file intro.js

 

In intro.js the objects are positioned in different layers.

I have a background on which you can see the text linked to each button - let's say layer.background:10

the text - text.layer:9

the door  - door.layer:8

the door frame - frame.layer:7

the buttons - buttons.layer:6

 

What I want is to add a bullet hole when you click on any of these objects. 

 

so, in app.js I have

    var self = this;

and I made a function onClick.

Didn't know how to make wade to understand that I want in app.js a specific object from intro.js I set a name(in intro.js) for the door object and in app.js I called the name.

 

this.onClick = function(eventData)

{

    var pos = eventData.screenPosition;

    var gate = wade.getSceneObject('gate'); // the door object from intro.js

    if(self.gameStart == false){

        var hole = new Animation('hole.png', 1, 1, 30);

        var holeSprite = new Sprite();
        holeSprite.addAnimation('holes', hole);
        holeSprite.playAnimation('holes');
        holeSprite.setSize(20, 20);
                if(self.doorOpen == false){     // you can shoot the door when is closed 
               gate.addSprite(holeSprite, {x:pos.x, y:pos.y});
               holeSprite.setLayer(8);
        }

    } 

 

};

 

I wanted the holes from the door to follow the door object in movement.

 

My problem:

 

How do I put the rest of the object from the intro.js in this function?

I don't know even if this onClick function in app.js  is a good idea for what I want.

 

The idea is that the player can shoot in those object and a hole will appear on the object hit. I want to avoid the logo to be with holes :). In the same time, when the door is open the holes made in the background don't have to be seen when the door is closed.

 

One more thing - in that function I have some other animations which are played when the self.gameStart = true, so I was thinking that maybe is a good idea to put in the same function the animation for intro too.

 

I tried to link the animation to the layers(which are declared in app.js) but I couldn't.

Please help me again. Thank you.

foxcode

Hi Leissa. I understand you want bullet holes to appear in the objects the door is made from and are maybe getting confused at having different pieces in different files.

 

I am not fully sure I understand your approach, but I will explain how I might approach this and some key things that you might want to know.

 

.

The first thing you want to make sure you are doing is loading your intro.js script in app.js, this is done by calling the following function in app.js, most likely in this.load()
 

wade.loadScript(file, callback, forceReload, errorCallback, dontExecute)

 

in your case something like this... wade.loadScript("intro.js");

 

 

Inside intro.js itself, you have the ability to call any public methods or variables that are declared in app.js by first writting wade.app

 

So, if you have this.layers = {background:10, foreground:8 etc...}; In intro.js, you can do this... new Sprite(myImage, wade.app.layers.background)

 

 

Hopefully that has cleared up what you can do between files a little, but to address your specific situation, I think all of the code to manage these bullet holes and introduction, should be in your intro.js file. Your actually onClick event is pretty

close though I am unsure why you use an animation for a bullet hole that is a single image. You said you have the various objects, door frame, door etc. If this is true, then inside intro.js you can simply do the following.

var bulletHole = function(position, parent) // Make a bullet hole by adding sprite to parent object and set fixed offset from parent{  var sprite = new Sprite("bulletHole.png", wade.app.layers.front);  sprite.setSize(20, 20);  var offset = {x:parent.getPosition().x - position.x, y:parent.getPosition().y - position.y};  parent.addSprite(sprite, offset); };var door = new SceneObject(stuff here); // create your door however you aredoor.onClick = function(eventData){    bulletHole(eventData.screenPosition, this);};

I had very little time to write this so I apologize for typos/mistakes, if you need more help feel free to ask, I will have more time when I get home.

Leissa

Thank very much and excuse me for my late answer.

 

Unfortunately it is not working, maybe because the way I constructed the intro.js file.

 

First part I made it like you said. The intro,js file is loaded in app.js and the layers are declared in the same way you said.

 

I think the problem is inside intro.js

 

In Intro class I have 3 functions.

Intro = function()

{

this.onAddToScene = function(){   //the first function

        //where only one sprite is added to this.owner like this:

        var logo = new Sprite('images/door/logo.png', wade.app.layers.doorButtons-1); // the front layer

        this.owner.addSprite(logo, {x:0, y:0});
        this.owner.setName('logo');
 
        // the rest of the sprites(buttons, door, doorframe) looks like this:
        this.commandsButton = new SceneObject(new Sprite('images/buttons/commandsButton.png', wade.app.layers.doorButtons));
        this.commandsButton.setPosition(0, 0);
        wade.addSceneObject(this.commandsButton);
        // each button have here another function for button action
        this.commandsButton.onMouseDown = function(){//the button action.....};
        wade.addEventListener(this.commandsButton, 'onMouseDown');
 
        // after this one the second button made in the same way - and all the elements of the door and at the end:
         wade.addEventListener(this.owner, 'onMouseDown');

};

 

this.onMouseDown = function()  // the second function- if you click on the logo, the logo and the 3 buttons move in the corners                                // of the door frame

 

{
        var commands = this.commandsButton;
        var score = this.scoreButton;
        var play = this.playButton;
            this.owner.moveTo(+325, +220, 1000);
            commands.moveTo(+325, -220, 1000);
            score.moveTo(-325, -220, 1000);
            play.moveTo(-325, +220, 1000);
        return true;
};
 
this.gateMovement = function() // used on click on the button(in function onMouseDown() attached to each buttonObject, is moving the door down and up again to see under the door different texts depending on the button you clicked 
{
};
 

};

 

This is the Intro class function.

 

I loaded it in app.js in this.load = function(){};

In the same app.js after load function come this.init = function(){//here are just the setup things min/max screen size, multitouch a.s.o. and at the end  this.door(); }

 

this.door = function(){

       wade.addSceneObject(new SceneObject(0, Intro, 0, 0));

};

 

after this come this.game = function(){//the game} which is called from intro.js when you press PLAY button on the door frame.

 

I think is not a good thing to put in intro.js so many onMouseDown functions (one for each element of the door) in onAddToScene function but I didn't know how to do it in other way. It's hard cause I don't understand really good how js works, I just started to learn.  For example you helped me a lot cause I learned now about parent and child and little by little I catch the sense.

 

I really don't know how to implement the bulletHole function.

 

I found this WADE and I liked it so muuuch that I decided to start learning.

Any kind of help is really appreciated. Thank you a lot.

Gio
Hi Leissa. Is it possible for you to share your code with us? What you have posted makes sense, but we are missing the overall picture I think.

If you want you can create a share and fork project or, if you want to keep it private, you could send me a private message with a zip file of your project.

Seeing the whole thing will help us help you
Post a reply
Add Attachment
Submit Reply
Login to Reply