CTX is not showing

Question

i have been trying to get the ctx to work for a school thing, but it is not even showing up when i run it. i figured it might ask here due to the fact my teacher does not want to help me.

i have tried going over the video provided several times in order to see what i did wrong, but i could not figure it out. i'm just trying to make a simple snake game, and the fact this isn't working is driving me up the wall. help.

i am going to try to post the code like it should show, i don't know if it will work.

<script>

window.onload = function(){
    canvas = document.getElementById("game");
    ctx = canvas.getContext('2d');
    document.addEventListener("keydown", keypush);
    setInterval(game_function, 1000/15);

}

x_pos =10; // start lol
y_pos =10;

x_vel = 0;
y_vel = 0;


grid_size = 40; //the grid, ye idjut
tile_count = 40;

apple_x =15;
apple_y =15;

trail=[]; //has tail positions
tail_length = 5;


function game_function() {

    //velocity based postion lol

    x_pos = x_pos + x_vel
    y_pos = y_pos + y_vel

// wrap, but not the kind you eat

if(x_pos<0) {
    x_pos = tile_count-1;
}

if(y_pos<0) {
    y_pos = tile_count-1;
}

if(x_pos> tile_count -1) {
    x_pos = 0;
}


if(y_pos> tile_count -1) {
    y_pos = 0;
}

function keypush(){

}




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

//snake color
ctx.fillStyle = "lime";
// segment coloring junk
for(var i=0; i < trail.length; i++)
{
    ctx.fillRect(trail[i].x * grid_size, trail[i].y * grid_size, grid_size -1, grid_size -1);
}

//move
trail.push({x:x_pos, y:y_pos});

//delete the previous position
while(trail.length > tail.length) {
    trail.shift();

   

}
}

</script>

Answer 1

There are several small problems:

1. function keypush is declared inside of game_function
2. starting velocity is 0, so snake is not moving
3. tail.length is not the same as tail_length

var x_pos = 10;
var y_pos = 10;
var x_vel = 1;
var y_vel = 0;
var tile_count = 40;
var tail=[];
var tail_length = 5;

var canvas;
var ctx;

function game_function() {
    // movement
    x_pos += x_vel
    y_pos += y_vel

    if(x_pos<0) x_pos = tile_count-1;
    if(y_pos<0) y_pos = tile_count-1;
    if(x_pos>= tile_count) x_pos = 0;
    if(y_pos>= tile_count) y_pos = 0;
    
    tail.push({x:x_pos, y:y_pos});
    while(tail.length > tail_length) tail.shift();

    // rendering
    var h_scale = (canvas.width*1.0 / tile_count);
    var v_scale = (canvas.height*1.0 / tile_count);
    
    ctx.fillStyle = "black"
    ctx.fillRect(0,0, canvas.width, canvas.height);

    ctx.fillStyle = "lime";
    for(var i=0; i < tail.length; i++)
        ctx.fillRect(tail[i].x * h_scale, tail[i].y * v_scale, h_scale, v_scale);

}

function keypush(e){
    switch(e.code) {
        case 'ArrowUp': x_vel=0; y_vel=-1; break;
        case 'ArrowDown': x_vel=0; y_vel=1; break;
        case 'ArrowLeft': x_vel=-1; y_vel=0; break;
        case 'ArrowRight': x_vel=+1; y_vel=0; break;
    }
}

window.onload = function(){
    canvas = document.getElementById("game");
    ctx = canvas.getContext('2d');
    document.addEventListener("keydown", keypush);
    setInterval(game_function, 1000/15);
}

<canvas id="game" width="160" height="160">
</canvas>