0
I’m a beginner in Javascript and decided to try a Memory Game to test my skills. My idea is the following: make an HTML page that will be the menu (where players will insert the names and the script will test if they are valid) and another page where the game would actually happen. After the names are entered, the script deletes the entire page and creates an element <iframe> that loads the page where the game takes place.
It turns out that the variables where the entered names are saved are in the first Javascript file - the menu page -, and I would like to send them to the second Javascript file, to manipulate them inside.
I did some research on the Internet and tried to use export and import, but made the mistake Uncaught SyntaxError: Unexpected token 'export', then I don’t know what to do.
My codes:
Memorygame.html
<html>
<head>
<title>Memory Game</title>
<link rel="stylesheet" href="MemoryGame.css">
</head>
<body id="gameBody">
<div id="gameMenu">
<h1>Memory Game</h1>
<br>
<p>Insert the name of the players:</p>
<input type="text" placeholder="Player 1" id="pOneInput">
<br>
<input type="text" placeholder="Player 2" id="pTwoInput">
<br> <br>
<button onclick="verifyNames()">Start Game</button>
</div>
<script src="MemoryGame.js"></script>
</body>
</html>
Memorygame.js
var pOneName = "Player 1";
var pTwoName = "Player 2";
var gameBodyPage = document.getElementById("gameBody");
var gameMenuPage = document.getElementById("gameMenu");
function verifyNames() {
if (document.getElementById("pOneInput").value != "") {
pOneName = document.getElementById("pOneInput").value;
} else {
pOneName = "Player 1";
}
if (document.getElementById("pTwoInput").value != "") {
pTwoName = document.getElementById("pTwoInput").value;
} else {
pTwoName = "Player 2";
}
if (pOneName === pTwoName) {
alert("The names can't be the same!");
} else {
startGame();
}
}
function startGame() {
gameBodyPage.removeChild(gameMenuPage);
var gameCore = document.createElement("iframe");
gameCore.setAttribute("src", "MemoryGame-core.html");
gameCore.setAttribute("title", "Memory Game's Core");
gameCore.setAttribute("width", "100%");
gameCore.setAttribute("height", "100%");
gameBodyPage.appendChild(gameCore);
}
Memorygame-core.html
<html>
<head>
<title>Memory Game</title>
<link rel="stylesheet" href="MemoryGame-core.css">
</head>
<body>
<div id="playerTurn"></div>
<button onclick="chosenFigure(1)"><img src="" width="100" height="100"></button>
<button onclick="chosenFigure(2)"><img src="" width="100" height="100"></button>
<button onclick="chosenFigure(3)"><img src="" width="100" height="100"></button>
<br>
<button onclick="chosenFigure(4)"><img src="" width="100" height="100"></button>
<button onclick="chosenFigure(5)"><img src="" width="100" height="100"></button>
<button onclick="chosenFigure(6)"><img src="" width="100" height="100"></button>
<br>
<button onclick="chosenFigure(7)"><img src="" width="100" height="100"></button>
<button onclick="chosenFigure(8)"><img src="" width="100" height="100"></button>
<button onclick="chosenFigure(9)"><img src="" width="100" height="100"></button>
<br>
<button onclick="chosenFigure(10)"><img src="" width="100" height="100"></button>
<button onclick="chosenFigure(11)"><img src="" width="100" height="100"></button>
<button onclick="chosenFigure(12)"><img src="" width="100" height="100"></button>
<script src="MemoryGame-core.js"></script>
</body>
</html>
Some important information: I didn’t put the files .css because they only serve to center page elements. I also did not put the file MemoryGame-core.js because it is empty, since, given my problem, I did not proceed with writing the code. And the Urls of the archive images MemoryGame-core.html are empty because I will put later.
If I understand correctly, it’s to put the script with the type "module", isn’t it? I tried that, but it didn’t work. Gave error "Access to script from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for Protocol schemes: http, data, Chrome, Chrome-Extension, https.". If I’m not supposed to do this, I’m sorry, I’m very beginner in Javascript (and programming in general).
– Nathan Murillo