javascript 如何修复错误：“没有可用的调试器，无法发送'变量'”和错误：“高度未在...(方法)定义"？

jv2fixgn 于 2023-05-12 发布在 Java

关注(0)|答案(1)|浏览(388)

我一直在尝试通过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();

我希望一切都清楚了。
我试着查看了很多网站，包括堆栈溢出。我注意到有些人也有同样的问题，但我无法解决它，尽管我仔细地遵循了所有的步骤。请帮助我在这个问题上，这样我就可以继续谢谢。

JavaScript

来源：https://stackoverflow.com/questions/76218026/how-do-i-fix-the-error-no-debugger-available-can-not-send-variables-and-th