Rewrite module scripts to classic scripts in JavaScript

Question

I developed a game using module scripts in JavaScript. Basically import and export statement inside my code. The game is only available running local server but I want it available through index.html. If I open it using index.html it throws

Access to Script at path from origin 'null' has been blocked by CORS policy: Invalid response. Origin 'null' is therefore not allowed access.

<!DOCTYPE html>
<html>
<head>
<title>My Game</title>
<style>
    body{
        margin: 0;
        height: 100%;
        width: 100%;
    }
    #screen {
        display: block;
        height: 100vh;
        width: 100vw;
        margin: 0;
        image-rendering: pixelated;
    }
</style>
<script type="module" src="js/main.js"></script>
</head>
<body>
   <canvas id="screen" width="250" height="330"></canvas>
</body>
</html>

I think I need to rewrite my JS scripts to classic scripts.

Main.js

import Camera from './Camera.js';
import Entity from './Entity.js';
import PlayerController from './traits/PlayerController.js';
import Timer from './Timer.js';
import { loadFont } from './loaders/font.js';
import { loadEntities } from './entities.js';  
import { createLevelLoader, createRandomEntity } from './loaders/level.js';
import { setupKeyboard } from './input.js';
import { createCollisionLayer } from './layers/collision.js';
import { createDashboardLayer } from './layers/dashboard.js';
import { createGameOverLayer } from './layers/gameover.js';

function createPlayerEnv(playerEntity) {
   const playerEnv = new Entity();
   const playerControl = new PlayerController();
   playerControl.checkpoint.set(64, 64);
   playerControl.setPlayer(playerEntity);
   playerEnv.addTrait(playerControl);
   return playerEnv;
 }

 async function main(canvas) {
 const context = canvas.getContext('2d');

  const [entityFactory, font] = await Promise.all([loadEntities(), loadFont()]);

 const loadLevel = await createLevelLoader(entityFactory);

 const level = await loadLevel('level');

const camera = new Camera();

const user = entityFactory.user();

const playerEnv = new createPlayerEnv(user);
level.entities.add(playerEnv);

//Bounding Box:
level.comp.layers.push(createCollisionLayer(level));
level.comp.layers.push(createDashboardLayer(font, playerEnv));

timer.start();
}

const canvas = document.getElementById('screen');
main(canvas);

Script with exports

import Keyboard from './KeyboardState.js';

export function setupKeyboard(pacman) {
const input = new Keyboard();

input.addMapping('KeyP', keyState => {
    if (keyState) {
        pacman.jump.start();
    } else {
        pacman.jump.cancel();
    }
});

input.addMapping('KeyO', keyState => {
    pacman.turbo(keyState);
});

input.addMapping('KeyD', keyState => {
    pacman.go.dir += keyState ? 1 : -1;
});

input.addMapping('KeyA', keyState => {
    pacman.go.dir += keyState ? -1 : 1;
});

return input;
}

Could you provide an example on how to rewrite module scripts to classic scripts? Thanks!

You should not get that error once you deploy to a server, here is an example: view-source:https://raw.githack.com/heldersepu/arcade-game/master/index.html — Helder Sepulveda, Sep 07 '18 at 16:31
Possible duplicate of [javascript modules and CORS](https://stackoverflow.com/questions/50197495/javascript-modules-and-cors) — Helder Sepulveda, Sep 07 '18 at 16:34

Rewrite module scripts to classic scripts in JavaScript

0 Answers0