После импорта файла js на моем холсте ничего не отображается - PullRequest
Новая
       51

После импорта файла js на моем холсте ничего не отображается

0 голосов
/ 21 июня 2020

Я пытаюсь создать игру javascript, но на моем html холсте ничего не отображается после того, как я импортировал файл js (автомобиль. js), все отображалось до того, как я импортировал автомобиль. js. В настоящее время у меня есть папка под названием cargame, в которой есть 3 файла: car. js, firstgame. html и index. js. Я предоставляю содержимое файлов ниже.

первая игра. html

<!DOCTYPE html>
<html>
<head>
<title>Web Page Design</title>

<style>
#gamescreen{
        border: 1px solid black;
}
#bgcolor{
    background-color: #b4b4b4;
}
</style>

</head>
<body id="bgcolor">
    <div align = "center" style="margin-top: 5%"><canvas id = "gamescreen" width = "500px" height = "600px"></canvas></div>

    <script src="index.js"></script>
</body>
</html>

index. js

import car from "./car";


let canvas = document.getElementById("gamescreen");
let ctx = canvas.getContext('2d');


const GAME_WIDTH = 500;
const GAME_HEIGHT = 600;

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width/3, canvas.height)
ctx.fillRect((canvas.width/3 + canvas.width/3), 0, canvas.width/3, canvas.height)

ctx.fillStyle = '#2a2a2a';
ctx.fillRect(canvas.width/3, 0, canvas.width/3, canvas.height)

ctx.clearRect(0,0,500,600)
let Car = new car(GAME_WIDTH, GAME_HEIGHT);
Car.draw(ctx);

автомобиль. js

export default class car{
    constructor(gamewidth, gameheight){

        this.width = 100;
        this.height = 100;
        this.position = {
            x : gamewidth/2 - this.width/2,
            y : gameheight - this.height - 10,
        };
    }

    draw(ctx){
        ctx.fillStyle = '#ff6969';
        ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
    }

}

У меня в журналах появляются следующие ошибки: 

firstgame.html:1 Access to script at 'file:///C:/MY%20DATA/java%20projects/cargame/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

ошибка 2 

firstgame.html:19 GET file:///C:/MY%20DATA/java%20projects/cargame/index.js net::ERR_FAILED

Ответы [ 2 ]

1 голос
/ 21 июня 2020

нужно добавить type = "module" в тег скрипта 

<script type="module" src='index.js'></script>

и исправить импорт 

import car from "./car.js";
0 голосов
/ 21 июня 2020

вам нужно поместить свой проект на любой локальный сервер, такой как XAMP, MAMP, WAMP, и добавить '. js' к импорту автомобиля в файл index. js, запустить локальный сервер, и он будет работать.

Проверить вывод

...