Recibo el: Error al cargar el recurso: el servidor respondió con un estado de 404 (No encontrado) cuando intento importar/exportar "héroe de clase". Soy bastante nuevo en js y me gustaría codificar un juego. Estoy usando esto: https://www.youtube.com/watch?v=3EMxBkqC4z0 como base. Quería cambiarlo como lo necesitaba, pero me detuvieron. el principio. Traté de encontrar soluciones, pero todo lo que encontré me llevó a otros problemas. Comenzó desde: SyntaxError: identificador inesperado 'Hero'. La llamada de importación espera exactamente un argumento. Después de encontrar una solución, pasó a "Error al cargar el recurso: el servidor respondió con un estado de 404 (No encontrado)" y... ahora realmente no sé qué hacer para continuar.
Aquí está el código:
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>Cuando importa desde archivos en el mismo directorio, debe anteponer el nombre del archivo con ./ , así:
import Hero from "./hero";