728x90
반응형
HTML, CSS, JavaScript로 클릭 게임 만들기
클릭으로 점수를 얻는 간단한 게임!
1. HTML로 기본 구조 만들기
HTML을 사용해 간단한 게임 구조를 설정합니다. 클릭 가능한 버튼과 점수를 표시할 요소를 추가합니다.
<div id="clickTarget"></div>
<p class="score">점수: 0</p>
2. CSS로 스타일링
CSS를 사용해 클릭 버튼을 동그랗게 꾸미고, 중앙에 배치합니다.
#clickTarget {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin: 20px auto;
}
3. JavaScript로 게임 로직 구현
JavaScript로 클릭 이벤트를 처리하고, 점수를 업데이트하는 코드를 작성합니다.
const clickTarget = document.getElementById("clickTarget");
const scoreElement = document.querySelector(".score");
let score = 0;
clickTarget.addEventListener("click", () => {
score++;
scoreElement.textContent = `점수: ${score}`;
});
4. 전체 코드
아래는 모든 단계를 통합한 완성된 클릭 게임의 전체 코드입니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>클릭 게임</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
#clickTarget {
width: 100px;
height: 100px;
background-color: #4CAF50;
border-radius: 50%;
display: inline-block;
cursor: pointer;
margin: 20px auto;
}
.score {
font-size: 1.5rem;
color: #FF5722;
text-align: center;
}
</style>
</head>
<body>
<div id="clickTarget"></div>
<p class="score">점수: 0</p>
<script>
const clickTarget = document.getElementById("clickTarget");
const scoreElement = document.querySelector(".score");
let score = 0;
clickTarget.addEventListener("click", () => {
score++;
scoreElement.textContent = `점수: ${score}`;
});
</script>
</body>
</html>
결론
HTML, CSS, JavaScript로 간단한 클릭 게임을 만드는 방법을 알아보았습니다. 이제 이 코드를 확장하여 난이도 조정, 타이머 추가, 점수 기록 등의 기능을 추가해 보세요!
728x90
반응형
'프로그래밍' 카테고리의 다른 글
| Python 기초 강의 1-2: 기본 문법과 데이터 타입 (0) | 2025.01.09 |
|---|---|
| Python 기초 강의 1-1: 파이썬 시작하기 (0) | 2025.01.08 |
| HTML, Css, Javascript 를 이용하여 공 튀기기 게임 만들기 (0) | 2025.01.08 |
| 파이썬을 이용한 우주선 슈팅 게임 만들기 (0) | 2025.01.06 |
| 파이썬을 이용한 장애물 피하기 게임 만들기 (0) | 2025.01.06 |