D4mations.com

Flappy Bird #1 – HTML5 Game Programming Tutorial [javascript]



My first simple mobile game using html5. The series will adress all necessary steps to create a full-fledged game from scratch using Javascript, html and css, and then port it to android and ios using the cocoonjs cloud compiler. Inspiration for the game is off course from the brilliant game by .gears studios. Play more of their games on their website: http://www.dotgears.com.

:: Starter Pack ::
https://github.com/maxwihlborg/youtube-tutorials/tree/master/flappy/starter

:: Other Stuff ::
https://github.com/maxwihlborg
http://maxwihlborg.com/


Original source

d4mer

, , , , , , , , , ,

37 responses to “Flappy Bird #1 – HTML5 Game Programming Tutorial [javascript]”

  2. Hey Max, I've been a long time fan of you channel and have been watching since you had only two videos. I was just wondering in these types of project would you recommend coding the sprite.js file first or the index.html file first. What's more important having all the asset loading done first or the game?

  10. Sorry for contacting you on this matter, but I am really stuck at a certain stage and I was wondering would you be able to let me know what is going wrong in my code. I am at the stage where you click the splash screen (27.24). It won't disappear for me. I have went over the tutorial 4 times to this stage and I still am getting this error. I would really appreciate if you could spare a few mins of your time to help out student programmer.

    http://pastebin.com/pRVFW2WU

  13. Thank you. This is a great video. It is really helpful that you put in so many places where you check your process.
    I have watched other people code programs for 20 minutes with no checking in place. That means when I mess up the code, I have no idea where the problem can be and have to look over 20 min worth of video and try to find the place I messed up.

    Good job.

  15. Hey Max! Thanks so much for this tutorial. I have learned more in the first 10 minutes than I thought.
    However, after 12:30, where you finish the base for the update function to loop the foreground, something goes wrong.
    As soon as I load the page, the foreground moves to the left but doesn't regenerate on the right, so it basically runs off the screen. Any idea what the issue is here?

    Also, why is the % (modulus) necessary in the update line for fgpos?

    Thank you dearly

  22. Nice video Max.. To all or most comments, why are you guys moaning? youtube isn't to learn programming, buy books, go to college etc, why would anyone want to copy flappy birds code? to
    show off to friends that you can copy code? theres many sprite tutorials out there, youtube is for ideas, not to learn, most of us who see code on youtube think hmm i like the way they structured their variable names or prototype patterns etc but never i repeat never pause the video to copy the whole code expecting it to work, thats why programming on youtube is really for intermediate coders but channel owners will never say that as they want lots subscribers and views(i know of many reasons why but wont list the hundreds here).. Also there's frameworks and libraries used at times so the beginner moany angry person who wants to code but has not yet read one whole book of any computing aspects will not spot this at all and copy code ans wonder why it doesn't work.. ANSWER: It doesnt work because you don't know what you are doing!!! lol. i had fun writing all of that crap.. If you didn't unserstand it then its because i wrote all this in another form of programming language, no you say, how would you know if you do not even know one programming language lol (to know something is to be able to get work done without searching youtube, i mean who searches youtube to learn how to kiss for instance? no one i hope lol, so ya see, just like programming, great to learn some new concepts etc but to learn ground up, no no no and this is the reason why many people didnt get the javascript inheritance crap which is not the same but similar in all other languages which goes to show the language they came from they hardly knew it good enough either.. What a world…

  25. Thanks for this video!
    It really helped me to code that in parts and see each of them work. The whole code would just make me stare at my desktop with steam coming out of my ears. I didn't code for some years now and that is my first step with javascript as a new language. I think it provides a good glimpse into this language and now I know more about where I can start with my own stuff. 🙂

  33. can you explain more regarding this part? 😀

    score += p.x === bird.x ? 1 : 0;

    // collision check, calculates x/y difference and
    // use normal vector length calculation to determine
    // intersection
    var cx = Math.min(Math.max(bird.x, p.x), p.x+p.width);
    var cy1 = Math.min(Math.max(bird.y, p.y), p.y+p.height);
    var cy2 = Math.min(Math.max(bird.y, p.y+p.height+80), p.y+2*p.height+80);
    // closest difference
    var dx = bird.x – cx;
    var dy1 = bird.y – cy1;
    var dy2 = bird.y – cy2;
    // vector length
    var d1 = dx*dx + dy1*dy1;
    var d2 = dx*dx + dy2*dy2;
    var r = bird.radius*bird.radius;
    // determine intersection
    if (r > d1 || r > d2) {
    currentstate = states.Score;
    }

Leave a Reply