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> window.onload=function() { canv=document.getElementById("gc"); //set canvas to window properties ctx=canv.getContext("2d"); //set type of canvas, 2 axis or 2d document.addEventListener("keydown",keypush); 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.