JavaScript：如何使用fillRect使用Canvas绘制多个矩形？

Question

我正在尝试创建一个简单的游戏，其中有两个矩形，一个人类控制的玩家和一个必须避免的“对撞机”。

我正在尝试使用fillRect()绘制两个矩形，但是只有一个显示。例如，先放置“石灰”彩色矩形会导致绘制，但是先放置“红色”彩色矩形线不会导致绘制。

我期望在画布上同时绘制/显示两个矩形的结果：

<canvas id="gc" width="800" height="600"></canvas>
<script>
window.onload=function() {
    canv=document.getElementById("gc");
    ctx=canv.getContext("2d");
    document.addEventListener("keydown",keyPush);
    setInterval(game,1000/100);
}
// Variables
player_created = false;
collider_created = false;
player_width = 20;
player_height = 20;
collider_width = 15;
collider_height = 15;
player_velocity = 10;
collider_velocity = 20;
player_x = (document.getElementById("gc").getAttribute("width") - player_width)/2;
player_y = (document.getElementById("gc").getAttribute("height") - player_height)/2;
collider_x = (document.getElementById("gc").getAttribute("width") - collider_width)/4;
collider_y = (document.getElementById("gc").getAttribute("height") - collider_height)/4;
var player;
var collider;

// Objects
function Player(x, y, vx, vy, w, h) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.w = w;
    this.h = h;
}

function Collider(x, y, vx, vy, w, h) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.w = w;
    this.h = h;
}

function game() {
    ctx.fillStyle="black"; // Color canvas
    ctx.fillRect(0,0,canv.width,canv.height);

    if(!player_created) {
        player = new Player(player_x, player_y, player_velocity, player_velocity, player_width, player_height);
        player_created = true;
    }

    if(!collider_created) {
        collider = new Collider(collider_x, collider_y, collider_velocity, collider_velocity, collider_width, collider_height);
        collider_created = true;
    }

    colliderWallCollision(collider, canv.width, canv.height);

    playerWallCollision(player, canv.width, canv.height);

    ctx.fillStyle="lime"; // Color player
    ctx.fillRect(player.x, player.y, player.w, player.h);

    ctx.fillStyle="red"; // Color collider
    ctx.fillRect(collider.x, collider.y, collider.w. collider.h);
}

function playerWallCollision(entity, bound_x, bound_y) {
    if (entity.x + entity.w > bound_x) {
        entity.x = bound_x - entity.w;
    } 
    if (entity.x < 0) {
        entity.x = 0
    }
    if (entity.y + entity.h > bound_y) {
        entity.y = bound_y - entity.h;
    } 
    if (entity.y < 0) {
        entity.y = 0
    }
}

function colliderWallCollision(entity, bound_x, bound_y) {
    if (entity.x + entity.w >= bound_x || entity.x <= 0) {
        entity.vx = -entity.vx
    }
    if (entity.y + entity.h >= bound_y || entity.y <= 0) {
        entity.vy = -entity.vy
    }
}

function keyPush(evt) { // Read keystrokes
    switch(evt.keyCode) {
        // Vertical
        case 87: // w
            player.y -= player.vy;
            break;
        case 83: // s
            player.y += player.vy;
            break;

        // Horizontal
        case 65: // a
            player.x -= player.vx;
            break;
        case 68: // d
            player.x += player.vx;
            break;
    }
}
</script>

Answer 1

由于此行上的语法错误，第二个矩形无法绘制：

ctx.fillRect(collider.x, collider.y, collider.w. collider.h);

以下更新将解决该问题：

// Change . to , 
ctx.fillRect(collider.x, collider.y, collider.w, collider.h);

有关运行中的有效版本，请参见下面的代码段：

<canvas id="gc" width="800" height="600"></canvas>
<script>
window.onload=function() {
    canv=document.getElementById("gc");
    ctx=canv.getContext("2d");
    document.addEventListener("keydown",keyPush);
    setInterval(game,1000/100);
}
// Variables 
player_width = 20;
player_height = 20;
collider_width = 15;
collider_height = 15;
player_velocity = 10;
collider_velocity = 20;
player_x = (document.getElementById("gc").getAttribute("width") - player_width)/2;
player_y = (document.getElementById("gc").getAttribute("height") - player_height)/2;
collider_x = (document.getElementById("gc").getAttribute("width") - collider_width)/4;
collider_y = (document.getElementById("gc").getAttribute("height") - collider_height)/4;
var player;
var collider;

// Objects
function Player(x, y, vx, vy, w, h) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.w = w;
    this.h = h;
}

function Collider(x, y, vx, vy, w, h) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.w = w;
    this.h = h;
}

function game() {
    ctx.fillStyle="black"; // Color canvas
    ctx.fillRect(0,0,canv.width,canv.height);

    if(!player) {
        player = new Player(player_x, player_y, player_velocity, player_velocity, player_width, player_height);
    }

    if(!collider) {
        collider = new Collider(collider_x, collider_y, collider_velocity, collider_velocity, collider_width, collider_height);
    }

    colliderWallCollision(collider, canv.width, canv.height);

    playerWallCollision(player, canv.width, canv.height);

    ctx.fillStyle="lime"; // Color player
    ctx.fillRect(player.x, player.y, player.w, player.h);

    ctx.fillStyle="red"; // Color collider
    /* Typo here */
    ctx.fillRect(collider.x, collider.y, collider.w, collider.h);
}

function playerWallCollision(entity, bound_x, bound_y) {

    if (entity.x + entity.w > bound_x) {
        entity.x = bound_x - entity.w;
    } 
    if (entity.x < 0) {
        entity.x = 0
    }
    if (entity.y + entity.h > bound_y) {
        entity.y = bound_y - entity.h;
    } 
    if (entity.y < 0) {
        entity.y = 0
    }
}

function colliderWallCollision(entity, bound_x, bound_y) {
    if (entity.x + entity.w >= bound_x || entity.x <= 0) {
        entity.vx = -entity.vx
    }
    if (entity.y + entity.h >= bound_y || entity.y <= 0) {
        entity.vy = -entity.vy
    }
}

function keyPush(evt) { // Read keystrokes
    switch(evt.keyCode) {
        // Vertical
        case 87: // w
            player.y -= player.vy;
            break;
        case 83: // s
            player.y += player.vy;
            break;

        // Horizontal
        case 65: // a
            player.x -= player.vx;
            break;
        case 68: // d
            player.x += player.vx;
            break;
    }
}
</script>