Javascript：为一个画布上的两个不同对象分配键

我想在一个画布上放置两个不同颜色的矩形，并分配不同的键盘键分别使用。不幸的是，它只对其中一个有效。这是我的密码。我为每个对象添加了不同的变量，但仍然没有显示另一个。我应该对函数或window.onload应用一些东西吗

var GAME_速度=1000/60//游戏价格
var x=100；
变量y=100；
var边长=10；
var leftKey=false；
var rightKey=false；
var-upKey=false；
var downKey=false；
var spaceKey=false；
var-aKey=false；
var-sKey=false；
var-wKey=false；
var-dKey=false；
var enterKey=false；
var bX=100；
var bY=100；
var sideLengthZ=10；
window.onload=函数（）
{
c=document.getElementById（“myCanvas”）；
c、 宽度=窗口。内部宽度*0.9；
c、 高度=窗内高度*0.9；
设置间隔（“draw（）”，游戏速度）；
}
document.onkeyup=函数（事件）
{
开关（event.keyCode）
{
案例37:leftKey=false；
打破
案例39:rightKey=false；
打破
案例38:upKey=false；
打破
案例40：向下键=假；
打破
案例32:spaceKey=false；
打破
案例65:aKey=false；
打破
案例83:sKey=false；
打破
案例68:dKey=false；
打破
案例87:wKey=假；
打破
案例13:enterKey=false；
打破
}
}
document.onkeydown=函数（事件）
{
开关（event.keyCode）
{
案例37:leftKey=true；
打破
案例39:rightKey=true；
打破
案例38:upKey=true；
打破
案例40：向下键=真；
打破
案例32:spaceKey=true；
打破
案例65:aKey=true；
打破
案例83:sKey=true；
打破
案例68:dKey=true；
打破
案例87:wKey=true；
打破
案例13:enterKey=true；
打破
}
}
函数绘图（）
{
if（leftKey==true）
{
x--；
}
if（rightKey==true）
{
x++；
}
如果（向上键==真）
{
y--；
}
如果（向下键==true）
{
y++；
}
if（spaceKey==true）
{
边长++；
}
var c=document.getElementById（“myCanvas”）；
var cntxt=c.getContext（“2d”）；
cnText.fillStyle=“#FF0000”；
cntxt.fillRect（x，y，边长，边长）；
}
函数draw2（）
{
如果（aKey==true）
{
bX--；
}
如果（dKey==true）
{
bX++；
}
如果（wKey==true）
{
由--；
}
如果（sKey==true）
{
通过++；
}
如果（enterKey==true）
{
sideLengthZ++；
}
var b=document.getElementById（“myCanvas”）；
var cntxt2=b.getContewxt（“2d”）；
cntxt2.fillStyle=“#F00000”；
cntxt2.fillRect（bX，bY，sideLengthZ，sideLengthZ）；
}
您的浏览器不支持画布元素。

您的代码中有许多问题。首先，您从未调用

draw2

函数。第二，你试图使用两种不同的语境。最好只使用一个全局上下文

固定代码如下

var游戏速度=1000/60//游戏价格
var x=100；
变量y=100；
var边长=10；
var leftKey=false；
var rightKey=false；
var-upKey=false；
var downKey=false；
var spaceKey=false；
var-aKey=false；
var-sKey=false；
var-wKey=false；
var-dKey=false；
var enterKey=false；
var bX=100；
var bY=100；
var sideLengthZ=10；
var-ctx；
window.onload=函数（）{
c=document.getElementById（“myCanvas”）；
c、 宽度=window.innerWidth*0.9；
c、 高度=窗内高度*0.9；
ctx=c.getContext（'2d'）；
setInterval（函数（）{
draw（）；
图2（）；
}，游戏速度）；
}
document.onkeyup=函数（事件）{
event.preventDefault（）；
开关（event.keyCode）{
案例37：
leftKey=false；
打破
案例39：
rightKey=false；
打破
案例38：
upKey=false；
打破
案例40：
downKey=false；
打破
案例32：
spaceKey=false；
打破
案例65：
aKey=假；
打破
案例83：
sKey=false；
打破
案例68：
dKey=false；
打破
案例87：
wKey=false；
打破
案例13：
enterKey=false；
打破
}
}
document.onkeydown=函数（事件）{
event.preventDefault（）；
开关（event.keyCode）{
案例37：
leftKey=true；
打破
案例39：
rightKey=true；
打破
案例38：
upKey=true；
打破
案例40：
downKey=true；
打破
案例32：
spaceKey=true；
打破
案例65：
aKey=真；
打破
案例83：
sKey=真；
打破
案例68：
dKey=true；
打破
案例87：
wKey=true；
打破
案例13：
enterKey=true；
打破
}
}
函数绘图（）{
if（leftKey==true）{
x--；
}
if（rightKey==true）{
x++；
}
如果（向上键==真）{
y--；
}
如果（向下键==true）{
y++；
}
if（spaceKey==true）{
边长++；
}
ctx.fillStyle=“#FF0000”；
ctx.fillRect（x，y，边长，边长）；
}
函数draw2（）{
如果（aKey==true）{
bX--；
}
如果（dKey==true）{
bX++；
}
如果（wKey==true）{
由--；
}
如果（sKey==true）{
通过++；
}
如果（enterKey==true）{
sideLengthZ++；
}
var b=document.getElementById（“myCanvas”）；
var cntxt2=ctx；
ctx.fillStyle=“#F00000”；
ctx.fillRect（bX、bY、sideLengthZ、sideLengthZ）；
}

您的浏览器不支持画布元素。

以下是解决问题的方法和一些提示：

将第二名玩家的绘图移到绘图（）中

您不必为第二个播放器声明新的画布变量，只需使用您拥有的变量即可

如果要保留一些旧代码，请修复第二次声明上下文时的打字错误

var cntxt2=b.getContewxt（“2d”）

function draw（）{

---

Gah，你在我写我的答案时回答了，这显然是一个更好的答案，有一个有效的例子upvote。很抱歉。当它发生时，你讨厌它。不用担心，我的意思是你的答案更好，因为它有一个有效的例子。我对你的答案进行了upvote，所以它位于顶部，删除你对我答案的upvote

    if(leftKey == true) {
        x--;
    }

    if(rightKey == true) {
        x++;
    }
    if(upKey == true) {
        y--;
    }

    if(downKey == true) {
        y++;
    }

    if(spaceKey == true) {
        sideLength++;
    }

    var c = document.getElementById("myCanvas");
    var cntxt = c.getContext("2d");
    cntxt.fillStyle= "#FF0000";
    cntxt.fillRect(x, y, sideLength, sideLength);

    if(aKey == true) {
        bX--;
    }
    if(dKey == true) {
        bX++;
    }
    if(wKey == true) {
        bY--;
    }
    if(sKey == true) {
        bY++;
    }
    if(enterKey == true) {
        sideLengthZ++;
    }
    cntxt.fillStyle= "#F00000";
    cntxt.fillRect(bX, bY, sideLengthZ, sideLengthZ);
}