very new to JS. I have been following a tutorial for a simple clicker game and I've hit a roadblock. The console is giving me an error saying "Uncaught ReferenceError: game is not defined." Which also leads to the number not going up when the button is clicked. I followed the tutorial closely and can't seem to figure out why the page is giving me this error. Any help would be appreciated.
Also don't know if this is any helpful but when I click on the error in the console it points to the line that says "game.addToScore(game.clickValue)."
Code:
<!DOCTYPE html>
<html>
<head>
<title>Film Clicker</title>
<style>
.sectionLeft {
float: left;
width: 80%;
}
.sectionRight {
float: right;
width: 20%;
font-family: arial;
}
.scoreContainer {
background-color: rgb(238, 238, 238, 0.6);
width: 50%;
padding: 10px;
border-radius: 10px;
font-size: 24px;
font-weight: bold;
}
.clickerConatiner button {
position: relative;
transform: all .2s ease-in-out;
}
.clickerConatiner button:hover {
transform: scale(1.10);
}
.clickerConatiner button:active {
transform: scale(0.99);
}
.shopButton {
background-color: #b5b5b5;
transition: all .2s ease-in-out;
border-radius: 10px;
width: 100%;
margin: 10px 0px 10px 0px;
}
.shopButton:hover {
background-color: #c7c7c7;
transform: all .2s ease-in-out;
}
.shopButton #image {
width: 25%;
}
.shopButton img {
height: 64px;
width: 64px;
}
.shopButton #nameAndCost p {
margin: 0px;
width: 60%;
}
.shopButton #nameAndCost p:first-of-type {
font-size: 24px;
}
.shopButton #amount {
font-size: 40px;
color: #595959;
font-family: monospace;
width: 15%;
}
.sectionFooter {
margin-top: 50%;
}
.unselectable {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div class="sectionLeft">
<center>
<div class="scoreContainer unselectable">
<span id="score">0</span> films<br>
<span id="scorePerSecond">0</span> films per second</p>
</div>
<br>
<div class="clickerConatiner unselectable" >
<button onclick="game.addToScore(game.clickValue)">Produce Film</button>
</div>
</center>
<div class="sectionFooter">
<h5>Film Clicker</h5>
<button onclick="resetGame();">Reset Game</button>
</div>
</div>
<div class = "sectionRight">
<table class="shopButton unselectable" onclick="buyCursor()">
<tr>
<td id="image"><img src="cursor.png"></td>
<td id="nameAndCost">
<p>Cursor</p>
<p><span id="cursorCost">15</span> films</p>
</td>
<td id="amount"><span id="cursors">0</span></td>
</tr>
</table>
<table class="shopButton unselectable" onclick="buyCamera()">
<tr>
<td id="image"><img src="camera.png"></td>
<td id="nameAndCost">
<p>Camera</p>
<p><span id="cameraCost">50</span> films</p>
</td>
<td id="amount"><span id="cameras">0</span></td>
</tr>
</table>
<table class="shopButton unselectable" onclick="buyLighting()">
<tr>
<td id="image"><img src="lighting.png"></td>
<td id="nameAndCost">
<p>Lighting</p>
<p><span id="lightingCost">100</span> films</p>
</td>
<td id="amount"><span id="lighting">0</span></td>
</tr>
</table>
</div>
<script>
var game = {
score: 0,
totalScore: 0,
totalClicks: 0,
clickValue: 1,
version: 0.000,
addToScore: function(amount){
this.score = amount;
this.totalScore = amount;
display.updateScore();
}
};
var display = {
updateScore: function() {
document.getElementById("score").innerHTML = game.score;
document.title = game.score " films - Film Clicker";
}
};
var building = {
name: [
"Cursor",
"Camera",
"Lighting"
],
image: [
"cursor.png",
"camera.png",
"lighting.png"
],
count: [0, 0, 0],
income: [
1,
15,
155
],
cost: [
15,
50,
100
]
purchse: function(index) {
if(game.score >= this.cost[index]) {
game.score -= this.cost[index];
this.count[index] ;
this.cost[index] = Math.ceil(this.cost[index] * 1.10);
display.updateScore();
}
}
};
</script>
</body>
</html>
CodePudding user response：
in your building variable object, after the cost array, you are missing a comma.
cost: [
15,
50,
100
]
purchse: function(index) {
if(game.score >= this.cost[index]) {
to
cost: [
15,
50,
100
],
purchse: function(index) {
if(game.score >= this.cost[index]) {