• Sunday , 22 October 2017

Pong – HTML5 Game Programming Tutorial [javascript]

Code Canyon



Hi, I’m back with a second tutorial video where we hack together a simple Pong game using javascript and html5. In this one do I use a bigger fontsize, so that the video better can be viewed on mobile devices. Let me know in the comments if I should use the settings in the previous video, use the fontsize in this video or use an even bigger font 🙂 (btw. the font I use in the video are Anonymous Pro, http://www.marksimonson.com/fonts/view/anonymous-pro).

:: Annotated Source ::
https://github.com/maxwihlborg/youtube-tutorials/blob/master/pong/index.html

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


Original source

3d Ocean

Related Posts

28 Comments

  1. PrιхorJr - Agario and More
    September 23, 2017 at 10:32

    You go toooooooo fast! SLOW DOWN

  2. ewomack
    September 23, 2017 at 10:32

    I made it all of the way through this video using pause and rewind – it does move really fast and covers a ton of material, including some trigonometry for ball angles and velocity. Though a little difficult for absolute newbies, it does give a great introduction to creating a simple pong game in pure Javascript (i.e., no frameworks). The finished game unfortunately doesn't have a scoring system, but the ball moves a lot like the "real" thing. The follow-up video he mentions at the end apparently didn't happen. Oh well.

  3. Gregory Tippett
    September 23, 2017 at 10:32

    This seems like a great tutorial, however the audio quality is extremely poor. The words are rapidly spoken and flanged-out, and cannot be distinguished over the very loud clicking of the keyboard.

  4. Crack YT
    September 23, 2017 at 10:32

    Didn't work 🙂

  5. Sir Twinkeltoes
    September 23, 2017 at 10:32

    I Recommend running this at 0.75 speed and pausing often … very often.
    Actually it might be better to just move frame by frame haha.

    Edit: And use plenty of comments in your own code.

  6. chris monks
    September 23, 2017 at 10:32

    your going to fast

  7. TheAsianGamer
    September 23, 2017 at 10:32

    can someone explain the use of "this." pls

  8. Scaarfii
    September 23, 2017 at 10:32

    Garbage "tutorial". Left me more questions than answers. Can't even hear the guy.

  9. Will BG
    September 23, 2017 at 10:32

    Probably not the best to learn basic game control theory with as he uses some very clever tricks to obscure some of the heavy lifting that you need to understand. Very nice compact code though.

  10. renewer
    September 23, 2017 at 10:32

    How would one make this responsive, so it fits properly on different screen sizes like desktop, tablet, and smartphone? Thanks.

  11. videosyoutube
    September 23, 2017 at 10:32

    Not having the js in an independant file…

    ABSOLUTE BARBARIC!

    good video anyways ^^

  12. El Jirado
    September 23, 2017 at 10:32

    lol, at four minutes, I couldn't figure out what was wrong but, I had the ATH in math capitalized in math, and that completely affected it.

  13. Pedro Portes Peck
    September 23, 2017 at 10:32

    did you have to do any planning for this code?

  14. El Jirado
    September 23, 2017 at 10:32

    what is he using to code this?

  15. square
    September 23, 2017 at 10:32

    just searched it, it means add

    wait add child?

    is he taking children and adding him to his house????

    this is still dark!

  16. square
    September 23, 2017 at 10:32

    append child?

    does that mean take a child?

    thats dark

  17. Joel Posner
    September 23, 2017 at 10:32

    So, at 4:28 it does it's first test where it shows the two paddles and a ball. When I do it, I get a blank screen. Nothing. I looked through the code and I can't find any difference from what he has. Are the files available for download?

  18. Tania R. Ontiveros
    September 23, 2017 at 10:32

    Thanks youu!!!

  19. olnim
    September 23, 2017 at 10:32

    I understand everything, but can not repeat yourself. (

  20. Richard Demeny
    September 23, 2017 at 10:32

    Thanks for the video. You are really good

  21. Zharan Niteshine
    September 23, 2017 at 10:32

    You lost me after a minute. I have no idea what those functions do.

  22. Jemm Jubah
    September 23, 2017 at 10:32

    please slow down i can't understand you

  23. Learn to code
    September 23, 2017 at 10:32

    you go way to fast and you dont explain anything 🙁 please make a video for beginners

  24. Derrick Domena
    September 23, 2017 at 10:32

    I need some help the player, ai and ball don't appear in the screen. Any help would be apreciated.

  25. Martin Andersen
    September 23, 2017 at 10:32

    help!I just get a white screen

  26. Giutor 73
    September 23, 2017 at 10:32

    The only thing this "tutorial" does is to show how skilled you are. Change the title, buddy….

  27. Daniel Lee
    September 23, 2017 at 10:32

    what IDE is this? is it available for linux?

  28. Joel Persson
    September 23, 2017 at 10:32

    the document what is it saved as?

    the blocks dont show up either

    <!doctype html>
    <html lang="en">
    <meta charset="UTF-8">
    <title>pong</title>
    </head>
    <body>
    <script>

    var WIDTH=700, HEIGHT=600, pi=Math.PI;
    var canvas, ctx, keystate;
    var player, ai, ball;

    player = {
    x: null,
    y: null,
    width: 20,
    height: 100,
    update: function() {},
    draw: function() {
    ctx.fillRect(this.x, this.y, this.width, this.height);
    }

    };

    ai = {
    x: null,
    y: null,
    width: 20,
    height: 100,
    update: function() {},
    draw: function() {
    ctx.fillRect(this.x, this.y, this.width, this.height);
    }
    };

    ball = {
    x: null,
    y: null,
    side: 20,
    update: function() {},
    draw: function() {
    ctx.fillRect(this.x, this.y, this.side, this.side);
    }
    };

    function main() {
    canvas = document.createElement("canvas");
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    ctx = canvas.getContext("2d");
    document.body.appendCHild(canvas);

    init();
    var loop = function () {
    update();
    draw();

    window.requestAnimationFrame(loop, canvas);
    };
    window.requestAnimationFrame(loop, canvas);

    }

    function init() {
    player.x = player.width;
    player.y = (HEIGHT – player.height)/2;

    ai.x = WIDTH – (player.width + ai.width);
    ai.y = (HEIGHT – ai.height)/2;

    ball.x = (WIDTH – ball.side)/2;
    ball.y = (HEIGHT – ball.side)/2;

    }

    function update() {
    ball.update();
    player.update();
    ai.update();
    }

    function draw() {
    ball.draw();
    player.draw();
    ai.draw();
    }

    main();
    </script>
    </body>
    </htlm>

Leave A Comment

You must be logged in to post a comment.