Round Pong

Simple game made for a school project.

by ChadSchouggins

HTML

<div id="content">
    <div id="container" class="container">
        <img id="table" class="table" src="http://i226.photobucket.com/albums/dd12/nowhereman3814/table.png" alt="" />
        <img id="paddle_red" class="paddle" src="http://i226.photobucket.com/albums/dd12/nowhereman3814/paddle_red.png" alt="" />
        <img id="paddle_blue" class="paddle" src="http://i226.photobucket.com/albums/dd12/nowhereman3814/paddle_blue.png" alt="" />
        <img id="ball" class="ball" src="http://i226.photobucket.com/albums/dd12/nowhereman3814/ball.png" alt="" />
    </div>
    <div id="info" class="pane">
        <p class="heading">Score</p>
        <p class="score_label">RED:&nbsp; <span id="score_red" class="score"></span></p>
        <p class="score_label">BLUE: <span id="score_blue" class="score"></span></p>
        <p class="heading">Control</p>
        <input class="btn small primary" type="button" id="new_game" value=" New Game " />
        <fieldset>
            <legend>Mode</legend>
            <label><input id="is_single" type="radio" checked="checked" name="mode" />Single</label>
            <label><input id="is_versus" type="radio" name="mode"/>Versus</label>
        </fieldset>
        <fieldset id="difficulty">
            <legend>Difficulty</legend>
            <label><input id="difficulty_easy" type="radio" name="difficulty" />Easy</label>
            <label><input id="difficulty_medium" type="radio" checked="checked" name="difficulty" />Medium</label>
            <label><input id="difficulty_hard" type="radio" name="difficulty" />Hard</label>
        </fieldset>
        <div id="msg" class="msg"></div>
        <p id="show_instructions" class="clickable">Instructions</p>
    </div>
    <div id="instructions" class="popup" style="display: none;">
        <p id="hide_instructions" class="clickable" style="float:right;">[CLOSE]</p>
        <h2 style="display:inline;">Instructions</h2>
        <p class="heading">Movement</p>
        <p>Use the left and right...

CSS

html { height: 100%; } /* ie fix for bg color */

body
{
    margin: 0;
    background-color: #000000;
    height: 100%;
}

div#topbar
{
    border-bottom: 1px solid #666666;
}

div#content
{
    background-color: #000000;
}

div#content
{
    position: relative;
    width: 800px;
    /*margin-top: -80px;*/
}

div#content div.container
{
    float: left;
    position: relative;
    width: 600px;
    height: 600px;
    margin-bottom: 4px;
}

div#content img.table
{
    width: 600px;
    height: 600px;
}

div#content img.ball
{
    position: absolute;
    width: 32px;
    height: 32px;
}

div#content img.paddle
{
    position: absolute;
    width: 108px;
    height: 18px;
}

div#content div.pane
{
    float: left;
    padding: 8px;
    width: 184px;
    color: #ffffff;
    text-align: center;
}

div#content div.pane p
{
    text-align: justify;
}

div#content div.pane p.msg
{
    text-align: center;
}

div#content div.pane h2
{
    color: #666666;
    margin-bottom: 16px;
}
    
div#content div.pane p.heading
{
    border-bottom: 1px solid #cccccc;
    font-size: 1.2em;
    font-weight: bolder;
}

div#content p.msg
{
    display: none;
    font-size: 1.2em;
    font-weight: bolder;
    background-color: #333333;
    padding: 8px;
    border: 1px solid #666666;
}

div#content p.score_label
{
    font-family: "Courier New";
    font-size: 2em;
    margin: 16px 0 16px 0;
}

div#content fieldset
{
    border: 1px solid #ffffff;
    margin: 16px 0 16px 0;
    padding: 4px;
}

div#content fieldset p
{
    display: inline;
}

div#content fieldset label
{
    width: auto; /* bootstrap fix */
    padding: 4px;
}

div#content legend
{
    color: #ffffff; /* ie fix */
    padding: 0 8px 0 8px;
    text-align: left; /* chrome fix */
    margin-left: 0; /* bootstrap fix */
}

div#content div.popup
{
    position: absolute;
    top: 200px;
    padding: 32px;
    margin-left: -32px;
    border: 1px solid #ffffff;
    color: #000000;
    background-color: rgba(92, 92, 92, 0.9);
  ...

JavaScript

/** @license Copyright 2011 Chad Schouggins - Team Four Technology

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
*/

// exported symbols
/** @ignore */ $ = window.$ || null; // will be remove during compilation, avoids conflicts with jquery which otherwise may rename a function to $()
window["init"] = init;

// key codes
/** @const @type {number} */ var KEY_LEFT = 37;
/** @const @type {number} */ var KEY_RIGHT = 39;
/** @const @type {number} */ var KEY_A = 65;
/** @const @type {number} */ var KEY_D = 68;
/** @const @type {number} */ var KEY_SPACE = 32;

// table attributes
/** @const @type {number} */ var TABLE_HEIGHT = 600;
/** @const @type {number} */ var TABLE_WIDTH = 600;
/** @const @type {number} */ var TABLE_RADIUS = 225; // distance between center of table and paddles.
/** @const @type {Object.<string, number>} */ var TABLE_CENTER = {x:TABLE_WIDTH / 2, y:TABLE_HEIGHT / 2}; // stored to prevent constantly calculating the center coords.
/** @const @type {number} */ var TABLE_RING_RADIUS = 263; // radius to determine end game

//ball attributes
/** @const @type {number} */ var BALL_RADIUS = 9; // radius of actual ball (used for collision) 
/** @const @type {number} */ var BALL_RADIUS_GLOW = 16; // css value (actual image size) for use with display position
/** @const @type {number} */ var BALL_INIT_SPEED = 4;
/** @const @type {number} */ var BALL_ACCELERATION = 0.2;
/** @const @type {number} */ var BALL_MAX_SPEED = 10;

// paddle attributes
/** @const...