Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

Get my first indie minibook: From null to full HTML5 cross platform game

Emanuele Feronato Game design, HTML5, Javascript, Monetize, Phaser

Today I am ready to show you the project I have been working during these days: my first indie minibook called From null to full HTML5 cross platform game.

As the title suggests, in this small book – less than 70 pages – I will take you by hand from the very bare bones of JavaScript until the creation of a complete HTML5 cross platform game using Phaser framework. During these months I published more than 50 phaser tutorials and prototypes but as far as I can see there isn’t yet a guide which explains how to make games with Phaser from scratch. So here it is.

Designed especially for beginners but also useful to skilled JavaScript programmers who want to make HTML5 games, this book guides you to the creation of a game like Concentration with some twists and comes with 23 – twenty three – code samples, one for each step in the making of the game.

Have a look at the content, each folder contains the working example of what’s you should get by following the book.

By the end of the book, you will have a complete game made by you. You can point the browser to this link to play the game you are about to create, it’s cross platform so it works both from desktop and from mobile devices.

I tried to put all the experience I made in the making of my three previous books into this one, and I am sure you will find it easy and useful. I am sure you won’t find a book covering more in depth the creation of these kind of games.

Also, this is only the first of a series of minibook covering in detail various kinds of games. I am already in the writing of the second minibook, but I am open to suggestions: which topic would you like to see covered in detail?

Last but not least, getting the minibook you will give the blog a great help, I plan to add more and more content to the blog without annoying ads here and there, so if you love the book, I hope you will love this minibook too.

** EDIT NOVEMBER 23, 2015: The book has been update for the second time, now has 26 code samples, 73 pages is updated to Phaser 2.4.4

You can get the minibook and the source code samples for as low as $7.99

You can also get the book on Gumroad or Leanpub

And there are more offers for you!

Create HTML5 vertical endless runner cross platform games book + source codes
For as low as $14.99 you can get this minibook, all source codes, help the blog and receive free updates!

