본문 바로가기
카테고리 없음

CodePen HTML, CSS, JavaScript를 사용해 미니 게임 만들기

by 슈르 2025. 1. 12.

제목 타이틀

CodePen은 HTML, CSS, JavaScript를 실시간으로 테스트하고 결과를 볼 수 있는 아주 실용적인 온라인 프로그래밍 도구입니다. 초보 프로그래머에게는 특히 실습과 기초를 다지기에 적합한 학습 환경을 제공합니다. 이번 글에서는 CodePen을 활용해 간단한 미니 게임을 만들어 보도록 하겠습니다.

1. CodePen 소개 및 환경 설정

CodePen의 기본 사용법은 간단합니다. [CodePen 홈페이지](https://codepen.io/)에 접속해 회원가입 후 "Create" 버튼을 눌러 새로운 프로젝트를 생성하시면 됩니다. HTML, CSS, JavaScript 입력란에 코드를 작성하면 바로 결과를 확인할 수 있습니다. 이전 글에 설정 방법과 생성방법을 설명해 두었습니다.

 

2025.01.03 - [분류 전체보기] - 초보자를 위한 CodePen 사용법

2. 게임 아이디어 및 설계

이번 프로젝트에서는 간단한 클릭 기반 게임인 "버튼 누르기 게임"을 만들어 보겠습니다. 제한 시간 내에 버튼을 최대한 많이 클릭하는 것을 목표로 하는 게임입니다.

  • HTML: 버튼과 점수 표시 화면
  • CSS: 화면 디자인과 버튼 스타일
  • JavaScript: 점수 계산, 타이머 작동

3. 코드 작성 및 설명

아래는 버튼 누르기 게임을 위한 HTML, CSS, JavaScript 코드입니다.

HTML

<div class="game-container">
  <h1>버튼 누르기 게임</h1>
  <div id="score-board">점수: <span id="score">0</span></div>
  <button id="click-button">클릭하세요!</button>
  <div id="timer">남은 시간: <span id="time">10</span></div>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
}
.game-container {
  margin-top: 50px;
}
#click-button {
  padding: 15px 30px;
  font-size: 18px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#click-button:hover {
  background-color: #2980b9;
}
#score-board, #timer {
  margin-top: 20px;
  font-size: 20px;
}

JavaScript

let score = 0;
let time = 10;

// 버튼 클릭 시 점수 증가
document.getElementById("click-button").addEventListener("click", function() {
  score++;
  document.getElementById("score").textContent = score;
});

// 타이머 작동
function startGame() {
  function updateTimer() {
    if (time > 0) {
      time--;
      document.getElementById("time").textContent = time;
      setTimeout(updateTimer, 1000);
    } else {
      alert(`게임 종료! 최종 점수: ${score}`);
    }
  }
  updateTimer();
}

// 게임 시작
startGame();

4. 실습 결과 미리보기

위 코드를 CodePen에 복사해 넣으면 실시간으로 실행 결과를 확인할 수 있습니다. 버튼을 클릭하면 점수가 올라가고, 타이머가 0이 되면 게임이 종료됩니다.

 

프로그래밍 적용 화면
게임 코드 적용 화면

 

이번 글에서는 CodePen을 활용해 간단한 미니 게임을 만들어 보았습니다. HTML, CSS, JavaScript가 어떻게 연결되는지 이해하고, CodePen 환경에서의 실습을 통해 기본적인 코딩 스킬을 연습할 수 있습니다. 앞으로 더 복잡한 기능을 추가하며 코딩 실력을 키워보는 연습을 해보세요! 감사합니다.