Итак, я пытался создать игру-кликер, и внезапно появилась ошибка, которую она мне показывает. ⇐ CSS

[Anonymous]

Итак, у меня проблема: согласно консоли разработчика, у меня ошибка Cors, и я не понимаю, почему, и если кто-нибудь сможет помочь исправить мой код, это будет приятно, и вот видеоурок, я смотрю текст . Если кто-нибудь имеет представление о том, что происходит, очевидно, у него все работает, и у меня тот же код, что и у него

Код: Выделить всё

index.html:1 Access to script at 'file:///C:/Users/PC/Downloads/clicker%20game/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
index.js:1

Failed to load resource: net::ERR_FAILED
3index.html:19 Uncaught ReferenceError: incrementGem is not defined
at HTMLImageElement.onclick (index.html:19:112)
onclick @ index.html:19
index.html:46 Uncaught ReferenceError: buyupgrade is not defined
at HTMLDivElement.onclick (index.html:46:70)
onclick @ index.html:46
index.html:133 Uncaught ReferenceError: save is not defined
at HTMLButtonElement.onclick (index.html:133:58)
onclick @ index.html:133
index.html:136 Uncaught ReferenceError: load is not defined
at HTMLButtonElement.onclick (index.html:136:57)
onclick @ index.html:136

вот мой код
html:

Код: Выделить всё

 




Clicker game









Oranges
0


[img]orange.png[/img]






[img]clicker.png[/img]

[h4]Clicker[/h4]

10
[img]orange.png[/img]


Level 0

+1  oranges
per click






[img]clicker.png[/img]

[h4]Clicker[/h4]

10
[img]orange.png[/img]


Level 0

+1  oranges
per click




[img]crateorange.png[/img]

[h4]Crate[/h4]

130
[img]orange.png[/img]


Level 0

+4  oranges
per second




[img]farmer.png[/img]

[h4]Farmer[/h4]

850
[img]orange.png[/img]


Level 0

+12  oranges
per second




[img]factory.png[/img]

[h4]Factory[/h4]

4750
[img]orange.png[/img]


Level 0

+82  oranges
per second







OPC: 1
OPS: 0




Save


Load

Javascript 1

Код: Выделить всё

import { defaultValues } from "./constants/defaultValues.js";

let gem = document.querySelector('.orange-cost');
let parsedgem = parseFloat(gem.innerHTML);
let clickerCost = document.querySelector('.clicker-cost');
let parsedclickerCost = parseFloat(clickerCost.innerHTML);
let clickerlevel = document.querySelector(".clickerlevel");
let clickerincrease = document.querySelector(".cursor-increase");
let parsedclickerincrease = parseFloat(clickerincrease.innerHTML);

let crateCost = document.querySelector('.crate-cost');
let parsedcrateCost = parseFloat(crateCost.innerHTML);
let cratelevel = document.querySelector(".cratelevel");
let crateincrease = document.querySelector(".crate-increase");
let parsedcrateincrease = parseFloat(crateincrease.innerHTML);

let farmerCost = document.querySelector('.farmer-cost');
let parsedfarmerCost = parseFloat(farmerCost.innerHTML);
let farmerlevel = document.querySelector(".farmerlevel");
let farmerincrease = document.querySelector(".farmer-increase");
let parsedfarmerincrease = parseFloat(farmerincrease.innerHTML);
let gpctext = document.getElementById("gpc-text")
let gpsText = document.getElementById("gps-text")
let gpc = 1;
let gps = 0;
const upgrades = [
{
name: "clicker",
cost: document.querySelector(".clicker-cost"),
parsedCost: parsedclickerCost = parseFloat(document.querySelector(".clicker-cost").innerHTML),
increase: document.querySelector(".cursor-increase"),
parsedincrease: parseFloat(document.querySelector(".cursor-increase").innerHTML),
level: document.querySelector(".clickerlevel"),
orangemultiplier: 1.025,
costmultiplier: 1.12,

},
{
name: "crate",
cost: document.querySelector(".crate-cost"),
parsedCost: parsedcrateCost = parseFloat(document.querySelector(".crate-cost").innerHTML),
increase: document.querySelector(".crate-increase"),
parsedincrease: parseFloat(document.querySelector(".crate-increase").innerHTML),
level: document.querySelector(".cratelevel"),
orangemultiplier: 1.03,
costmultiplier: 1.115,

},
{
name: "farmer",
cost: document.querySelector(".farmer-cost"),
parsedCost: parsedfarmerCost = parseFloat(document.querySelector(".farmer-cost").innerHTML),
increase: document.querySelector(".farmer-increase"),
parsedincrease: parseFloat(document.querySelector(".farmer-increase").innerHTML),
level: document.querySelector(".farmerlevel"),
orangemultiplier: 1.035,
costmultiplier: 1.11,

},
{
name: "factory",
cost: document.querySelector(".factory-cost"),
parsedCost: parsedfactoryCost = parseFloat(document.querySelector(".factory-cost").innerHTML),
increase: document.querySelector(".factory-increase"),
parsedincrease: parseFloat(document.querySelector(".factory-increase").innerHTML),
level: document.querySelector(".factorylevel"),
orangemultiplier: 1.04,
costmultiplier: 1.10,

},
];

