难以对两个 javascript 文件使用 import/export。获取：无法加载资源：服务器响应状态为 404（未找到）

Question

我得到：加载资源失败：服务器响应状态为 404（未找到）当我尝试 import/export “class Hero” 时。我是 js 的新手，想编写游戏代码。我正在使用这个： https://www.youtube.com/watch?v=3EMxBkqC4z0 作为基础。我想根据需要更改它，但被阻止了。开始。试图找到解决方案，但我发现的任何东西都会让我陷入其他问题。它开始于：SyntaxError: Unexpected identifier 'Hero'。 import 调用只需要一个参数。在我找到解决方案后，它进入“无法加载资源：服务器响应状态为 404（未找到）”并且......现在我真的不知道该怎么做才能继续。

代码如下：

1)hero.js 
export default class Hero {

    constructor(gameWidth, gameHeight) {

        this.width = 150;

        this.height = 20;



        this.position = {

            x: gameWidth / 2 - this.width / 2,

            y: gameHeight - this.height - 10,

        }



    }

    draw(ctx) {

        ctx.fillStyle = "blue";

        ctx.fillRect(this.position.x, this.position.y, this.width, this.height)



    }

}

2) index.js 
import { Hero } from "./hero";;



let canvas = document.getElementById("gameScreen");

let ctx = canvas.getContext("2d");



const GAME_WIDTH = 1280;

const GAME_HEIGHT = 720;



ctx.clearRect(0, 0, 1280, 720);



let hero = new Hero(GAME_WIDTH, GAME_HEIGHT);



hero.draw(ctx);

3) index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FrogAttack</title>
    <style>
        #gameArea {
            border: 4px solid black;
        }
        
        body {
            height: 100vh;
            background: rgb(2, 0, 36);
            background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgba(62, 5, 22, 1) 81%, rgba(121, 9, 9, 1) 97%);
            text-align: center;
            overflow: hidden;
        }
        
        h1 {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: whitesmoke;
            letter-spacing: 3px;
        }
    </style>
</head>

<body>

    <h1>Frog Attack</h1>
    <canvas id="gameArea" width="1280" height="720"></canvas>
    <script type="module" src="index.js"></script>

</body>

</html>

Answer 1

当您从同一目录中的文件导入时，您必须在文件名前加上 ./，如下所示：

import Hero from "./hero";

难以对两个 javascript 文件使用 import/export。获取：无法加载资源：服务器响应状态为 404（未找到）

Difficulty using import/export for two javascript files. getting the: Failed to load resource: the server responded with a status of 404 (Not Found)

javascript

game-development