我一直在尝试观看 Chris Courses 制作的用 html/js 制作格斗游戏的视频 (https://youtu.be/vyqbNFMDRGQ)，但我遇到了这些错误：
Sprite {position: {…}, velocity: {…}, height: 150}
index.js:58
No debugger available, can not send 'variables'
还有这个：
Uncaught ReferenceError ReferenceError: height is not defined
at draw (...\Fighting game\index.js:18:58)
at update (...\Fighting game\index.js:22:14)
at animate (...\Fighting game\index.js:64:12)
at <anonymous> (...\Fighting game\index.js:68:1)
--- requestAnimationFrame ---
at animate (...\Fighting game\index.js:61:12)
at <anonymous> (...\Fighting game\index.js:68:1)
这是我的 launch.json 文件：
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:5500",
"webRoot": "${workspaceFolder}"
}
]
}
顺便说一句，我有实时服务器扩展（只是为了让您了解可用和正在使用的工具）
这是 index.html 文件：
<html>
<head></head>
<body>
<canvas></canvas>
<script src="index.js"></script>
</body>
</html>
最后是我的 index.js 文件：
const canvas = document.querySelector('canvas'); // use the element with the tametag 'canvas'
const c = canvas.getContext('2d'); // context of the game
canvas.width = 1024;
canvas.height = 576;
c.fillRect(0, 0, canvas.width, canvas.height); //x, y, w, h
class Sprite {
constructor({position, velocity}){
this.position = position; // this 'position' will be an object
this.velocity = velocity;
this.height = 150;
}
draw(){ // to draw the sprite
c.fillStyle = 'red';
c.fillRect(this.position.x, this.position.y, 50, height);
}
update(){
this.draw();
this.position.y += this.velocity.y;
if(this.position.y + this.height + this.velocity >= canvas.height){
this.velocity.y = 0;
//this.position.y = canvas.height - this.height;
}
}
}
const player = new Sprite( //making the player OBJECT and inserting the object 'position' in it
{
position: {
x: 0,
y: 0
},
velocity: {
x: 0,
y: 10
}
}
);
const enemy = new Sprite( //making the enemy OBJECT and inserting the object 'position' in it
{
position: {
x: 400,
y: 100
},
velocity: {
x: 0,
y: 0
}
}
);
console.log(player);
function animate(){
window.requestAnimationFrame(animate); // make an infinite loop by calling the function 'animate' over and over again
c.fillStyle = 'black';
c.fillRect(0, 0, canvas.width, canvas.height);
player.update();
enemy.update();
}
animate();
我希望一切都清楚。
我尝试查看许多站点，包括堆栈溢出。 我注意到有些人有同样的问题，但我无法解决它，即使我仔细地按照所有步骤操作。 请帮助我解决这个问题，以便我可以继续 谢谢。