hiss

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

    <canvas id='canvas' height="500" width="1000"></canvas>
    <script>

        // Initial Global Variables
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var xspeed, speed = 10;
        var yspeed = 0;
        var color = 'red';
        var size = 10;
        var interval;
        //------------------------

        //snake object, handles coordinates for each segment and clears the canvas after drawing each segment
        function snake(segments){
            this.segments = segments;
            //'add function is called whenever snake collides with target.
            this.positions = [];

            //looks through position store and returns on duplicate, indicating a collision.
            this.collide = function(){
                for(var z=0; z<this.positions.length-1; z++){
                    for(var q=z+1; q<this.positions.length-1; q++){
                        return this.positions[z][0] == this.positions[q][0] && this.positions[z][1] == this.positions[q][1];
                    }
                }
            }

            this.add = function(){
                this.segments.push(new segment(this.segments[this.segments.length-1].xPos-size, this.segments[this.segments.length-1].yPos, false, size, color));
            }
            //handles clearing, and passing necessary variables to the segments to draw
            //also handles detecting collisions with snake
            this.draw = function(){
                if(this.collide()){
                    initiate();
                }

                //reset frame's position store
                this.positions.length = 0;

                //reset canvas
                canvas.width = canvas.width;

                //add border to canvas
                context.fillStyle = 'white';
                context.strokeStyle = 'black';
                context.lineWidth = 4;
                context.strokeRect(0,0,canvas.width,canvas.height);


                //loop through segments
                for(var i = 0; i<this.segments.length; i++){
                    if(this.segments[i].isHead){
                        var oldX = this.segments[i].xPos;
                        var oldY = this.segments[i].yPos;
                        this.segments[i].draw(xspeed+this.segments[i].xPos, yspeed+this.segments[i].yPos);
                    }
                    else{
                        var oldXTemp = this.segments[i].xPos;
                        var oldYTemp = this.segments[i].yPos;
                        this.segments[i].draw(oldX, oldY);
                        oldX = oldXTemp;
                        oldY = oldYTemp;
                    }
                }


            }
        }
        //End Snake

        //Segment Object. Building block of snake, and target
        //Only one segment in the snake object is a 'Head'.
        //This segment is the one that actually turns, and all subsequent coordinates
        //are passed from it
        function segment(xPos, yPos, isHead, size, color){
            this.xPos = xPos;
            this.yPos = yPos;
            this.isHead = isHead;
            this.size = size;
            this.color = color;

            //determines whether segment is still on canvas
            //also, simply draws at coordinates given to it by snake object
            this.draw = function(x,y){
                //update position
                this.xPos = x;
                this.yPos = y;

                //If snake is off the canvas, restart.
                if(this.xPos< 0 || this.xPos>canvas.width || this.yPos < 0 || this.yPos>canvas.width){
                    initiate();
                }

                //add location to location array for current frame. Then draw
                snakey.positions.push([x,y]);
                context.fillStyle = this.color;
                context.strokeStyle = 'pink';
                context.strokeRect(x,y,this.size,this.size);
                context.fillRect(x, y , this.size, this.size);
            }
        }
        //End Segment

        //handles turning. Modifies x/y speed variables
        //these variables are passed to the head segment with each frame
        function turn(oEvent){
            switch(oEvent.keyCode){
                case 83:
                    if(yspeed!=-speed){
                        xspeed=0;
                        yspeed=speed;
                    }
                    break;

                case 87:
                    if(yspeed!=speed){
                        xspeed=0;
                        yspeed = -speed;
                    }
                    break;

                case 68:
                    if(xspeed!=-speed){
                        yspeed=0;
                        xspeed = speed;
                    }
                    break;

                case 65:
                    if(xspeed!=speed){
                        yspeed=0;
                        xspeed = -speed;
                    }
                    break;
            }
        }
        //End Turn


        //initate snake
        //also serves to restart
        function initiate(){
            snakey = new snake([new segment(200,50,true,size,color)]);
            for(var t = 0; t<20; t++){
            snakey.segments.push(new segment(snakey.segments[0].xPos-t*size, snakey.segments[0].yPos,false,size,color));
            }
            xspeed =speed;
            yspeed =0;
        }


        window.addEventListener('keydown',turn,true);

        initiate();
        interval = setInterval("snakey.draw()", 50);
    </script>

</body>
</html>