Javascript ActionScript3
banner
navBar resume programming
scriptingBar
 
HTML5 Pong
This is the one and only Pong. Normally a Pong clone would not even be considered for something as important as my portfolio, however in this case it is a quick and easy way to demonstrate the interactivity and animation abilities of HTML5. This implementation uses the JavaScript canvas tag. I've not done any other experimentation with HTML5 as it still has quite a ways to go before I'd begin using it frequently. Mainly standardization as this type of game/program behaves differently in each browser which takes away from it's practicality.
 
pong.html
<html>
  <head>
    <title>Pong</title>
    <link href='master.css' rel='stylesheet'>
    <script src='pong.js' type='text/javascript'></script>
  </head>
  <body onload='checkSupported();'>
    <span id='logo'>PONG</span> <br>
    <canvas id="canvas" width="400" height="300"></canvas>
    <br> <br> <span id='logo'>Scores:</span> <br>
    P1: <div id="P1score"></div>
    P2: <div id="P2score"></div>
  </body>
</html>
 
pong.js
function checkSupported() 
{
    canvas = document.getElementById('canvas');
    if (canvas.getContext)
    {
        // Canvas is supported
        game(); //start game
    }
    else 
    {
        // Canvas is not supported
        alert("We're sorry, but your browser does not support the canvas tag. Please use any web browser other than Internet Explorer.");
    }
}

function game()
{
    //declarations/init////////////////////////////////////
    ctx = canvas.getContext('2d');
        
    playerSpeed=0.25; //player paddle speed
    p1x=50; //player 1 x coord
    p1y=50; //player 1 y coord
    p2x=300; //player 2 x coord
    p2y=50; //player 2 y coord
    ballSpeed=0.05; //ball speed
    ballX=150; //ball x coord
    ballY=150; //ball y coord
    ballStartX=ballX; //ball starting x coord
    ballStartY=ballY; //ball starting x coord
    ballXvel=1.0; //ball x velocity
    ballYvel=1.0; //ball y velocity
    
    //p1 score
    var P1score=document.getElementById('P1score');
    P1score.innerHTML=0;
    //p2 score
    var P2score=document.getElementById('P2score');
    P2score.innerHTML=0;
    
    //flags/////////////////////
    var bGameOver=false; //are we done playing    
    p1Up=false; //is player 1 going up?
    p1Down=false; //is player 1 going down?
    p2Up=false; //is player 2 going up?
    p2Down=false; //is player 2 going down?
    ballUp=false; //is ball going up?
    ballDown=false; //is ball going down?
    ballLeft=false; //is ball going left?
    ballRight=false; //is ball going right?
    ////////////////////////////
    
    //timers? lol?///////
    prevTime=new Date();
    curTime=new Date();
    deltaTime=new Date();
    /////////////////////
    //////////////////////////////////////////////////////
    
    //do main loop as fast as fast as js can handle
    setInterval(justBecauseItsJavaScript,1);
}

function justBecauseItsJavaScript() //main loop, js style lol
{
    logic(); //game logic
    draw(); //draw on canvas
}

function logic()
{
    curTime=new Date(); //update current time
    deltaTime=curTime-prevTime; //update delta time
    prevTime=curTime; //update previous time
    
    //player logic////////////////////////////////
    if (p1Up && p1y>0)
    {
        p1y-=deltaTime*playerSpeed; //move player up
    }
    if (p1Down && p1y<canvas.height-50)
    {
        p1y+=deltaTime*playerSpeed; //move player down
    }
    
    if (p2Up && p2y>0)
    {
        p2y-=deltaTime*playerSpeed; //move player up
    }
    if (p2Down && p2y<canvas.height-50)
    {
        p2y+=deltaTime*playerSpeed; //move player down
    }
    /////////////////////////////////////////////
    
    //ball logic/////////////////////////////////
    //if ball is between player1's top and bottom
    if ((ballY+15)<=p1y+50 && ballY>=p1y) 
    {
        //if the ball is impacting player1's paddle, reverse x vel
        if (ballX<=p1x+25 && ballX>p1x) {ballXvel*=-1.0;}
    }
    //if ball is between player2's top and bottom
    if ((ballY+15)<=p2y+50 && ballY>=p2y)
    {
        //if the ball is impacting player2's paddle, reverse x vel
        if (ballX>=p2x && ballX<p2x+25) {ballXvel*=-1.0;}
    }
    
    //if the ball hits the ceiling or floor, reverse y vel
    if (ballY<=0 || ballY>=canvas.height-15) {ballYvel*=-1.0;}
    
    if (ballX<=0 || ballX>=canvas.width-25) //if ball goes off screen
    {
        //points
        if (ballX>=canvas.width-25) {P1score.innerHTML++;}
        else {P2score.innerHTML++;}
        
        ballX=ballStartX; //set ball's x to it's starting coord
        ballY=ballStartY; //set ball's y to it's starting coord        
    }
    
    ballX+=deltaTime*ballXvel*ballSpeed; //move ball on the x
    ballY+=deltaTime*ballYvel*ballSpeed; //move ball on the y
    /////////////////////////////////////////////    
}

function draw()
{
    ctx.clearRect(0,0, canvas.width, canvas.height); //clear screen
    
    //p1
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect(p1x, p1y, 25, 50);
    //p2
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect(p2x, p2y, 25, 50);
    //ball
    ctx.fillStyle = "rgb(200,0,0)";
    ctx.fillRect(ballX, ballY, 15, 15);
}

document.onkeydown = function(event)
{
    var keyCode; 
    if(event == null)
    {
        keyCode = window.event.keyCode; 
    }
    else 
    {
        keyCode = event.keyCode; 
    }
    switch(keyCode)
    {
        case 81: //q
            p1Up=true;
            break;
        case 65: //a
            p1Down=true;
            break; 
        case 80: //p
            p2Up=true;
            break;
        case 76: //l 
            p2Down=true;
            break; 
        default: //bad input
            break;
    }    
}

document.onkeyup = function(event)
{
    var keyCode; 
    if(event == null)
    {
        keyCode = window.event.keyCode; 
    }
    else 
    {
        keyCode = event.keyCode; 
    }
    switch(keyCode)
    {
        case 81: //q
            p1Up=false;
            break;
        case 65: //a
            p1Down=false;
            break; 
        case 80: //p
            p2Up=false;
            break;
        case 76: //l 
            p2Down=false;
            break; 
        default: //bad input
            break;
    }    
}
 
^RETURN TO TOP^