I get the:
Failed to load resource: the server responded with a status of 404 (Not Found)
when I try to import/export "class Hero".
Im pretty new in js, and would like to code a game. Im using this:
https://www.youtube.com/watch?v=3EMxBkqC4z0
as a foundation. I wanted to change it as I need, but got stoped at. the beginning. Tried to find solutions, but anything I found lead me into other problems. Its started from: SyntaxError: Unexpected identifier 'Hero'. import call expects exactly one argument. After I fount a solution, it went into "Failed to load resource: the server responded with a status of 404 (Not Found)" and... now I don't really know what to do to move on.
Here is the code:
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>
When you import from files in the same directory you have to prepend the filename with ./, like this:
import Hero from "./hero";