Add a win or lose animation to end of a game

Questions
1

Hello!!!

Thanks to the tutelage/help of the Awesome Sir @JohnK I got to create the foundation for my memory match game. The only thing missing is now is adding a win/lose animation to end. Here is the PG:

https://www.babylonjs-playground.com/#0XEE49#23

Would this be general JS or is there an example within BJS? Thank ya kindly!!!

:cupid: :cupid:,
Mekaboo

2 Likes
2

Hey @Mekaboo, what an awesome PG :smiley: Could you describe the win/lose animation you’re looking to create?

1 Like
3

@Mekaboo this is definitely awesome!

There’s a number of ways you could do a win screen at the end of the game. If you want simple text/GUI, you could either do vanilla js/html/css, or you could use the Babylon.js GUI system:

https://doc.babylonjs.com/how_to/gui

My 0.02 cents would be that since you’re already in Babylon, why not add something with a little bit of fun flare to it. Perhaps celebratory particle system fireworks??? :slight_smile:

https://doc.babylonjs.com/babylon101/particles

https://www.babylonjs-playground.com/#ZXI9H#4

4 Likes
4

Thank ya kindly​:blush::sparkling_heart:

What I had in mind is if a person wins the game within the set time they get something that says “Winner” or something fun happens and if not then a try again or similar.

5

This is Awesome Sauce😍

I’ve checked out particles on the ‘Examples’ page plenty of times but never though of a way to use them…this will definitely be a fun way to use it!!!

2 Likes
6

A huge THANK YOU to Sir @JohnK for being patient and
sharing his knowledge it means alot :heart:

3 Likes
7

I just added a timer on lines 62-74 via this link:How to set a countdown timer in javascript?. Trying to get the timer to connect as well as add in place of the word completed either the fireworks PG(success) or a simple Try Again with sad face font awesome or sad sprite (failed). How do I get all to function correctly?

New PG:https://www.babylonjs-playground.com/#0XEE49#24

Thanks again :blush:

8

Hey @Mekaboo - so the way this timer function is working…when the game “starts” you need to set a future date, then every second, this interval fires and creates a new “current date” element and subtracts that from the future date. If future date - current date is less than zero, then it will log the word completed.

So the current problem is that you’re not setting the future date as highlighted in the article you found:
let countDownDate = new Date("Jul 21, 2020 00:00:00").getTime();

A couple of other random suggestions/thoughts about your game to possibly make it a little better.

  • Consider limiting the alpha radius so the camera can’t rotate behind the board. Don’t let people cheat hehehe.
  • Also you might want to consider creating a grid of possible tile placements and then randomly picking one of those positions for each tile. Currently it looks like the tiles always end up in the same place.

Hope this helps!

1 Like
9

Thank ya so much❤️

I took out the date section becuase I just wanted the time but I guess it won’t function without it. So setting it to all zeros it won’t affect the game much?

As far as the alpha radius I was thinking of that :joy: becuase I took a peek on the back(I’m the owner so I can do that​:grin:)

As far as tiles the content changes on the back so I think having moving tiles probably wouldn’t be good at this time but who knows where this game will go and maybe can do that in the future😊

1 Like