Time Flies

{Introduction @showdialog}

Are you ready to make a quick, fun game that uses a timer?

Let’s get to it!

Animated picture of a frog trying to catch a fly

{2. Add Background}

Before you add a frog, it’s going to need a place to sit 🐸

:tree: From the ||scene:Scene|| category, grab
||scene: set background image to [ ]||
and snap it into the
||loops(noclick):on start|| container already in the workspace.

~hint Want something else?💡

If you don’t want to use the provided background, click on the image and you will be able to draw something new. Or, you can switch to the Gallery tab at the top and choose a background that has already been created.

hint~

:mouse pointer: Click Next when you’re ready for the next instruction.

//@highlight
scene.setBackgroundImage(flies_imgs.background)

{3. Add a Sprite}

Time for a hero!

:paper plane: From ||sprites:Sprites||, drag
||variables(sprites):set [frog] to sprite [ ] of kind [Player]||
into the end of the
||loops(noclick):on start|| container.

~hint Don’t want that frog?💡

If you don’t want to use our frog, you can click on the frog image in the workspace and you will be able to draw something new. Or, you can switch to the Gallery tab and choose something else.

hint~

scene.setBackgroundImage(flies_imgs.background)
//@highlight
let frog = sprites.create(flies_imgs.frog, SpriteKind.Player)

{4. Try It}

Take a look at your Game Window in the bottom right corner.

Is your frog sitting where you want it? If not, you can fix it in the next step.

{5. Set Position}

:paper plane: If you don’t like where your sprite has ended up, snap a
||sprites:set [frog] position to x [80] y [60]||
block into the end of the
||loops(noclick):on start|| container.

:mouse pointer: Play with the x (horizontal) and/or y (vertical) positions until your sprite appears where you want it.

# BlocksExistValidator
* Enabled: false

let frog: Sprite = null
scene.setBackgroundImage(flies_imgs.background)
frog = sprites.create(flies_imgs.frog, SpriteKind.Player)
//@highlight
frog.setPosition(85, 80)

{6. Add a Fly}

😋 It’s snack time
The frog needs something to eat.

:paper plane: Snap a
||variables(sprites):set [fly] to sprite [ ] of kind [Food]||
block into the end of the
||loops(noclick):on start|| container.

let fly = sprites.create(flies_imgs.fly, SpriteKind.Food)

let frog: Sprite = null
let fly: Sprite = null
scene.setBackgroundImage(flies_imgs.background)
frog = sprites.create(flies_imgs.frog, SpriteKind.Player)
frog.setPosition(85, 80)
//@highlight
fly = sprites.create(flies_imgs.fly, SpriteKind.Food)

{7. Get It Moving}

😴 There’s no challenge if the fly just sits there

:paper plane: To get the fly moving, snap a
||sprites:set [fly] velocity to vx [200] vy [100]||
into the the end of the
||loops(noclick):on start|| container.

💡 You can customize your fly’s speed and direction by playing with those numbers. Anything between 100 and 200 is fun.

let fly = sprites.create(flies_imgs.fly, SpriteKind.Food)

let frog: Sprite = null
let fly: Sprite = null
scene.setBackgroundImage(flies_imgs.background)
frog = sprites.create(flies_imgs.frog, SpriteKind.Player)
frog.setPosition(85, 80)
fly = sprites.create(flies_imgs.fly, SpriteKind.Food)
//@highlight
fly.setVelocity(200, 100)

{8. Try It}

👀 Try your game again

Does it do what you expected? Did the fly leave the screen too fast for you to see?

let fly = sprites.create(flies_imgs.fly, SpriteKind.Food)

{9. Bounce}

🕐 That didn’t last long

To give the frog a fighting chance, we’ll want to keep the fly on screen.

:paper plane: From ||sprites:Sprites||, grab a
||sprites:set [fly] bounce on wall <on>||
block and snap it into the the end of the
||loops(noclick):on start|| container.

let fly = sprites.create(flies_imgs.fly, SpriteKind.Food)

let frog: Sprite = null
let fly: Sprite = null
scene.setBackgroundImage(flies_imgs.background)
frog = sprites.create(flies_imgs.frog, SpriteKind.Player)
frog.setPosition(85, 80)
fly = sprites.create(flies_imgs.fly, SpriteKind.Food)
fly.setVelocity(200, 100)
//@highlight
fly.setBounceOnWall(true)

{10. Press the Button}

We want to press the button to catch the fly!

:game: From ||controller:Controller||, drag
||controller:on [A] button [pressed]||
out into an empty spot in the workspace.
:random: Inside the new
||controller(noclick):on [A] button [pressed]||
container, drop a
||logic:if <true> then / else||
block (from the ||logic:Logic|| category).

let fly = sprites.create(flies_imgs.fly, SpriteKind.Food)

//@highlight
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    //@highlight
    if (true) {
    } else {
    }
})

{11. Get It?}