2 books pack
And if you want more knowledge, I made a special promotion: you can get this book + my previous book From null to full HTML5 cross platform game for only $18.99, which means one book is 50% OFF
Ultimate HTML5 pack
And with an extra discount you can also have my whole HTML5 commercial collection with this book + my previous book From null to full HTML5 cross platform game + the complete and commented source code of HTML5 commercial game Globez for $33.99 which means one book is for free!
Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 68

    1. Post
      Author
        1. Post
          Author
    1. Post
      Author
    2. Leonardo

      English is not so difficult and, although it’s not my native language (I’m from Argentina and speak spanish), we should be grateful Ema did this book besides all these articles he’s publishing. I think we people should make some effort and try to understand the book instead of requesting even more effort from others.

      I would gladly translate the entire book if I had a copy of it, but I have no credit card and Customs in my country would retain it, so I have no choice to have it. I will have to learn all these things from Internet alone, which I don’t think it’s as intuitive as the book Ema did for all of us.

      My apologies if I sound rude but… come on. HTML5 games are now a “boom” like Android apps were (and still are). Let’s make good use of the fresh material that comes out.

      Greetings from Arg.
      Leo.

      1. Michael

        I totally agree with you. This book is a great opportunity and pleasure to practice English. I guess there is no point in translating this kind of materials into other languages. If you are able to get know HTML and JS you surely will manage to learn english at least written. The sooner the better.
        Leonardo, if you have a problem with making a payment from your country contact Emanuele. I’m sure he will find a way you can have the mini book ;)

  1. srinivas

    Hi Emanuele,
    I am great follower of your blog. I started my career by learning your articles.
    This is another good article. You are inspiration to lot of other developers.
    Are you providing any premium courses.

    1. Post
      Author
  2. Vitaliy

    Hi, Emanuele. My name is Vitaliy, and I live in occupied territory. I don’t buy this book. Could you send it for free on my mail? Thanks!

    1. Post
      Author
        1. Post
          Author
  3. Yemane

    Happy to have a dedicated contributor like you. We don’t yet introduced e-commerce in our country how can we got your mini book. Can you make a favor for me please!
    I owe you much in advance.

  4. Akhil Raja

    Hey Emanuele,

    I am awestruck by your work and i just started out with phaser. I live in India and i dont have a paypall account. Basically dont have enough to pay for the book, but i am really interested in learning from the book. Can you please help me out with the sending me the book. I will surely learn work and try to pay you back for your efforts. I need to start out and my employer asked me to start here. Any help would be awesome. I would please request you to help me now, So i can develop cool stuff and pay you heartfully once i am through

  5. Akhil raja

    Hey
    I am genuinely interested in learning from your book. Can you please help me or by sending me a free copy?

  6. Pingback: Prove you can make a pure JavaScript game and win a lot of prizes with js13kGames competition | Emanuele Feronato

  7. Santiago

    Do you explain how to publish the games made with Phaser to android and iOS?
    In matter of effects, is that possible?
    I mean, is possible to publish the games as apps and not play them in the mobile browser?
    Is better than cocos?

    1. Post
      Author
    1. Post
      Author
      Emanuele Feronato

      It uses 2.3 and will be always be updated to the latest, next week will come 2.4 version with some more extra free content

  8. nid

    Hi, I am actionscript developer since 2003. Planning to buy your book.
    – is this book cover performance tips? if not, will it cover on your second minibook?
    – just wondering how is the performance if compile to android/ios (is it comparable with starling?)
    – hope my as3 experience will help me in learning pharser framework.

    1. Post
      Author
      Emanuele Feronato

      Your AS3 experience will surely help you. This book does not cover performance tips as it’s a starting guide, but next books surely will

  9. Pingback: My mini book “From null to full HTML5 cross platform game” gets an update but keeps same the price! | Emanuele Feronato

    1. Post
      Author
      Emanuele Feronato

      send me an email to info[at]emanueleferonato.com with your paypal email. You should have received an auto-generated email, anyway let me check.

  10. Thyago

    Hello , I wonder if in his book deals with a way to convert the PhaserJS games for Android without their stay with lags , ( very low frames) , I used , Ionic , Phonegap , IntelXDK and CocoonJS put all these tools the game is very slow.

    1. Post
      Author
  11. Samuel Christopher

    Hello… I like your work and your desire of helping others to learn this way, i wish i can afford buying your ebook, i really want to learn good stuff like this but i don’t have a paypa or visa and can’t afford it. So pls if you can help me by sending a free copy of this book to my mail, i will be forever greatful .Thanks. This is my mail: ebusameric@gmail.com

  12. Anton

    Hi Emanuele,

    I just order your book with Paypal however I doubt that you have the address. Could you send me a mail so I can confirm the right address?

    Cheers,
    Anton

    1. Post
      Author
  13. Rob McKeown

    Hi Emanuele,
    I’m developing a class on Javascript that I will be pitching to a local school (http://www.reedacademy.net) for kids with emotional issues (mostly autism). I was wondering if it is ok to base it partially around the examples in your book. I’ll be doing this for free so my second question is if you could provide a copy for free. If you can’t, I understand and will probably buy it anyway for myself. Looking forward to more books. Thanks in advance.

    Rob

    1. Post
      Author
    1. Post
      Author
    1. Post
      Author
      Emanuele Feronato

      You should have received a mail with the download link. If not, please write to info[at]emanueleferonato.com with the same email you used to buy the book

    1. Post
      Author
      Emanuele Feronato

      You should have received a mail with the download link. If not, please write to info[at]emanueleferonato.com with the same email you used to buy the book

    1. Post
      Author
  14. microcipcip

    Hi Emanuele, I have bought the book, I’d like to ask you a question about a small snippet of code that I don’t fully understand, inside the showTile function, there is this condition: ‘selectedArray.indexOf(target) == -1′. If I console.log selectedArray after two push, I only see [Object, Object], so I have been wondering how does indexOf(target) know the right Object index/reference?

    Another question I have is, where is the target coming from on showTile: function(target) {}? Is it based on callbackContext from this.add.button?

    1. Post
      Author
      Emanuele Feronato

      Hello,
      in this line: var tile = game.add.button(leftSpace + i * (tileSize + tileSpacing), topSpace + j * (tileSize + tileSpacing), “tiles”, this.showTile, this);
      when showTile is called, automatically Phaser passes an argument which is the target of the click/tap

  15. José María

    Hello Emanuele,

    I’ve just purchased the book. I have two questions for you.

    1. Do you plan to translate this book? If you ever need someone for translating the book into Spanish, feel free to send me an e-mail. I would do it for free.

    2. Do you plan to make a book similar to this but for creating an online-game? I think it would be so valuable since there isn’t a lot of content related to Servers (node), Sockets, etc. I am struggling right now with that part and there are just two free tutorials (one in French) on the internet. If you know some tutorials/books where I can learn that part, I would like to know.

    Anyways, thank you for the book and for the great work!

    1. Post
      Author
      Emanuele Feronato

      As for the online-game question, it’s a good idea. I will publish some tutorials.

      You got mail for the translation.

    1. Post
      Author
    1. Post
      Author
      Emanuele Feronato

      You should have received an automatic email. Check your spam folder or write me at info[at]emanueleferonato.com with your paypal email and I’ll send you the link

  16. David Alfonso

    Hola, el 12/02/2016 compre el libro from-null-to-full-html5-cross-platform-game/ por Paypal. Como puedo descargarlo? No tengo ningún enlace de descarga !!!

    1. Post
      Author
      Emanuele Feronato

      Hello, you should have received an automatic email. Check your spam folder or write me with your paypal email at info[at]emanueleferonato.com

  17. Gianmaria Furlan

    Ciao, ci siamo conosciuti oggi al Game Development Saturday 2016, sono quello che ti ha fatto un sacco di domande :-) complimenti per il sito… Ciao Gianmaria

    1. Post
      Author
  18. SUSAN

    This page is for the book From Null to Full. I’m confused on the discount offered for 2 pack & ultimate pack. Is it an error? The title for the previous book is the same?

    “2 books pack
    And if you want more knowledge, I made a special promotion: you can get this book + my previous book From null to full HTML5 cross platform game for only $18.99, which means one book is 50% OFF”

    “Ultimate HTML5 pack
    And with an extra discount you can also have my whole HTML5 commercial collection with this book + my previous book From null to full HTML5 cross platform game + the complete and commented source code of HTML5 commercial game Globez for $33.99 which means one book is for free!”

    1. Post
      Author
    1. Post
      Author
  19. Rafael Taro

    Hi Emanuele, did some adjustments on the code, don’t know if it’s the right way to do that…. since the game uses a timer i did a enable / disable button function. Is there a better way to do that?
    added an array to keep the buttons
    on checkTiles removed buttons when they are correct.
    for(var i=0; i<btns.length; i++) {
    if(selectedArray[0] == btns[i]) {
    btns.splice(i, 1);
    }
    if(selectedArray[1] == btns[i]) {
    btns.splice(i, 1);
    }
    }

    made a enable / disable button functions
    disableButtons: function() {
    for(i=0; i<btns.length; i++) {
    btns[i].inputEnabled = false;
    }
    },
    enableButtons: function() {
    for(i=0; i<btns.length; i++) {
    btns[i].inputEnabled = true;
    }

    }

    and disable eveytime selectedArray.length == 2 and enabled it back when the timer function is called…

    is there a cleaner way to do that? Had to do this, because the game was freezing when clicked too fast on the cards.

  20. Dylan

    Just wanted to say thanks for making this book.

    I’ve tried getting into Phaser a number of times, but everytime I tried to I just could not understand it. I went over the tutorials on the Phaser website, watched videos, but no matter what I tried I just couldn’t get it and I just always felt really lost.

    Then I looked around for paid tutorials and books, but a lot of them are pretty expensive, and I didn’t want to spend a lot of money on something that I’m even not sure would help me. But then I found Null to Full, and it being the price that it is and aimed towards total beginners, I decided to just buy it. I figured if it doesn’t really help me, then it’s not a big deal since it doesn’t cost that much.

    Well I sure am glad I bought it. After working through this book, everything finally clicked in my head. Everything that really confused me about Phaser I could finally understand. There’s still a lot for me to learn about Phaser, but now that I get the basics of how Phaser works, I’m having a pretty easy time learning learning more advanced things.

    Thanks again, this book was an immense help to me.

    1. Post
      Author

Leave a Reply to Thyago Cancel reply

Your email address will not be published. Required fields are marked *