간단한 자바스크립트 게임을 구현하였다.
캐치마인드와 같은 웹소켓을 활용한 실시간 멀티플레이어 게임을 다루려했으나, 생각보다 모바일까지 구현해야하는 난이도가 있고, 기한에 비해 규모가 커질것으로 생각되서 간략한 미니게임을 준비했다.
5승을 먼저 차지하는 가위바위보 게임이며 생각보다 약오른다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#">
<link rel="stylesheet" type="text/css" href="/assets/23_HP010_iLanD-main/nav.css">
<link rel="stylesheet" type="text/css" href="/assets/23_HP010_iLanD-main/game.css">
<link href="/css/style.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/assets/23_HP010_iLanD-main/nav.js"></script>
<script src="/assets/23_HP010_iLanD-main/game.js"></script>
<title> Game Room </title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-xxl navbar-dark bg-white">
<div class="container px-9">
<a href="#"><img width="32" height="32" src="/assets/23_HP010_iLanD-main/icon/iLanD_logo.png" onclick="openPage('/')"></a>
<h5> Game Room </h5>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" aria-current="page" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/movies&tv">Movies&TV</a></li>
<li class="nav-item"><a class="nav-link" href="/game">Game</a></li>
<li class="nav-item"><a class="nav-link" href="/chatting">Chatting</a></li>
<li class="nav-item"><a class="nav-link" href="/announcement">Announcement</a></li>
<li class="nav-item"><a class="nav-link" href="/aboutus_page">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="/service_guide">Service Guide</a></li>
<li class="nav-item"><a class="nav-link" href="/login">Login(Staffs&Admin)</a></li>
</ul>
</div>
</div>
</nav>
<div class="card mb-4">
<div class="card-header" style="background-color: #EFF4F9"> 게임 페이지 </div>
<div class="card-body game_area d-flex justify-content-center">
<!-- image_area 부분에 이미지를 표시할 img 요소와 히든 필드 추가 -->
<div class="image_area">
<img id="img" style="width: 200px;height: 200px;" src="">
<input type="hidden" id="computerChoice" value="">
</div>
</div>
<div class="card" style="padding: 15px">
<div class="button_area d-flex justify-content-between" style="padding-bottom: 20px">
<input type="button" class="btn btn-outline-primary" id="rock" value="🪨 Rock" onclick="userChoiceClick(1)" style="width: 30%; padding : 5px">
<input type="button" class="btn btn-outline-warning" id="paper" value="📜 Paper" onclick="userChoiceClick(2)" style="width: 30%; padding : 5px">
<input type="button" class="btn btn-outline-info" id="scissors" value="✂️ Scissors" onclick="userChoiceClick(3)" style="width: 30%; padding : 5px">
</div>
<div class="score">
<div class="card" style="padding: 10px; background-color: #f8f9fa">
✅ 5승을 먼저 차지하세요!
</div>
<div class="" style="padding: 10px; background-color: #f8f9fa" >😁 사용자 점수 :
<span class="user_score" id="user_score">0</span>
</div>
<div class="" style="padding: 10px; background-color: #f8f9fa" >🤖 컴퓨터 점수 :
<span class="computer_score" id="computer_score">0</span>
</div>
<div class="" style="padding: 10px; background-color: #f8f9fa" >😱 무승부!? :
<span class="draw_score" id="draw_score">0</span>
</div>
</div>
</div>
</div>
<!-- 컨텐츠(여기까지 삽입 됩니다.) -->
</body>
</html>
Java
복사
game.js
대부분 간단한 변수와 조건문으로 처리했으며 모바일로도 테스트를 했다. 난수에 따라 3개의 이미지를 동적으로 변경하는것이기 때문에 일부 기기에 따라 조금 느린 경향도 있는데 오히려 컴퓨터가 야비하게 변경하는듯한 모습에 열이 받는다.
// JavaScript 코드
const images = ["game_rock.png", "game_paper.png", "game_scissors.png"];
let currentIndex = 0;
let userScore = 0;
let computerScore = 0;
let drawScore = 0;
const winningScore = 5; // 이길 점수
const drawLimit = 5; // 무승부 제한
function getRandomChoice() {
return Math.floor(Math.random() * 3) + 1; // 1, 2, 3 중 하나를 무작위로 선택
}
function changeImage() {
const computerChoice = getRandomChoice();
// 이미지 변경만으로 미리 처리
document.getElementById("img").src = `assets/23_HP010_iLanD-main/img/${images[computerChoice - 1]}`;
document.getElementById("computerChoice").value = computerChoice;
currentIndex = (currentIndex + 1) % images.length; // 다음 이미지로 변경
}
function userChoiceClick(choice) {
const userChoice = parseInt(choice, 10);
const computerChoice = parseInt(document.getElementById("computerChoice").value, 10);
// 여기에서 승패를 판단하고 점수를 업데이트하는 로직 추가
compareChoices(userChoice, computerChoice);
// 이미지 변경 함수 호출 (이미지는 미리 설정되어 있음)
showResultImage(computerChoice);
// 승리 여부 확인
if (userScore === winningScore || computerScore === winningScore || drawScore === drawLimit) {
if (userScore >= winningScore) {
announceWinner("사용자");
} else if (computerScore >= winningScore) {
announceLoser("컴퓨터");
} else {
announceDrawLimit();
}
}
}
// 승패를 판단하고 점수를 업데이트하는 로직을 추가하는 함수
function compareChoices(userChoice, computerChoice) {
if (userChoice === computerChoice) {
alert("무승부!");
drawScore++;
document.getElementById("draw_score").textContent = drawScore;
if (drawScore === drawLimit) {
announceDrawLimit();
}
} else if (
(userChoice === 1 && computerChoice === 3) ||
(userChoice === 2 && computerChoice === 1) ||
(userChoice === 3 && computerChoice === 2)
) {
alert("사용자가 이겼습니다!");
userScore++;
} else {
alert("컴퓨터가 이겼습니다!");
computerScore++;
}
document.getElementById("user_score").textContent = userScore;
document.getElementById("computer_score").textContent = computerScore;
}
// 승리 또는 패배 알림 및 점수 초기화
function announceWinner(winner) {
alert(`축하합니다! ${winner}가 5승으로 이겼습니다!`);
resetScores();
}
// 패배 알림 및 초기화
function announceLoser(loser) {
alert(`이런... ${loser}가 5승으로 이겼네요. 못하겠다고요!`);
resetScores();
}
// 무승부 제한 알림 및 초기화
function announceDrawLimit() {
alert("게임을 이해하고 계신거죠..? 무승부가 5회 달성되었습니다!");
resetScores();
}
// 이미지를 변경하여 결과를 보여주는 함수
function showResultImage(computerChoice) {
// 이미지 변경만으로 미리 처리
document.getElementById("img").src = `assets/23_HP010_iLanD-main/img/${images[computerChoice - 1]}`;
}
// 점수 초기화 함수
function resetScores() {
userScore = 0;
computerScore = 0;
drawScore = 0;
document.getElementById("user_score").textContent = userScore;
document.getElementById("computer_score").textContent = computerScore;
document.getElementById("draw_score").textContent = drawScore;
}
// 0.2초마다 이미지 변경
setInterval(changeImage, 300);
Java
복사