Pong

This fiddle demonstrates Atari's 1972 version of Pong. To read the related article visit weeklygame.tumblr.com

by weeklygame

HTML

<canvas id="pong" width="500" height="250"></canvas>

CSS

#pong {
    background: black;
}

JavaScript

// create canvas object
function Pong() {
    var canvas = document.getElementById('pong');
   
    this.context = canvas.getContext('2d');
    this.context.fillStyle = 'white';
    this.context.strokeStyle = 'white';
    this.width = canvas.width;
    this.height = canvas.height;
    this.wcenter = this.width / 2;
    this.hcenter = this.height / 2;
};

// create ball object
function ball(x,y) {
    this.width = 20,
    this.height = 20,
    this.x = x,
    this.y = y,
    this.startingPosition = Pong.center,
    this.startingDirection = null
};

// create paddle/player object
function paddle(x,y) {
    this.width = 20,
    this.height = 50,
    this.x = x,
    this.y = y,
    this.score = 0,
    this.draw = function() {
        player.fillRect(this.x, this.y, this.width, this.height);
    };
};

// update method to rerender the board
Pong.prototype.update = function() {
    if (this.paused) {
        return;
    }
};

// draw method to render the board
Pong.prototype.draw = function() {
};

// Init game
var pong = new Pong();
 
function render() {
    pong.draw();
    pong.update();
    
    // Run the loop - not the full polyfill
    window.requestAnimationFrame(render);
};

(function init() {
    pong.context.beginPath();
        pong.context.setLineDash([6,4]);
        pong.context.moveTo(pong.wcenter, 10);
        pong.context.lineTo(pong.wcenter, pong.height);
    pong.context.stroke();
    
    render();
})();