I need to export some classes from script.js file, for that I added "export" before all classes. However the browser is returning the error "Uncaught ReferenceError: Gameboard is not defined".
The index.html file has the onclick="Gameboard.placeShips(1)" event. The Gameboard class exists inside the script.js file, as does the placeShips() method.
I can't export the classes and get the script.js file to continue working in index.html without errors.
index.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Battlership</title>
<link rel="stylesheet" href="estilo.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=Rubik+Dirt&display=swap" rel="stylesheet">
<script type="module" src="script.js"></script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
script.js
var ship = 4;
var myCoordinates=[];
var attackPoints = [];
var enemyCoordinates = [];
export class Ship{
constructor(length, nHit, isSunk){
this.length=length;
this.nHit=nHit;
this.issSunk=isSunk;
}
hit(){
//Increases the number of hits in the ship
this.nHit++;
}
isSunk(){
//calculates it based on their length and the
//number of ‘hits’.
if(this.length==this.nHit){
this.issSunk=true;
return this.issSunk;
}
return false;
}
}
var myShip4 = new Ship(4, 0, false);
var myShip3 = new Ship(3, 0, false);
var myShip2 = new Ship(2, 0, false);
var myShip1 = new Ship(1, 0, false);
var enemyShip4 = new Ship(4, 0, false);
var enemyShip3 = new Ship(3, 0, false);
var enemyShip2 = new Ship(2, 0, false);
var enemyShip1 = new Ship(1, 0, false);
export class Gameboard{
static placeShips(coordinate){
// place ships at specific coordinates by calling
//the ship class
for(let i=0; i<myCoordinates.length; i++){
if(myCoordinates[i]==coordinate){
return false;
}
if(ship==3){
if(myCoordinates[i]==coordinate+1){
return false;
}
if(myCoordinates[i]==coordinate+2){
return false;
}
}
if(ship==2){
if(myCoordinates[i]==coordinate+1){
return false;
}
}
}
if(ship==4){
const obj = document.getElementById(coordinate);
obj.style.backgroundImage="url('ship.jpg')";
obj.style.backgroundSize="100%";
const obj2 = document.getElementById(coordinate+1);
obj2.style.backgroundImage="url('ship.jpg')";
obj2.style.backgroundSize="100%";
const obj3 = document.getElementById(coordinate+2);
obj3.style.backgroundImage="url('ship.jpg')";
obj3.style.backgroundSize="100%";
const obj4 = document.getElementById(coordinate+3);
obj4.style.backgroundImage="url('ship.jpg')";
obj4.style.backgroundSize="100%";
myCoordinates.push(coordinate);
myCoordinates.push(coordinate+1);
myCoordinates.push(coordinate+2);
myCoordinates.push(coordinate+3);
ship=3;
return myShip4;
}
if(ship==3){
const obj = document.getElementById(coordinate);
obj.style.backgroundImage="url('ship.jpg')";
obj.style.backgroundSize="100%";
const obj2 = document.getElementById(coordinate+1);
obj2.style.backgroundImage="url('ship.jpg')";
obj2.style.backgroundSize="100%";
const obj3 = document.getElementById(coordinate+2);
obj3.style.backgroundImage="url('ship.jpg')";
obj3.style.backgroundSize="100%";
myCoordinates.push(coordinate);
myCoordinates.push(coordinate+1);
myCoordinates.push(coordinate+2);
ship=2;
return myShip3;
}
if(ship==2){
const obj = document.getElementById(coordinate);
obj.style.backgroundImage="url('ship.jpg')";
obj.style.backgroundSize="100%";
const obj2 = document.getElementById(coordinate+1);
obj2.style.backgroundImage="url('ship.jpg')";
obj2.style.backgroundSize="100%";
myCoordinates.push(coordinate);
myCoordinates.push(coordinate+1);
ship=1;
return myShip2;
}
if(ship==1){
myCoordinates.push(coordinate);
ship=0;
const scenario = new Gameboard();
scenario.displayScenario();
return myShip1;
}
}
displayScenario(){
var node = document.getElementById("container");
if (node.parentNode) {
node.parentNode.removeChild(node);
}
document.body.innerHTML="<div id='container'><div id='title'><h1>Battlership</h1></div><div id='text'><p>Attack your opponent!</p></div><div id='area'><div class='battlefield' id='my'></div><div class='battlefield' id='enemy'></div></div></div>";
var div1="";
for(let i=1; i<=100; i++){
div1 += '<div id="'+i+'" class="field"></div>';
}
document.getElementById("my").innerHTML=div1;
var div2="";
for(let i=101; i<=200; i++){
div2 += '<div id="'+i+'" class="field opponent" onclick="Player.makeMove('+i+')"></div>';
}
document.getElementById("enemy").innerHTML=div2;
for(let i=0; i<myCoordinates.length; i++){
let id=myCoordinates[i];
document.getElementById(id).style.backgroundImage="url('ship.png')";
document.getElementById(id).style.backgroundSize="100%";
}
var sort=108;
while(sort==108 || sort==109 || sort==110 || sort==118 || sort==119 || sort==120
|| sort==128 || sort==129 || sort==130 || sort==138 || sort==139 || sort==140
|| sort==148 || sort==149 || sort==150 || sort==158 || sort==159 || sort==160
|| sort==168 || sort==169 || sort==170 || sort==178 || sort==179 || sort==180
|| sort==188 || sort==189 || sort==190 || sort==198 || sort==199 || sort==200){
var sort=Math.floor(Math.random()*100+100);
}
enemyCoordinates.push(sort);
enemyCoordinates.push(sort+1);
enemyCoordinates.push(sort+2);
enemyCoordinates.push(sort+3);
while(sort==109 || sort==110 || sort==119 || sort==120
|| sort==129 || sort==130 ||sort==139 || sort==140
|| sort==149 || sort==150 || sort==159 || sort==160
|| sort==169 || sort==170 || sort==179 || sort==180
|| sort==189 || sort==190 || sort==199 || sort==200
|| sort==enemyCoordinates[0] || sort==enemyCoordinates[1]
|| sort==enemyCoordinates[2] || sort==enemyCoordinates[3]){
var sort=Math.floor(Math.random()*100+100);
}
enemyCoordinates.push(sort);
enemyCoordinates.push(sort+1);
enemyCoordinates.push(sort+2);
while(sort==110 || sort==120 || sort==130 || sort==140
|| sort==150 || sort==160 || sort==170 || sort==180
|| sort==190 || sort==200 || sort==enemyCoordinates[0] || sort==enemyCoordinates[1]
|| sort==enemyCoordinates[2] || sort==enemyCoordinates[3]
|| sort==enemyCoordinates[4] || sort==enemyCoordinates[5]
|| sort==enemyCoordinates[6]){
var sort=Math.floor(Math.random()*100+100);
}
enemyCoordinates.push(sort);
enemyCoordinates.push(sort+1);
while(sort==enemyCoordinates[0] || sort==enemyCoordinates[1]
|| sort==enemyCoordinates[2] || sort==enemyCoordinates[3]
|| sort==enemyCoordinates[4] || sort==enemyCoordinates[5]
|| sort==enemyCoordinates[6] || sort==enemyCoordinates[7] || sort==enemyCoordinates[8]){
var sort=Math.floor(Math.random()*100+100);
}
enemyCoordinates.push(sort);
return enemyCoordinates;
}
receiveAttack(){
//takes a pair of coordinates, determines whether
//or not the attack hit a ship and then sends the
//‘hit’ function to the correct ship, or records
//the coordinates of the missed shot.
var move = Math.floor(Math.random()*100);
for(let i=0; i<attackPoints.length; i++){
if(attackPoints[i]==move){
move = Math.floor(Math.random()*100);
i=0;
while(move==0){
move = Math.floor(Math.random()*100);
}
}
}
attackPoints.push(move);
for(let i=0; i<myCoordinates.length; i++){
if(myCoordinates[i]==move){
if(i==0 || i==1 || i==2 || i==3){
myShip4.hit();
}
if(i==4 || i==5 || i==6){
myShip3.hit();
}
if(i==7 || i==8){
myShip2.hit();
}
if(i==9){
myShip1.hit();
}
const audio = new Audio("sound.mp3");
audio.play();
}
}
document.getElementById(move).style.backgroundColor="#fca5a5";
const attack = new Gameboard();
const issAllSunk = attack.isAllSunk(myShip1, myShip2, myShip3, myShip4);
if(issAllSunk){
const audioFailure = new Audio("failure.wav");
audioFailure.play();
const game = new Gameboard();
game.gameOver();
}
}
displayAttack(coordinate){
//should keep track of missed attacks so they can
//display them properly
document.getElementById(coordinate).style.backgroundColor="#fca5a5";
for(let i=0; i<enemyCoordinates.length; i++){
if(coordinate==enemyCoordinates[i]){
document.getElementById(coordinate).style.backgroundImage="url('ship.png')";
document.getElementById(coordinate).style.backgroundSize="100%";
}
}
}
isAllSunk(ship1, ship2, ship3, ship4){
//Gameboards should be able to report whether or
//not all of their ships have been sunk.
const isShip4Sunk = ship4.isSunk();
const isShip3Sunk = ship3.isSunk();
const isShip2Sunk = ship2.isSunk();
const isShip1Sunk = ship1.isSunk();
if(isShip4Sunk==true && isShip3Sunk==true
&& isShip2Sunk==true && isShip1Sunk==true){
return true;
}
return false;
}
gameOver(){
//Create conditions so that the game ends once
//one players ships have all been sunk
const alert = document.createElement("div");
alert.setAttribute("id", "alert");
document.body.appendChild(alert);
const text = document.createElement("div");
text.setAttribute("id", "text2");
text.innerHTML="Game Over";
document.getElementById("alert").appendChild(text);
const button = document.createElement("button");
button.setAttribute("onclick", "reload()");
button.innerHTML="Play Again";
document.getElementById("alert").appendChild(button);
}
}
export class Player{
static makeMove(coordinate){
//Make automatic moves for the computer player
const attack = new Gameboard();
attack.displayAttack(coordinate);
for(let i=0; i<enemyCoordinates.length; i++){
if(coordinate==enemyCoordinates[i]){
if(i==0 || i==1 || i==2 || i==3){
enemyShip4.hit();
}
if(i==4 || i==5 || i==6){
enemyShip3.hit();
}
if(i==7 || i==8){
enemyShip2.hit();
}
if(i==9){
enemyShip1.hit();
}
const audio = new Audio("sound.mp3");
audio.play();
}
}
const issAllSunk = attack.isAllSunk(enemyShip1, enemyShip2, enemyShip3, enemyShip4);
if(issAllSunk){
const audioCompleted = new Audio("completed.wav");
audioCompleted.play();
const game = new Gameboard();
game.gameOver();
}else{
const player = new Gameboard();
player.receiveAttack();
}
}
}
function reload(){
document.location.reload(true);
}
document.addEventListener("DOMContentLoaded", function(){
const container = document.getElementById("container");
container.innerHTML="<div id='title'><h1>Battlership</h1></div><div id='text'><p>Place your ships in the position you want.</p></div><div id='battlefield' class='battlefield'></div>";
var div = "";
for(let i=1; i<=100; i++){
div += '<div id="'+i+'" class="field" onclick="Gameboard.placeShips('+i+')"></div>';
}
document.getElementById("battlefield").innerHTML=div;
document.getElementById("battlefield").addEventListener("mouseover", function(event){
let id = event.target.attributes.id.value;
let iid=parseInt(id);
if(ship==4){
if(iid!=8 && iid!=9 && iid!=10 && iid!=18 && iid!=19 && iid!=20 && iid!=28 && iid!=29 && iid!=30 && iid!=38 && iid!=39 && iid!=40
&& iid!=48 && iid!=49 && iid!=50 && iid!=58 && iid!=59 && iid!=60
&& iid!=68 && iid!=69 && iid!=70 && iid!=78 && iid!=79 && iid!=80
&& iid!=88 && iid!=89 && iid!=90 && iid!=98 && iid!=99 && iid!=100){
document.getElementById(id).style.backgroundColor="red";
document.getElementById(iid+1).style.backgroundColor="red";
document.getElementById(iid+2).style.backgroundColor="red";
document.getElementById(iid+3).style.backgroundColor="red";
}
}
if(ship==3){
if(iid!=9 && iid!=10 && iid!=19 && iid!=20 && iid!=29 && iid!=30 && iid!=39 && iid!=40
&& iid!=49 && iid!=50 && iid!=59 && iid!=60 && iid!=69
&& iid!=70 && iid!=79 && iid!=80 && iid!=89 && iid!=90 && iid!=99 && iid!=100){
document.getElementById(id).style.backgroundColor="red";
document.getElementById(iid+1).style.backgroundColor="red";
document.getElementById(iid+2).style.backgroundColor="red";
}
}
if(ship==2){
if(iid!=10 && iid!=20 && iid!=30 && iid!=40 && iid!=50
&& iid!=60 && iid!=70 && iid!=80 && iid!=90 && iid!=100){
document.getElementById(id).style.backgroundColor="red";
document.getElementById(iid+1).style.backgroundColor="red";
}
}
if(ship==1){
document.getElementById(id).style.backgroundColor="red";
}
});
document.getElementById("battlefield").addEventListener("mouseout", function(event){
let id = event.target.attributes.id.value;
let iid = parseInt(id);
if(ship==4){
document.getElementById(id).style.backgroundColor="white";
document.getElementById(iid+1).style.backgroundColor="white";
document.getElementById(iid+2).style.backgroundColor="white";
document.getElementById(iid+3).style.backgroundColor="white";
}
if(ship==3){
document.getElementById(id).style.backgroundColor="white";
document.getElementById(iid+1).style.backgroundColor="white";
document.getElementById(iid+2).style.backgroundColor="white";
}
if(ship==2){
document.getElementById(id).style.backgroundColor="white";
document.getElementById(iid+1).style.backgroundColor="white";
}
if(ship==1){
document.getElementById(id).style.backgroundColor="white";
}
});
});
I already tried to search for problems related to the same error on the Internet, but no solution solves my problem.
