간단한 웹게임 만들기 1 - 가위, 바위, 보 게임
간단한 웹게임 만들기 시리즈의 첫번째로 가위, 바위, 보 게임을 만들어봅니다.
참고로 코드 및 가이드 작성은 ChatGPT대신 동일한 GPT4를 사용하는 Playground 를 통해 진행 합니다. 이유는 system 과 assistant 를 쉽게 지정 할수 있고 길이도 더 길게 설정 할수 있기 때문입니다. gpt4 버전의 OpenAI Playgound에서 아래와 같이 프롬프트를 요청합니다. 참고로 ChatGPT에도 동일한 프롬프트 요청을 할수 있습니다.
1. 프롬프트 요청 하기
Playgound에서는 OpenAI API 와 동일하게 User외에도 System과 Assistant 프롬프트를 지원합니다. System 프롬프트는 상황을 설정해주고 Assistant 프롬프트는 원하는 프롬프트에 필요한 정보를 제공 해주고 학습시키는 보조자 역할을 합니다.
그럼 아래와 같이 프롬프트를 요청 합니다.
- System 프롬프트
act as a experienced frontend developer
- User 프롬프트
User 프롬프트는 아래 요구 사항으로 간단한 가위, 바위, 보 게임을 만들어달라고 요청 합니다.
I’m trying to build a simple web game, give me step by step instruction with code example with the following requirements.
- title: Rock, paper, scissors
- using html, css, basic javascript
- design & css: modern style design, responsive
- output markdown code
- 답변은 한글로
프롬프트를 요청 하면 아래와 같이 코드 작성 하는 방법을 알려줍니다.
2. 코드 작성 하기
위의 답변 내용과 함께 코드를 작성 해봅니다.
안녕하세요! 웹 게임 "가위, 바위, 보"를 만드는 방법에 대해 간단하게 설명해 드리겠습니다. HTML, CSS, 기본 JavaScript를 사용하여 만들어 보겠습니다.
2.1. HTML 구조 작성
먼저, index.html 파일을 생성하고 아래와 같이 기본 HTML 구조를 작성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가위, 바위, 보 게임</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>가위, 바위, 보 게임</h1>
<div class="buttons">
<button id="rock">바위</button>
<button id="scissors">가위</button>
<button id="paper">보</button>
</div>
<div class="result">
<p id="message"></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2.2. CSS 스타일 작성
다음으로 styles.css 파일을 생성하고 아래와 같이 기본 CSS 스타일을 작성합니다.
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.container {
text-align: center;
background-color: #fff;
padding: 50px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
.buttons button {
font-size: 24px;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #f0f0f0;
}
.result p {
font-size: 20px;
margin-top: 30px;
}
2.3. JavaScript 로직 작성
마지막으로 script.js 파일을 생성하고 아래와 같이 게임 로직을 작성합니다.
const rockBtn = document.getElementById('rock');
const scissorsBtn = document.getElementById('scissors');
const paperBtn = document.getElementById('paper');
const message = document.getElementById('message');
const choices = ['바위', '가위', '보'];
rockBtn.addEventListener('click', () => playGame('바위'));
scissorsBtn.addEventListener('click', () => playGame('가위'));
paperBtn.addEventListener('click', () => playGame('보'));
function playGame(playerChoice) {
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
if (playerChoice === computerChoice) {
message.textContent = `비겼습니다! 당신: ${playerChoice}, 컴퓨터: ${computerChoice}`;
} else if (
(playerChoice === '바위' && computerChoice === '가위') ||
(playerChoice === '가위' && computerChoice === '보') ||
(playerChoice === '보' && computerChoice === '바위')
) {
message.textContent = `축하합니다! 당신이 이겼습니다! 당신: ${playerChoice}, 컴퓨터: ${computerChoice}`;
} else {
message.textContent = `아쉽네요! 당신이 졌습니다. 당신: ${playerChoice}, 컴퓨터: ${computerChoice}`;
}
}
이제 위의 세 파일을 같은 폴더에 저장한 후, index.html 파일을 웹 브라우저에서 열면 간단한 가위, 바위, 보 게임을 즐길 수 있습니다.
5. 코드 Codepen에 업로드 및 Netlify를 이용한 배포
완성된 코드를 Codepen에 작성하고 Netlify를 이용하여 배포해보겠습니다. HTML, CSS 및 JavaScript 섹션을 작성 하셨다면 CodePen 저장 및 내보내기와 Netlify에 배포를 참고 하셔서 배포 하실수 있습니다.
위의 순서로 따라서 만들어보니 정말 간단하게 아래와 같은 간단한 가위, 바위, 보 게임이 만들어졌습니다.
7. 마치며
지금까지 간단한 가위, 바위, 보 웹게임를 만들어보면서 출시 까지 해보았는데 도움이 되셨나요? 간단한 게임이지만 웹게임을 만들어본 경험을 통해 코딩에 더 흥미를 가지는 계기가 되었으면 좋겠습니다.
참고로 완성된 소스 코드는 GitHub 링크에서 확인 하실수 있습니다.