let gemimgcontainer = document.querySelector('.orange-image-container')
function incrementGem(event) {
gem.innerHTML = Math.round(parsedgem += gpc);
const x = event.offsetX
const y = event.offsetY

const div = document.createElement('div')
div.innerHTML =`+${Math.round(gpc)}`
div.style.cssText = `color: white; position: absolute; top: ${y}px;  left: ${x}px; font-size; 30px; pointer-events: none;`
gemimgcontainer.appendChild(div)
div.classList.add('fade-up')
timeout(div)
}
const timeout = (div) => {
setTimeout(() => {
div.remove()

},800);
}
function createUpgrade() {
const upgradesContainer = document.getElementById('upgrade-container');
const template = document.getElementById('upgrade-template').textContent;

defaultValues.forEach((value) => {
});
}
function buyupgrade(upgrade){
const mu = upgrades.find((u) => u.name === upgrade);

if (parsedgem >= mu.parsedCost){
gem.innerHTML = Math.round(parsedgem -= mu.parsedCost);

mu.level.innerHTML++;
mu.parsedincrease = parseFloat((mu.parsedincrease * mu.orangemultiplier).toFixed(2));
mu.increase.innerHTML = mu.parsedincrease;
mu.parsedCost *= mu.costmultiplier;
mu.cost.innerHTML = Math.round(mu.parsedCost);

if (mu.name === 'clicker'){
gpc += mu.parsedincrease;
} else {
gps += mu.parsedincrease;
}
}
}

function save(){
localStorage.clear()
upgrades.map((upgrade) => {
const obj = JSON.stringify({
parseLevel: parseFloat(upgrade.level.innerHTML),
parsedCost: upgrade.parsedCost,
parsedIncrease: upgrade.parsedincrease
});

localStorage.setItem(upgrade.name, obj);
});
localStorage.setItem('gpc', JSON.stringify(gpc));
localStorage.setItem('gps', JSON.stringify(gps));
localStorage.setItem('orange', JSON.stringify(parsedgem));
}

function load(){
upgrades.map((upgrade) => {
const savedvalues = JSON.parse(localStorage.getItem(upgrade.name));
upgrade.parsedCost = savedvalues.parsedCost;
upgrade.parsedincrease = savedvalues.parsedIncrease;
upgrade.level.innerHTML = savedvalues.parseLevel;
upgrade.cost.innerHTML = Math.round(upgrade.parsedCost);
upgrade.increase.innerHTML = upgrade.parsedincrease;
});
gpc = JSON.parse(localStorage.getItem('gpc'));
gps = JSON.parse(localStorage.getItem('gps'));
parsedgem = JSON.parse(localStorage.getItem('orange'));

gem.innerHTML = Math.round(parsedgem);
}

setInterval(() =>{
parsedgem += gps / 10;
gem.innerHTML = Math.round(parsedgem);
gpctext.innerHTML = Math.round(gpc);
gpsText.innerHTML = Math.round(gps);
},100);

window.incrementGem = incrementGem;
window.buyupgrade = buyupgrade;
window.save = save;
window.load = load;

Javascript 2

Код: Выделить всё

export const defaultValues = [
{name: 'clicker', image: 'clicker.png', cost: 10, increase: 1},
{name: 'crate', image: 'crateorange.png', cost: 60, increase: 4},
{name: 'farmer', image: 'farmer.png', cost: 380, increase: 16},
{name: 'factory', image: 'factory.png', cost: 3105, increase: 82},
]

css

Код: Выделить всё

export const defaultValues = [
{name: 'clicker', image: 'clicker.png', cost: 10, increase: 1},
{name: 'crate', image: 'crateorange.png', cost: 60, increase: 4},
{name: 'farmer', image: 'farmer.png', cost: 380, increase: 16},
{name: 'factory', image: 'factory.png', cost: 3105, increase: 82},
]

изображение файлов

Подробнее здесь: https://stackoverflow.com/questions/783 ... e-is-the-e