# Snake Game

So one project that I tried for learning JavaScript was a snake game; I’ll put the code down below:

```<canvas id="gc" width="400" height="400"></canvas> //window size
<script>
canv=document.getElementById("gc"); //set canvas to window properties
ctx=canv.getContext("2d"); //set type of canvas, 2 axis or 2d
setInterval(game,1000/15); // interval time that calls a game function 15 times per second? Snake works on a very low frame-rate
}
px=py=10; //snake position, where it starts
gs=tc=20; //gs gridsize, tc tilecount
ax=ay=15; // apples for x & y?
xv=yv=0; // snake velocity
trail=[];   // array for snake tail, you need to keep track of previous path taken
tail = 5; //initial lenght of snake tail

function game() { // game function that is 15 times per second
px+=xv; // px = px + xv;
py+=yv;

//wrap for player position, imagine grid that has lower-left corner as (0,0) and upper right corner as (20,20).
if(px<0){ //if x position is less than zero
px= tc-1; //then set x position to 20-1
}
if(px>tc-1){ // if x position is more than 20-1
px= 0; // then set x position to 0
}
if(py<0){ // if y position is less than 0
py= tc-1; // then set y position to 20-1
}
if(py>tc-1){ // if y position is more than 20-1
py= 0; // set y position to 0
}

ctx.fillStyle="black"; 	//fill canvas with black background color
ctx.fillRect(0,0,canv.width,canv.height);

ctx.fillStyle="lime";
for(var i=0;i<trail.length;i++){
ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2);
if(trail[i].x==px &&trail[i].y==py{ // if you step on your own tail, reset tail length
tail = 5;
}
}
trail.push({x:px,y:py}); //push is to add, you are adding x & y positions to array
while(trail.length>tail){
trail.shift();
}

// lengthen tail by 1 if you step on an apples
if(ax==px && ay==py) { // step on apple means snake position and apple position are same
tail++;
//randomize apple position, floor to insure integer
ax.Math.floor(Math.random()*tc);
ay.Math.floor(Math.random()*tc);
}

ctx.fillStyle="red";
ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2); //what is ax & ay? gs is gridscale(20). 18 canvas width, 18 canvas height?

}

function keyPush(evt) { // function that event listener is using
switch(evt.keyCode){ // using cases (like if-then statements)
case 37: // code for arrow keys; Left arrow key
xv=-1;yv=0; //x-velocity, y-velocity set value
break;
case 38: // down arrow key
xv=0;yv=-1;
break;
case 39: // right arrow key
xv=1;yv=0;
break;
case 40: // up arrow key
xv=0;yv=1;
break;
}

}

</script>```

The code works just fine as an HTML file, as long as you take out the comments. I’ll see if I can load the game directly into this web page at a later date.