javascript - JavaScript 上的导入/导出命令出现问题

Question

我的代码遇到问题。从我看来，它应该有效，并且对其他人有效，但对我无效。我无法确定问题，如果有人可以提供帮助。

我尝试过谷歌搜索类似的问题，但没有成功。从 YouTube 视频中观看此视频，但他对此没有任何问题。这是我的代码。

//This is importing the paddle from paddle.js
import Paddle from "/src/paddle";

//This is JavaScript. It sets the canvas
let canvas = document.getElementById("gameScreen");
let ctx = canvas.getContext("2d");

//These variables will never change, and can be called upon
const GAME_HEIGHT = 800;
const GAME_WIDTH = 600;

/*This clears the screen, preventing the squares
from being redrawn over each other */
ctx.clearRect(0, 0, 800, 600);

//This is using the imported paddle and drawing it
let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT);
//On a seperate note, I am having trouble actually getting the paddle to draw
paddle.draw(ctx);


//This is the separate file I am importing from



export default class Paddle {

//Sets what the paddle dimensions will be
constructor(gameWidth, gameHeight) {
    //sets the width of the paddle
    this.width = 150;

    //sets the height of the paddle
    this.height = 30;

    //sets the area where the paddle spawns
    this.position = {
        x: gameWidth / 2 - this.width / 2,
        y: gameHeight - this.height - 10
    };
}

//This actually ends up drawing the paddle on the board
draw(ctx) {
    ctx.fillStyle = "#0f0";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
}
}

我希望它能以绿色显示游戏屏幕底部中间的 Racket ，但那里没有显示任何内容，也没有错误消息。

Answer 1

复制代码后，我注意到 Canvas 大小默认仅为 300 像素 x 150 像素。您尝试绘制的桨位于可见 Canvas 区域之外。使用:

ctx.canvas.width  = GAME_WIDTH;
ctx.canvas.height = GAME_HEIGHT

在开始绘制之前设置 Canvas 所需的大小。另请注意，清除 Canvas 时，您正在使用硬编码值ctx.clearRect(0, 0, 800, 600) - 请务必使用 GAME_WIDTH 和 GAME_HEIGHT 变量，这样，如果您的分辨率发生变化，清除的区域是一致的。

另外请注意，您的 GAME_WIDTH 为 600，GAME_HEIGHT 为 800 - 典型分辨率的宽度为 800，高度为 600。