так что я делаю игру просто с использованием javascript, чтобы попрактиковаться в своем умении (да, я новичок в js).
что я пытаюсь достичь в этом коде, так это всего девять кнопок, и эти кнопки случайным образом станут красными, затем вернутся в нормальное состояние через 1 с, когда пользователь нажмет красную кнопку, игровой счет +1 ，, иначе ничего не произойдет.
, поэтому я придумываю код, подобный следующему:
Проблема в том, что, когда я добавляю код для нажатия кнопки мыши, когда кнопка становится красной, gameScore автоматически добавит плюс один, я не уверен, какая частья сделал неправильно, кто-нибудь может мне помочь?я застрял на этой проблеме уже на один день ...
SNIPPET:
var gameScore = 0;
function start() {
gameTime();
//random number
var popTime = Math.random() * 200 + 800;
setInterval("ratPop()", popTime);
console.log(popTime);
};
//rat pop out
function ratPop() {
var ratNumber = Math.floor(Math.random() * 9);
var rats = document.getElementsByClassName('hitArea');
rats[ratNumber].style.backgroundColor = 'red';
rats[ratNumber].onclick = pointsCount(); // this is the problem
setTimeout(
function goBack() {
rats[ratNumber].style.backgroundColor = 'white';
}, 1000
);
};
//timer
function gameTime() {
var number = document.getElementById('timer');
var count = 60;
number.innerHTML = count;
var colock = null;
colock = setInterval(function() {
if (count > 0) {
count = count - 1;
number.innerHTML = count;
} else {
clearInterval(colock);
}
}, 1000);
}
//score
function pointsCount() {
var score = document.getElementById('score');
gameScore = gameScore + 1;
score.innerHTML = gameScore;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id = 'playGround'>
<ul id='rats'>
<li><button type="button" class = 'hitArea' id =
'rat0'>rat0</button></li>
<li><button type="button" class = 'hitArea' id =
'rat1'>rat1</button></li>
<li><button type="button" class = 'hitArea' id =
'rat2'>rat2</button></li>
<li><button type="button" class = 'hitArea' id =
'rat3'>rat3</button></li>
<li><button type="button" class = 'hitArea' id =
'rat4'>rat4</button></li>
<li><button type="button" class = 'hitArea' id =
'rat5'>rat5</button></li>
<li><button type="button" class = 'hitArea' id =
'rat6'>rat6</button></li>
<li><button type="button" class = 'hitArea' id =
'rat7'>rat7</button></li>
<li><button type="button" class = 'hitArea' id =
'rat8'>rat8</button></li>
</ul>
</div>
</div>
<div id = 'controlPanel'>
<button onclick= "start()">GameStart!</button>
<button>GameStop</button>
<button>GameOver</button>
</div>
<div>
<h1>time：<span id='timer'>60</span></h1>
</div>
<div id = 'scoreConter'>
<h1>score：<span id='score'>0</span></h1>
</div>
<script src="./script.js"></script>
</body>
</html>