Javascript 如何使导入/导出在chrome浏览器中工作？
我对学习HTML、CSS和JS非常陌生。我正在尝试编写我的第一个页面，我的“main.js”文件从我的“utils.js”文件导入一个函数，用于我的“index.html”文件。我的浏览器是google chrome版本85.0.4183.121（官方版本）（64位），我运行的是Windows 10操作系统 我想学习的教程是：（在youtube.com上）Javascript 如何使导入/导出在chrome浏览器中工作？,javascript,google-chrome,windows-10,es6-modules,Javascript,Google Chrome,Windows 10,Es6 Modules,我对学习HTML、CSS和JS非常陌生。我正在尝试编写我的第一个页面，我的“main.js”文件从我的“utils.js”文件导入一个函数，用于我的“index.html”文件。我的浏览器是google chrome版本85.0.4183.121（官方版本）（64位），我运行的是Windows 10操作系统 我想学习的教程是：（在youtube.com上） “具有导入/导出语法的JavaScript模块（ES6）-JavaScript教程” 频道是： “dcode” url: 下面是我一直以来
“具有导入/导出语法的JavaScript模块（ES6）-JavaScript教程”
频道是：
“dcode”
url:
下面是我一直以来所做的一切
My folder/file tree looks like below: (on Desktop)
HTML_folder-
|-js_folder-
| |-main.js
| |-utils.js
|
|-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=10.0">
<title>Chrome Dino Replica</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="game" width="640" height="400"></canvas>
<script type="module" src="./js_folder/main.js"></script>
</body>
</html>
import {double} from './utils.js';
console.log(double(5));
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
// Variables
let score;
let scoreText;
let highscore;
let highscoreText;
let player;
let gravity;
let obstacles = [];
let gameSpeed;
let keys = {};
// Event Listeners
document.addEventListener('keydown', function (evt) {
keys[evt.code] = true;
});
document.addEventListener('keyup', function (evt) {
keys[evt.code] = false;
});
class Player {
constructor (x, y, w, h, c) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.c = c;
this.dy = 0;
this.jumpForce = 15;
this.originalHeight = h;
this.grounded = false;
this.jumpTimer = 0;
}
Animate () {
// Jump
if (keys['Space'] || keys['KeyW']) {
this.Jump();
} else {
this.jumpTimer = 0;
}
if (keys['ShiftLeft'] || keys['KeyS']) {
this.h = this.originalHeight / 2;
} else {
this.h = this.originalHeight;
}
this.y += this.dy;
// Gravity
if (this.y + this.h < canvas.height) {
this.dy += gravity;
this.grounded = false;
} else {
this.dy = 0;
this.grounded = true;
this.y = canvas.height - this.h;
}
this.Draw();
}
Jump () {
if (this.grounded && this.jumpTimer == 0) {
this.jumpTimer = 1;
this.dy = -this.jumpForce;
} else if (this.jumpTimer > 0 && this.jumpTimer < 15) {
this.jumpTimer++;
this.dy = -this.jumpForce - (this.jumpTimer / 50);
}
}
Draw () {
ctx.beginPath();
ctx.fillStyle = this.c;
ctx.fillRect(this.x, this.y, this.w, this.h);
ctx.closePath();
}
}
class Obstacle {
constructor (x, y, w, h, c) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.c = c;
this.dx = -gameSpeed;
}
Update () {
this.x += this.dx;
this.Draw();
this.dx = -gameSpeed;
}
Draw () {
ctx.beginPath();
ctx.fillStyle = this.c;
ctx.fillRect(this.x, this.y, this.w, this.h);
ctx.closePath();
}
}
class Text {
constructor (t, x, y, a, c, s) {
this.t = t;
this.x = x;
this.y = y;
this.a = a;
this.c = c;
this.s = s;
}
Draw () {
ctx.beginPath();
ctx.fillStyle = this.c;
ctx.font = this.s + "px sans-serif";
ctx.textAlign = this.a;
ctx.fillText(this.t, this.x, this.y);
ctx.closePath();
}
}
// Game Functions
function SpawnObstacle () {
let size = RandomIntInRange(20, 70);
let type = RandomIntInRange(0, 1);
let obstacle = new Obstacle(canvas.width + size, canvas.height - size, size, size, '#2484E4');
if (type == 1) {
obstacle.y -= player.originalHeight - 10;
}
obstacles.push(obstacle);
}
function RandomIntInRange (min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function Start () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.font = "20px sans-serif";
gameSpeed = 3;
gravity = 1;
score = 0;
highscore = 0;
if (localStorage.getItem('highscore')) {
highscore = localStorage.getItem('highscore');
}
player = new Player(25, 0, 50, 50, '#FF5858');
scoreText = new Text("Score: " + score, 25, 25, "left", "#212121", "20");
highscoreText = new Text("Highscore: " + highscore, canvas.width - 25, 25, "right", "#212121", "20");
requestAnimationFrame(Update);
}
let initialSpawnTimer = 200;
let spawnTimer = initialSpawnTimer;
function Update () {
requestAnimationFrame(Update);
ctx.clearRect(0, 0, canvas.width, canvas.height);
spawnTimer--;
if (spawnTimer <= 0) {
SpawnObstacle();
console.log(obstacles);
spawnTimer = initialSpawnTimer - gameSpeed * 8;
if (spawnTimer < 60) {
spawnTimer = 60;
}
}
// Spawn Enemies
for (let i = 0; i < obstacles.length; i++) {
let o = obstacles[i];
if (o.x + o.w < 0) {
obstacles.splice(i, 1);
}
if (
player.x < o.x + o.w &&
player.x + player.w > o.x &&
player.y < o.y + o.h &&
player.y + player.h > o.y
) {
obstacles = [];
score = 0;
spawnTimer = initialSpawnTimer;
gameSpeed = 3;
window.localStorage.setItem('highscore', highscore);
}
o.Update();
}
player.Animate();
score++;
scoreText.t = "Score: " + score;
scoreText.Draw();
if (score > highscore) {
highscore = score;
highscoreText.t = "Highscore: " + highscore;
}
highscoreText.Draw();
gameSpeed += 0.003;
}
Start();
export function double (n) {
return n * 2;
}
Error 1:
Access to script at 'file:///C:/Users..../HTML/js_folder/main.js' from
origin 'null' has been blocked by CORS policy: Cross origin requests
are only supported for protocol schemes: http, data, chrome,
chrome-extension, chrome-untrusted, https. index.html:1
Error 2:
Failed to load resource: net::ERR_FAILED main.js:1
import {double} from './utils.js';
console.log(double(5));
"I've tried...
google searching error
|-- run cmd command 'chrome.exe --allow-running-insecure-content' with the 'index.html' file
|-- look at multiple 'stackoverflow.com' & 'superuser.com' search queries of this problem and tried the
| solutions
|-- watched a lot of 'youtube.com' on how to use import/export js files
rewriting the string to locate the folder multiple times"
我很难堪。。我不明白chrome似乎有这个问题，所以请解释一下为什么会这样，以及如何纠正它。非常感谢，谢谢您抽出时间。这个ES6模块的东西不适用于使用
文件：//