Untitled

<!--
//////////////////////////////////
//Buzzkill
//By: Haroon Khalid
//Date: 8/9/10
/////////////////////////////////
-->

<!doctype html>
<html>
<head>
<title>Buzzkill</title>
<meta charset="UTF-8" />

</head>
<body>
<section>

<div>
        <canvas id="canvas" width="320" height="480">
                This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>
</div>

<script type="text/javascript">

var canvas;
canvas = document.getElementById('canvas');
context2D = canvas.getContext('2d');

//Create Shot class for when the player shoots
function Shot (type) {
        this.x = 150;
        this.y = 350;
        this.img = new Image();
        this.img.src = "shot.png";

        // Move the shot up and draw it
        this.update = function() {


                        this.y -= 4;
                        context2D.drawImage(this.img, this.x, this.y);

        }
}

// Create player class
function Player (type) {
        this.x = 150;
        this.y = 420;
        this.img = new Image();
        this.img.src = "player.png";
        this.shots =     new Array();

        // When the player shoots
        this.create_shot = function() {
                this.s = new Shot();
                this.shots.push(this.s);
        }

        // For all the shots fired, draw them in thier record position from the array
        this.update_shots = function() {

                for (index = 0; index < this.shots.     length; index++) {
                        this.shots[index].update();
                        if (this.shots[index].y < 100) {
                                //how do I get the position of the element to delete it from the array in the ()
                                this.shots.splice(index, 1);
                                console.log(this.shots.length);


                        }
                }
        }

        //  Update all the shots and draw the player
        this.run = function() {
                context2D.clearRect(0,0,320,480);
                context2D.fillStyle = "#000000";
                context2D.rect(0,0, 320, 480);
                context2D.fill();
                context2D.closePath();
                this.update_shots();
                context2D.drawImage(this.img, this.x, this.y);
        }
}

function clear() {
  context2D.clearRect(0, 0, 320, 480);
}

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    return setInterval(draw, 10);
}

function doKeyDown(evt){
        switch (evt.keyCode) {
                case 32:  /* Up arrow was pressed */
                        p1.create_shot();
                        break;
                case 37:  /* Left arrow was pressed */
                        p1.x -= 5;
                        break;
                case 39:  /* Right arrow was pressed */
                        p1.x += 5;
                        break;
                }
}

//Where do I create the player?'
var p1 = new Player();

//Clear the screen and then draw the player
function draw() {
        clear();
        p1.run();
}

init();

// Poll for keyboard events?
window.addEventListener('keydown',doKeyDown,true);

</script>
</section>
</body>
</html>