Flappy Bird in HTML5 and WebGL

Showcase
1

I’ve built a clone of Flappy Bird in PlayCanvas.

flappybird.gif600×600 963 KB

PLAY THE GAME!

Check out the project here:

https://playcanvas.com/project/375389/overview/flappy-bird

All I had to do to make the game is download the game’s sprite sheet and watch a YouTube video of the gameplay. I think I got pretty close to the original. There’s a little more tuning and tweaking but it’s nearly there. Pretty cool! :smiley:

The game should run at 60FPS on pretty much any device. It’s only 280KB so loads super fast!

My one biggest take away from making the game:

I now use events for most inter-entity communication. So instead of doing:

ENTITY A:

var thing = app.root.findByName('Thing');
thing.script.myScript.doSomething();

ENTITY B:

doSomething: function () {
    console.log('Let's do some work...');
},

I do:

ENTITY A:

app.fire('someevent');

ENTITY B:

initialize: function () {
    app.on('someevent', function () {
        console.log('Let's do some work...');
    }, this);
},

This made my code way cleaner. I can’t believe I’ve only just started to use the event system in my games!! Check out the game’s source to see how I used events in more detail. I’m not saying it’s the best structured code in the world (it’s not tutorial-grade) but it should be of interest.

3 Likes
2

Thanks for the tip.

Can we pass some argument when we fire the event so that Entity B can receive some values from Entity A?

3

Yes, whatever argument you pass on app.fire after the event’s name becomes available as an argument on the listener.

ENTITY A:

app.fire('someevent', data1, data2);

ENTITY B:

initialize: function () {
    app.on('someevent', function (data1, data2) {
        console.log('Let's do some work with: '+data1);
    }, this);
},

Thanks @will for the insight! I was avoiding using events because I thought that the event listener should be placed inside the update(dt) function. And that made the event fire several times and not only once.

Thumbs up!

4 Likes
4

Just what I needed today…thanks for the example.

1 Like