블로그에 넣을 수 있는 HTML, CSS, JavaScript 기반의 가위바위보 게임 코딩

날짜:

블로그에 넣을 수 있는 간단한 HTML, CSS, JavaScript 기반의 가위바위보 게임 코드를 제공하겠습니다. 이 코드는 웹 브라우저에서 직접 실행할 수 있으며, 사용자가 버튼을 클릭하여 게임을 진행하고 결과를 화면에 표시합니다.

HTML (가위바위보 게임을 위한 구조)

html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가위바위보 게임</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>가위바위보 게임</h1>
<div id="choices">
  <button onclick="userChoice('가위')">가위</button>
  <button onclick="userChoice('바위')">바위</button>
  <button onclick="userChoice('보')">보</button>
</div>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>

CSS (스타일링)

css
body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding-top: 50px;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

#result {
  margin-top: 20px;
  font-size: 24px;
  color: #333;
}

JavaScript (게임 로직)

javascript
function userChoice(userSelection) {
  const choices = ['가위', '바위', '보'];
  const computerChoice = choices[Math.floor(Math.random() * choices.length)];
  const resultDisplay = document.getElementById('result');
  
  if (userSelection === computerChoice) {
    resultDisplay.innerHTML = '결과: 비겼습니다!';
  } else if (
    (userSelection === '가위' && computerChoice === '보') ||
    (userSelection === '바위' && computerChoice === '가위') ||
    (userSelection === '보' && computerChoice === '바위')
  ) {
    resultDisplay.innerHTML = `결과: 당신이 이겼습니다! 컴퓨터는 ${computerChoice}를 냈습니다.`;
  } else {
    resultDisplay.innerHTML = `결과: 당신이 졌습니다! 컴퓨터는 ${computerChoice}를 냈습니다.`;
  }
}

위 코드를 복사하여 각각의 파일에 붙여넣기 하고, HTML 파일은 블로그의 웹 페이지에 삽입하면 됩니다. CSS와 JavaScript는 각각 <style> 태그와 <script> 태그 내에 직접 삽입하거나, 외부 파일로 연결하여 사용할 수 있습니다. 이렇게 하면 간단한 가위바위보 게임을 블로그에 추가할 수 있습니다.

Location: 대한민국