如何在JavaScript中运行和跳转2d字符

我试图用画布做一个正方形，让它跳跃和奔跑，我在youtube上跟踪了Pothon编程的全貌。我已经在一个html文档中编写了代码，由于某种原因，当我测试它时，浏览器上没有显示任何内容

变量上下文、控制器、播放器、循环；
context=document.querySelector（“canvas”）.getContext（“2d”）；
context.canvas.height=180；
context.canvas.width=320；
玩家={
高度=32，
跳跃=正确，
宽度=32，
x=144，
x_速度=0，
y=0，
y_速度：0
};
控制器={
左=假，
右=假，
向上=错误，
keyListener:函数（事件）{
var kay_state=（event.type=“keydown”）？true:false；
开关（event.keyCode）{
案例87：
controller.up=按键状态；
打破
案例68：
controller.right=按键状态；
打破
案例65：
controller.left=按键状态；
打破
}
}
};
循环=函数（）{
if（controller.up&&player.jumping==false）{
player.y_速度-=20；
运动员。跳跃=正确；
}
if（控制器左）{
player.x_速度-=0.5；//对于“player”Akselerer平滑
}
如果（控制器右侧）{
player.x_velocity+=0.5；//对于“player”Akselerer平滑
}
player.y_速度+=1.5；//重力
player.x+=player.x_速度；
player.y+=player-y\u速度；
player.x_velocity*=0.9；//Friksjon（在eller såsynker ikke farten之前最长）
player.y_velocity*=0.9；//弗里克松
//德尔松队球员费勒·蒂尔·维迪安·斯科利德雷尔·登（布恩·林扬）
如果（玩家y>180-16-32）{
运动员。跳跃=错误；
玩家y=180-16-32；
player.y_速度=0；
}
context.fillStyle=“#202020”；
fillRect（0,0320,180）；
context.fillStyle=“#ff0000”；
context.beginPath（）；
context.rect（player.x，player.y，player.width，player.height）；
context.fill（）；
context.strokeStyle=“#ff0000”；
上下文。线宽=4；
context.beginPath（）；
上下文。移动到（0，164）；
lineTo（320164）；
stroke（）；
window.requestAnimationFrame（循环）；
};
window.addEventListener（“keydown”，controller.keyListener）；
window.addEventListener（“keyup”，controller.keyListener）；
window.requestAnimationFrame（循环）；

此代码存在许多问题。首先，您需要修复对象声明。对象不使用

=

赋值。你的变量名也有一些我已经修正过的错误。以下是一个工作版本：

var上下文、控制器、播放器、循环
context=document.querySelector（'canvas'）.getContext（'2d'）
context.canvas.height=180
context.canvas.width=320
玩家={
身高：32，
跳跃：是的，
宽度：32，
x:144，
x_速度：0，
y:0，
y_速度：0，
}
控制器={
左：错，
右：错，
上：错，
keyListener:函数（事件）{
var key_state=event.type='keydown'？真：假
开关（event.keyCode）{
案例87：
controller.up=按键状态
打破
案例68：
controller.right=key\u状态
打破
案例65：
controller.left=按键状态
打破
}
},
}
循环=函数（）{
if（controller.up&&player.jumping==false）{
player.y_速度-=20
player.jumping=正确
}
if（控制器左）{
player.x_速度-=0.5//at“player”Akselerer平滑
}
如果（控制器右侧）{
player.x_速度+=0.5//at“player”Akselerer平滑
}
player.y_速度+=1.5//重力
player.x+=player.x_速度
player.y+=player.y\u速度
player.x_velocity*=0.9//Friksjon（在eller såsynker ikke farten之前最长）
player.y_速度*=0.9//Friksjon
//德尔松队球员费勒·蒂尔·维迪安·斯科利德雷尔·登（布恩·林扬）
如果（玩家y>180-16-32）{
player.jumping=错误
玩家y=180-16-32
player.y_速度=0
}
context.fillStyle='#202020'
context.fillRect（0,0320180）
context.fillStyle='#ff0000'
context.beginPath（）
context.rect（player.x、player.y、player.width、player.height）
context.fill（）
context.strokeStyle='#ff0000'
context.lineWidth=4
context.beginPath（）
context.moveTo（01164）
上下文。行到（320164）
context.stroke（）
window.requestAnimationFrame（循环）
}
window.addEventListener（'keydown'，controller.keyListener）
window.addEventListener（'keyup'，controller.keyListener）
window.requestAnimationFrame（循环）

---

要为对象的属性赋值，应使用

：

而不是

=

因此，对于

player

对象，它应该是：

   player={
        height:32,
        jumping:true,
        width:32,
        x:144,
        x_velocity:0,
        y:0,
        y_velocity:0
    };