我得到:加载资源失败:服务器响应404(未找到)状态当我尝试导入/导出"类Hero"。我很新的在js，并想编码一个游戏。我用这个:https://www.youtube.com/watch?v=3EMxBkqC4z0作为基础。我想改变它，因为我需要，但被阻止了。一个开始。试图找到解决方案，但我找到的任何东西都会让我陷入其他问题。它开始于:SyntaxError:意外标识符'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>
当您从同一目录下的文件导入时，您必须在文件名前加上./，如下所示:
import Hero from "./hero";