So i have a problem, according to the developer console, I have a cors error and i don’t understand why and if anybody can help correct my code it will be a pleasure and here is the video tutorial i am watching text. If anybody has any clue what’s going on apparently everything’s working for him and i have the same code as him
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
here is my code
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clicker game</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="main">
<div class="left">
<h3>Oranges <br><span class="orange-cost pink-text">0</span></h3>
<div class="orange-image-container">
<img src="orange.png" class="orange-image" onclick="incrementGem(event)" draggable="false">
</div>
</div>
<script id="upgrade-template" type="text/template">
<div class="right">
<div class="upgrade" onclick="buyupgrade('clicker')">
<div class="left-section">
<img src="clicker.png" class="upgradeimg">
</div>
<div class="mid-section">
<h4>Clicker</h4>
<div class="cost-info">
<p class="cost-text"><span class="clicker-cost">10</span></p>
<img src="orange.png" class="gemimg">
</div>
</div>
<div class="right-section">Level <span class="clickerlevel">0</span></div>
<div class="nextlevelinfo">
<p>
+<span class="cursor-increase">1 </span> oranges <br> per click
</p>
</div>
</div>
</script>
<div class="right">
<div class="upgrade" onclick="buyupgrade('clicker')">
<div class="left-section">
<img src="clicker.png" class="upgradeimg">
</div>
<div class="mid-section">
<h4>Clicker</h4>
<div class="cost-info">
<p class="cost-text"><span class="clicker-cost">10</span></p>
<img src="orange.png" class="gemimg">
</div>
</div>
<div class="right-section">Level <span class="clickerlevel">0</span></div>
<div class="nextlevelinfo">
<p>
+<span class="cursor-increase">1 </span> oranges <br> per click
</p>
</div>
</div>
<div class="right" id="upgrade-container">
</div>
<div class="upgrade" onclick="buyupgrade('crate')">
<div class="left-section">
<img src="crateorange.png" class="upgradeimg">
</div>
<div class="mid-section">
<h4>Crate</h4>
<div class="cost-info">
<p class="cost-text"><span class="crate-cost">130</span></p>
<img src="orange.png" class="gemimg">
</div>
</div>
<div class="right-section">Level <span class="cratelevel">0</span></div>
<div class="nextlevelinfo">
<p>
+<span class="crate-increase">4 </span> oranges <br> per second
</p>
</div>
</div>
<div class="upgrade" onclick="buyupgrade('farmer')">
<div class="left-section">
<img src="farmer.png" class="upgradeimg">
</div>
<div class="mid-section">
<h4>Farmer</h4>
<div class="cost-info">
<p class="cost-text"><span class="farmer-cost">850</span></p>
<img src="orange.png" class="gemimg">
</div>
</div>
<div class="right-section">Level <span class="farmerlevel">0</span></div>
<div class="nextlevelinfo">
<p>
+<span class="farmer-increase">12 </span> oranges <br> per second
</p>
</div>
</div>
<div class="upgrade" onclick="buyupgrade('factory')">
<div class="left-section">
<img src="factory.png" class="upgradeimg">
</div>
<div class="mid-section">
<h4>Factory</h4>
<div class="cost-info">
<p class="cost-text"><span class="factory-cost">4750</span></p>
<img src="orange.png" class="gemimg">
</div>
</div>
<div class="right-section">Level <span class="factorylevel">0</span></div>
<div class="nextlevelinfo">
<p>
+<span class="factory-increase">82 </span> oranges <br> per second
</p>
</div>
</div>
</div>
</div>
<div class="statistics">
<div class="texts">
<p>OPC: <span id="gpc-text" class="pink-text">1</span></p>
<p>OPS: <span id="gps-text" class="pink-text">0</span></p>
</div>
</div>
<div class="util-buttons">
<button class="util-button" onclick="save()">
Save
</button>
<button class="util-button"onclick="load()">
Load
</button>
</div>
</section>
<script src="index.js" type="module"></script>
</body>
</html>
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},
]
picture of the files