블로그에 간단한 게임을 추가하고 싶으시면 HTML, CSS, 그리고 JavaScript를 사용해서 만들 수 있습니다. 여기서는 매우 간단한 게임의 HTML 소스를 제공해 드릴게요.
1. 숫자 맞추기 게임
숫자를 추측하는 간단한 게임으로, 앞서 설명드린 것처럼 1부터 100 사이의 랜덤 숫자를 맞추는 게임입니다.
숫자 맞추기 게임
1부터 100까지의 숫자를 맞춰보세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자 맞추기 게임</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
input {
padding: 10px;
font-size: 18px;
}
button {
padding: 10px 20px;
font-size: 18px;
}
.message {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>숫자 맞추기 게임</h1>
<p>1부터 100까지의 숫자를 맞춰보세요!</p>
<input type="number" id="guessInput" placeholder="숫자를 입력하세요" />
<button onclick="checkGuess()">확인</button>
<div class="message" id="message"></div>
<script>
const randomNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
function checkGuess() {
const userGuess = document.getElementById("guessInput").value;
const message = document.getElementById("message");
attempts++;
if (userGuess == randomNumber) {
message.textContent = `축하합니다! ${attempts}번 만에 맞추셨습니다.`;
message.style.color = 'green';
} else if (userGuess > randomNumber) {
message.textContent = '너무 큽니다! 다시 시도해보세요.';
message.style.color = 'red';
} else {
message.textContent = '너무 작습니다! 다시 시도해보세요.';
message.style.color = 'red';
}
}
</script>
</body>
</html>2. 가위바위보 게임
사용자와 컴퓨터가 가위, 바위, 보를 선택해 승자를 가리는 게임입니다.
가위바위보 게임
가위, 바위, 보 중 하나를 선택하세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가위바위보 게임</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 20px;
margin: 10px;
}
.result {
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>가위바위보 게임</h1>
<p>가위, 바위, 보 중 하나를 선택하세요!</p>
<button onclick="play('가위')">가위</button>
<button onclick="play('바위')">바위</button>
<button onclick="play('보')">보</button>
<div class="result" id="result"></div>
<script>
function play(userChoice) {
const choices = ['가위', '바위', '보'];
const computerChoice = choices[Math.floor(Math.random() * 3)];
let result = '';
if (userChoice === computerChoice) {
result = '비겼습니다!';
} else if (
(userChoice === '가위' && computerChoice === '보') ||
(userChoice === '바위' && computerChoice === '가위') ||
(userChoice === '보' && computerChoice === '바위')
) {
result = `이겼습니다! 컴퓨터는 ${computerChoice}를 냈습니다.`;
} else {
result = `졌습니다... 컴퓨터는 ${computerChoice}를 냈습니다.`;
}
document.getElementById('result').textContent = result;
}
</script>
</body>
</html>3. 퀴즈 게임
사용자에게 퀴즈를 내고, 정답인지 오답인지 확인하는 게임입니다.
퀴즈 게임
다음 중 HTML의 약자는 무엇일까요?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>퀴즈 게임</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 20px;
margin: 10px;
}
.result {
font-size: 24px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>퀴즈 게임</h1>
<p>다음 중 HTML의 약자는 무엇일까요?</p>
<button onclick="checkAnswer('정답')">Hyper Text Markup Language</button>
<button onclick="checkAnswer('오답')">Home Tool Markup Language</button>
<button onclick="checkAnswer('오답')">Hyperlinks and Text Markup Language</button>
<div class="result" id="result"></div>
<script>
function checkAnswer(answer) {
const result = document.getElementById('result');
if (answer === '정답') {
result.textContent = '정답입니다!';
result.style.color = 'green';
} else {
result.textContent = '오답입니다. 다시 시도해보세요.';
result.style.color = 'red';
}
}
</script>
</body>
</html>4. 간단한 미로 게임
화살표 키를 사용해 목표 지점까지 이동하는 간단한 미로 게임입니다.
미로 게임
화살표 키로 파란 블록을 녹색 목표까지 이동하세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>미로 게임</title>
<style>
#maze {
display: grid;
grid-template-columns: repeat(5, 50px);
grid-template-rows: repeat(5, 50px);
gap: 5px;
}
.cell {
width: 50px;
height: 50px;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
}
.player {
background-color: blue;
}
.goal {
background-color: green;
}
</style>
</head>
<body>
<h1>미로 게임</h1>
<p>화살표 키로 파란 블록을 녹색 목표까지 이동하세요!</p>
<div id="maze">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell goal"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell player"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<script>
let playerPosition = 10;
const mazeCells = document.querySelectorAll('.cell');
function movePlayer(newPosition) {
mazeCells[playerPosition].classList.remove('player');
playerPosition = newPosition;
mazeCells[playerPosition].classList.add('player');
}
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowUp' && playerPosition - 5 >= 0) {
movePlayer(playerPosition - 5);
} else if (event.key === 'ArrowDown' && playerPosition + 5 < 25) {
movePlayer(playerPosition + 5);
} else if (event.key === 'ArrowLeft' && playerPosition % 5 !== 0) {
movePlayer(playerPosition - 1);
} else if (event.key === 'ArrowRight' && playerPosition % 5 !== 4) {
movePlayer(playerPosition + 1);
}
if (playerPosition === 4) {
alert('축하합니다! 목표 지점에 도착했습니다!');
}
});
</script>
</body>
</html>5. 간단한 기억력 게임
짝 맞추기 게임으로, 두 개의 같은 카드를 찾는 게임입니다.
기억력 게임
두 개의 같은 숫자를 찾아보세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기억력 게임</title>
<style>
.card {
width: 100px;
height: 100px;
display: inline-block;
background-color: gray;
margin: 10px;
font-size: 24px;
line-height: 100px;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<h1>기억력 게임</h1>
<p>두 개의 같은 숫자를 찾아보세요!</p>
<div id="game-board">
<!-- 카드들이 여기에 추가될 것입니다 -->
</div>
<script>
const numbers = [1, 2, 3, 4, 1, 2, 3, 4];
let firstCard, secondCard;
let lockBoard = false;
function shuffle(array) {
array.sort(() => Math.random() - 0.5);
}
function createCard(number) {
const card = document.createElement('div');
card.classList.add('card');
card.dataset.number = number;
card.addEventListener('click', flipCard);
document.getElementById('game-board').appendChild(card);
}
function flipCard() {
if (lockBoard) return;
this.textContent = this.dataset.number;
if (!firstCard) {
firstCard = this;
} else {
secondCard = this;
checkMatch();
}
}
function check2. 설명
- HTML: 간단한 입력창과 버튼을 통해 사용자가 숫자를 입력할 수 있게 구성.
- CSS: 기본적인 스타일링. 텍스트와 버튼이 잘 보이도록 조정.
- JavaScript: 랜덤으로 1부터 100까지 숫자를 생성하고, 사용자가 입력한 값과 비교해서 피드백을 제공합니다.
이 코드를 그대로 복사해서 블로그의 HTML에 붙여 넣으면 간단한 숫자 맞추기 게임이 작동합니다.
'자유게시판' 카테고리의 다른 글
| 나무위키 문서 편집 가이드: 쉽게 시작하는 방법 (2) | 2024.09.30 |
|---|---|
| 2025년 신작 게임 소개: 기대작들을 한눈에 (1) | 2024.09.16 |
| 블로그에서 사용할 수 있는 HTML 소스 (글꼴 및 스타일링,이미지 삽입 및 설명, 표 (Table), 유튜브 비디오 삽입, 버튼 삽입) (5) | 2024.09.06 |
| 재미삼아 가볍게 해보는 인기투표 (블로그에서 사용할수 있는 간단한 인기 투표 html 소스) (6) | 2024.09.06 |
| 2024년 최신 기술 분야 정리 (인공지능 (AI) 및 기계 학습,양자 컴퓨팅,메타버스,블록체인 및 Web3,에너지 기술,생명공학,로봇공학,5G/ 6G 및 통신 기술) (8) | 2024.08.31 |
댓글