:paper plane: From ||sprites:Sprites||, grab
||sprites:<[frog] overlaps with [fly]>||
and drop it in to replace <true> in the
||logic(noclick):if <true> then / else|| block.

let fly = sprites.create(flies_imgs.fly, SpriteKind.Food)

let frog: Sprite = null
let fly: Sprite = null
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    //@highlight
if (frog.overlapsWith(fly)) {
    } else {
    }
})

{12. Check for Flies}

When we press the Ⓐ button, one of two things could happen:

The fly will be overlapping the frog and we win the game with a snack
The fly will not be overlapping the frog and our player will lose a life

:circle: To create the first case, drag
||game:game over <WIN>||
into the top section of the
||logic:if <frog overlaps with fly> then / else||
block.
:id card: For the second case, drag
||info:change life by -1||
into the bottom (else) section of the
||logic:if <frog overlaps with fly> then / else|| block.

~hint I don’t see an (else) section 🤷🏽‍♀️

There are two styles of
||logic(noclick):if <true>||
containers to choose from:

if (true) {
    }

if (true) {
    } else {
    }

If you see the first one, click the white plus sign (+) at the bottom, and it will turn into the second one.

hint~

let fly = sprites.create(flies_imgs.fly, SpriteKind.Food)

let frog: Sprite = null
let fly: Sprite = null
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    if (frog.overlapsWith(fly)) {
        //@highlight
        game.over(true)
    } else {
        //@highlight
        info.changeLifeBy(-1)
    }
})

{Step 13}

👀 Try your game in the simulator

How is it shaping up? Do you lose a life if the fly isn’t over the frog when you press (A)? Do you win the game if it is?

let fly = sprites.create(flies_imgs.fly, SpriteKind.Food)

{Step 14}

⌚ Don’t be late

Add a sense of urgency by including a countdown timer.

:id card: From ||info:Info||, grab
||info:start countown [10]s||
and drag it to the end of the
||loops:on start|| container.

Now you have exactly 10 seconds to catch the fly before the game ends!

let fly = sprites.create(flies_imgs.fly, SpriteKind.Food)

let frog: Sprite = null
let fly: Sprite = null
scene.setBackgroundImage(flies_imgs.background)
frog = sprites.create(flies_imgs.frog, SpriteKind.Player)
frog.setPosition(85, 80)
fly = sprites.create(flies_imgs.fly, SpriteKind.Food)
fly.setVelocity(200, 100)
fly.setBounceOnWall(true)
//@highlight
info.startCountdown(10)

{Step 15}

🎉 Congratulations

You’ve made a game that tests your timing!

When you’re finished coding, click Done to share with family and friends, or look at the challenges below for suggestions on modding your game.

:question: Try adding a block to change the number of lives you start with.
:question: Instead of only one fly, start with three and have one disappear each time you lose a life.
:question: Change the theme so that instead of a frog catching flies, it’s something entirely different!

# BlocksExistValidator

let fly: Sprite = null
let frog = sprites.create(flies_imgs.frog, SpriteKind.Player)
frog.setPosition(80, 60)
info.startCountdown(10)
fly.setVelocity(200, 100)
fly.setBounceOnWall(true)
scene.setBackgroundImage(flies_imgs.background)

controller.A.onEvent(ControllerButtonEvent.Pressed, function () { })
frog.overlapsWith(fly)
if (false) { } else { }
game.over(true)

let list = sprites.allOfKind(SpriteKind.Food)
list.pop().destroy()
for (let index = 0; index <= 4; index++) {

}
for (let index = 0; index < 4; index++) {

}

flies_imgs=github:kiki-lee/flies_imgs#v0.0.3

controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    if (frog.overlapsWith(fly)) {
        game.over(true)
    } else {
        info.changeLifeBy(-1)
    }
})
let frog: Sprite = null
let fly: Sprite = null
scene.setBackgroundImage(flies_imgs.background)
frog = sprites.create(flies_imgs.frog, SpriteKind.Player)
frog.setPosition(85, 80)
info.startCountdown(10)
info.setLife(3)
fly = sprites.create(flies_imgs.fly, SpriteKind.Food)
fly.setVelocity(200, 100)
fly.setBounceOnWall(true)

list = sprites.allOfKind(SpriteKind.Food)
    list.pop().destroy()
    for (let index = 0; index <= 4; index++) {

    }
    for (let index = 0; index < 4; index++) {

    }
    music.play(music.createSong(hex`00780004080200`), music.PlaybackMode.UntilDone)
music.play(music.createSong(hex`0078000408020100001c00010a006400f4016400000400000000000000000000000000050000041e0000000400012a04000800012708000c00012410001400012218001c000120`), music.PlaybackMode.UntilDone)
music.play(music.createSoundEffect(WaveShape.Sine, 5000, 0, 255, 0, 500, SoundExpressionEffect.None, InterpolationCurve.Linear), music.PlaybackMode.UntilDone)

Edit this page on GitHub
Edit template of this page on GitHub
Edit template of this page on GitHub