D4mations.com

Pong – HTML5 Game Programming Tutorial [javascript]



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

d4mer

, , , , , , , , , , ,

28 responses to “Pong – HTML5 Game Programming Tutorial [javascript]”

  2. 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.

  9. 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.

  17. 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?

  28. 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 Reply