반응형
[JavaScript] 자바스크립트로 마우스 클릭 게임(점 클릭 게임) 만들기 !!
html과 javascript로 랜덤으로 나오는 점을 클릭하여 마우스 속도 및 클릭 정확도 측정하는 게임입니다 :)
예제코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>점 클릭 게임</title>
<style>
#game-area {
position: relative;
width: 700px;
height: 700px;
border: 1px solid black;
}
.dot {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="game-area"></div>
<p>남은 시간: <span id="time">10</span>초</p>
<p>점수: <span id="score">0</span>점 =><span id="result"></span></p>
<button onclick="startGame()">게임 시작</button>
</body>
</html>
<script>
var gameArea = document.getElementById('game-area');
var timeLeft = document.getElementById('time');
var score = document.getElementById('score');
var result = document.getElementById('result');
var dots = [];
var timer;
var gameSeconds = 10;
var clickedDots = 0;
var rank = 1;
function createDot() {
var dot = document.createElement('div');
dot.classList.add('dot');
dot.style.left = Math.floor(Math.random() * 670) + 'px';
dot.style.top = Math.floor(Math.random() * 670) + 'px';
dot.addEventListener('click', function() {
clickedDots++;
score.innerHTML = clickedDots;
dot.remove();
createDot();
});
gameArea.appendChild(dot);
dots.push(dot);
}
function startGame() {
timer = setInterval(function() {
timeLeft.innerHTML = gameSeconds--;
if (gameSeconds < 0) {
clearInterval(timer);
alert('게임 종료! 점수: ' + clickedDots);
if (rank === 1)
result.innerHTML += " " + rank + "번째: " + clickedDots + "점";
else
result.innerHTML += "/ " + rank + "번째: " + clickedDots + "점";
rank++;
gameSeconds = 10;
clickedDots = 0;
score.innerHTML = 0;
timeLeft.innerHTML = gameSeconds--;
for (var i = 0; i < dots.length; i++) {
dots[i].remove();
}
}
}, 1000);
createDot();
}
</script>결과값
남은 시간: 10초
점수: 0점 =>
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript & jQuery] 제이쿼리를 사용하여 img 태그 src 변경하는 방법 !! (0) | 2023.05.08 |
|---|---|
| [JavaScript & jQuery] 제이쿼리로 input 텍스트 변경 시점 감지 및 찾는 방법 !! (2) | 2023.05.03 |
| [JavaScript] 자바스크립트 정규식으로 사진 확장자 제거 하는 방법 !! (0) | 2023.04.23 |
| [javascript & ChatGPT] 자바스크립트로 chatGPT API 호출하는 방법 !! (0) | 2023.04.20 |
| [JavaScript] 자바스크립트로 브라우저 크기 변경 및 사이즈 확인 하는 방법 !! (0) | 2023.04.18 |
댓글