CTX 未显示

Question

我一直试图让 ctx 为学校的东西工作，但当我运行它甚至没有出现。我想它可能会在这里问，因为我的老师不想帮助我。

我已经尝试多次查看提供的视频以查看我做错了什么，但我无法弄清楚。我只是想制作一个简单的贪吃蛇游戏，而这不起作用的事实让我很沮丧。帮助。

我将尝试 post 它应该显示的代码，我不知道它是否有效。




<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

有几个小问题：

函数 keypush 在 game_function
起始速度为0，所以蛇没有移动
tail.length 与 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>

CTX 未显示

CTX is not showing

ctx