#javascript #html
Вопрос:
очень новичок в JS. Я следовал учебнику по простой игре-кликеру и наткнулся на препятствие. Консоль выдает мне сообщение об ошибке «Ошибка ссылки: игра не определена». Что также приводит к тому, что число не увеличивается при нажатии кнопки. Я внимательно следил за учебником и, похоже, не могу понять, почему страница выдает мне эту ошибку. Любая помощь будет признательна.
Также не знаю, полезно ли это, но когда я нажимаю на ошибку в консоли, она указывает на строку с надписью «game.addToScore(game.clickValue)».
Код:
<!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>
Ответ №1:
в вашем объекте переменной здания после массива затрат отсутствует запятая.
cost: [
15,
50,
100
]
purchse: function(index) {
if(game.score >= this.cost[index]) {
Для
cost: [
15,
50,
100
],
purchse: function(index) {
if(game.score >= this.cost[index]) {