时间戳

首页 > 解决方案 > 将模块脚本重写为 JavaScript 中的经典脚本

javascript - 将模块脚本重写为 JavaScript 中的经典脚本

问题描述

我使用 JavaScript 中的模块脚本开发了一个游戏。基本上在我的代码中导入和导出语句。该游戏只能在本地服务器上运行，但我希望它可以通过 index.html 使用。如果我使用 index.html 打开它，它会抛出

CORS 策略已阻止从源“null”路径访问脚本：无效响应。因此，Origin 'null' 不允许访问。

<!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>

我想我需要将我的 JS 脚本重写为经典脚本。

主.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);

带导出的脚本

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;
}

您能否提供一个如何将模块脚本重写为经典脚本的示例？谢谢！

标签： javascripthtmlmodulehtml5-canvas

解决方案

推荐阅读