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="dice">🎲</div>
<button id="rollButton">주사위 던지기</button>
<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;
}

#dice {
  font-size: 100px;
}

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

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

JavaScript (게임 로직)

javascript
document.getElementById('rollButton').addEventListener('click', rollDice);

function rollDice() {
  const diceFaces = ['⚀', '⚁', '⚂', '⚃', '⚄', '⚅'];  // 주사위 면을 나타내는 이모지
  const rollResult = diceFaces[Math.floor(Math.random() * diceFaces.length)];
  document.getElementById('dice').textContent = rollResult;  // 주사위 결과 표시
  document.getElementById('result').textContent = `결과: ${rollResult}`;
}

위 코드를 사용하여 주사위 던지기 게임을 구현할 수 있습니다. HTML은 페이지의 구조를 정의하고, CSS는 페이지의 스타일을 지정합니다. JavaScript는 주사위 던지기 기능을 구현하며, 랜덤한 결과를 생성하고 페이지에 표시합니다.

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

Location: 대한민국