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

Question

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

我正在尝试使用 fillRect() 绘制两个矩形，但是只显示了一个。例如，将“lime”颜色的矩形放在第一位会导致它被绘制，但是将“红色”颜色的矩形线放在第一位会导致两者都不会被绘制。

我希望在 Canvas 上同时绘制/出现两个矩形的结果:

<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>