CTX没有显示

Question

我一直试图让ctx为一所学校的事情工作，但当我运行它的时候，它甚至都没有出现。因为我的老师不想帮我，所以我想它可能会在这里问我。

为了看看我做错了什么，我试着看了好几遍视频，但我想不出来。我只是试着做一个简单的蛇游戏，而事实是这是行不通的，把我逼到了绝境。帮助。

我要试着像它应该显示的那样发布代码，我不知道它是否会起作用。

<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

有几个小问题：

在game_function

• starting内声明

1. 函数键盘的速度是0，所以蛇不是moving
2. 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>

​