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

我试图创建一个简单的游戏，我有两个矩形，一个人类控制的玩家和一个必须避免的“碰撞器”

我试图使用

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>

window.onload=function（）{
canv=document.getElementById（“gc”）；
ctx=canv.getContext（“2d”）；
文件。添加了文本列表（“按键向下”，按键推动）；
设定间隔（游戏，1000/100）；
}
//变数
player_created=false；
collider_created=false；
播放器宽度=20；
球员身高=20；
对撞机_宽度=15；
对撞机高度=15；
玩家速度=10；
对撞机_速度=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播放器；
var对撞机；
//物体
功能播放器（x、y、vx、vy、w、h）{
这个.x=x；
这个。y=y；
这是vx=vx；
this.vy=vy；
这个.w=w；
这个，h=h；
}
功能对撞机（x、y、vx、vy、w、h）{
这个.x=x；
这个。y=y；
这是vx=vx；
this.vy=vy；
这个.w=w；
这个，h=h；
}
函数游戏（）{
ctx.fillStyle=“black”//彩色画布
ctx.fillRect（0,0，扫描宽度，扫描高度）；
如果（！player_已创建）{
玩家=新玩家（玩家x、玩家y、玩家速度、玩家速度、玩家宽度、玩家高度）；
player_created=true；
}
如果（！collider_已创建）{
对撞机=新对撞机（对撞机x、对撞机y、对撞机速度、对撞机速度、对撞机宽度、对撞机高度）；
碰撞器_created=true；
}
碰撞碰撞碰撞（碰撞器，canv.宽度，canv.高度）；
玩家球碰撞（玩家，游戏宽度，游戏高度）；
ctx.fillStyle=“lime”//彩色播放器
ctx.fillRect（player.x，player.y，player.w，player.h）；
ctx.fillStyle=“red”//颜色碰撞器
ctx.fillRect（collider.x，collider.y，collider.w.collider.h）；
}
函数playerWallCollision（实体、绑定x、绑定y）{
if（entity.x+entity.w>bound_x）{
entity.x=绑定_x-entity.w；
} 
如果（实体x<0）{
实体x=0
}
if（entity.y+entity.h>bound_y）{
entity.y=绑定的_y-entity.h；
} 
如果（实体y<0）{
实体y=0
}
}
函数colliderWallCollision（实体、绑定x、绑定y）{
如果（entity.x+entity.w>=bound_x | | entity.x=bound_y | | entity.y，由于此行的语法错误，第二个矩形无法绘制：

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

以下更新将解决该问题：

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

请参阅下面的代码片段，了解正在运行的工作版本：



window.onload=function（）{
canv=document.getElementById（“gc”）；
ctx=canv.getContext（“2d”）；
文件。添加了文本列表（“按键向下”，按键推动）；
设定间隔（游戏，1000/100）；
}
//变数
播放器宽度=20；
球员身高=20；
对撞机_宽度=15；
对撞机高度=15；
玩家速度=10；
对撞机_速度=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播放器；
var对撞机；
//物体
功能播放器（x、y、vx、vy、w、h）{
这个.x=x；
这个。y=y；
这是vx=vx；
this.vy=vy；
这个.w=w；
这个，h=h；
}
功能对撞机（x、y、vx、vy、w、h）{
这个.x=x；
这个。y=y；
这是vx=vx；
this.vy=vy；
这个.w=w；
这个，h=h；
}
函数游戏（）{
ctx.fillStyle=“black”//彩色画布
ctx.fillRect（0,0，扫描宽度，扫描高度）；
如果（！玩家）{
玩家=新玩家（玩家x、玩家y、玩家速度、玩家速度、玩家宽度、玩家高度）；
}
如果（！对撞机）{
对撞机=新对撞机（对撞机x、对撞机y、对撞机速度、对撞机速度、对撞机宽度、对撞机高度）；
}
碰撞碰撞碰撞（碰撞器，canv.宽度，canv.高度）；
玩家球碰撞（玩家，游戏宽度，游戏高度）；
ctx.fillStyle=“lime”//彩色播放器
ctx.fillRect（player.x，player.y，player.w，player.h）；
ctx.fillStyle=“red”//颜色碰撞器
/*这里输入错误*/
ctx.fillRect（collider.x，collider.y，collider.w，collider.h）；
}
函数playerWallCollision（实体、绑定x、绑定y）{
if（entity.x+entity.w>bound_x）{
entity.x=绑定_x-entity.w；
} 
如果（实体x<0）{
实体x=0
}
if（entity.y+entity.h>bound_y）{
entity.y=绑定的_y-entity.h；
} 
如果（实体y<0）{
实体y=0
}
}
函数colliderWallCollision（实体、绑定x、绑定y）{
如果（entity.x+entity.w>=bound|x||entity.x=bound|y|entity.y@nwker很高兴我能帮忙：）