英文:
How do I fix the error: "No debugger available, can not send 'variables'" and the error: "height is not defined at ...(methods)"?
问题
I understand that you need assistance with the issues you're facing while working on a fighting game project in HTML/JS. Here are the translated portions of your text:
错误信息1:
Sprite {position: {…}, velocity: {…}, height: 150}
index.js:58
No debugger available, can not send 'variables'
错误信息2:
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文件:
{
// 使用 IntelliSense 了解可能的属性。
// 悬停以查看现有属性的描述。
// 获取更多信息，请访问：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'); // 使用具有标签 'canvas' 的元素
const c = canvas.getContext('2d'); // 游戏的上下文
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; // 这个 'position' 将是一个对象
this.velocity = velocity;
this.height = 150;
}
draw(){ // 绘制精灵
c.fillStyle = 'red';
c.fillRect(this.position.x, this.position.y, 50, this.height);
}
update(){
this.draw();
this.position.y += this.velocity.y;
if(this.position.y + this.height + this.velocity.y >= canvas.height){
this.velocity.y = 0;
//this.position.y = canvas.height - this.height;
}
}
}
const player = new Sprite( // 创建玩家对象并将对象 'position' 插入其中
{
position: {
x: 0,
y: 0
},
velocity: {
x: 0,
y: 10
}
}
);
const enemy = new Sprite( // 创建敌人对象并将对象 'position' 插入其中
{
position: {
x: 400,
y: 100
},
velocity: {
x: 0,
y: 0
}
}
);
console.log(player);
function animate(){
window.requestAnimationFrame(animate); // 通过不断调用函数 'animate' 来创建一个无限循环
c.fillStyle = 'black';
c.fillRect(0, 0, canvas.width, canvas.height);
player.update();
enemy.update();
}
animate();
如果您需要更多帮助或解决特定问题，请随时提出。
英文:
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.
答案1
得分: 0
好的，所以我终于解决了。对于任何想知道的人，这是在你关闭正在运行的程序后出现的消息。另外，“height is undefined” 只是一个语法错误。如果你修复了这个语法错误，这种情况就不会再发生。错误会消失。
英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论