Search code examples
javascripthtmlcompiler-errorshtml5-canvasruntime-error

How do I fix the error: "No debugger available, can not send 'variables'" and the error: "height is not defined at ...(methods)"?

I have been trying to go through with the video by Chris Courses on making a fighting game with html/js (https://youtu.be/vyqbNFMDRGQ), but I have been getting these errors:

Sprite {position: {…}, velocity: {…}, height: 150}
index.js:58
No debugger available, can not send 'variables'

and this:

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)

this is my launch.json file:

{
    // 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}"
        }
    ]
}

btw, I have live server extension (just so you have an idea about the tools available and in use)

this is the index.html file:

<html>
  <head></head>
  <body>
    <canvas></canvas>
    <script src="index.js"></script>
  </body>
</html>

and finally my index.js file:

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();

I hope everything is clear.

I tried looking into many sites, including stack overflow. I noticed that some people have the same problem, but I coudnt fix it, even though I followed all steps carefully. Please help me in this problem so that I can continue Thanks.

Solution

  • Ok, so I finally solved it. for anyone wondering, it is a message that comes after you have closed the running program. Also, the height is undefined was just a syntax error

    if you fix the syntax error, this won't happen again. The error will be gone.