[[분류:프로그래밍 언어]]
==개요==
HTML은 세계 최고의 프로그래밍 언어이다! 개발자 도구로 각종 웹사이트를 들여다보면 그 코드가 HTML로 되어 있는 것을 볼 수 있을 것이다. 프로그래밍을 배우고 싶은 사람은 한번 HTML을 배워보도록 하자.
==HTML 파일을 만드는 법==
Visual Studio Code 같은 전문 프로그래밍 도구도 필요 없을 정도로 쉽다. 'gpt야 만들어줘'를 통해 3분이면 HTML 코드를 얻을 수 있다!
==이것을 이용한 작품==
===대항해 시대([[손현준(교사)|손현준]])===
[[손현준(교사)]]이 자신의 블로그 '번데기의 최후'에 올려 놓은 항해 게임이다. 코드는 아래와 같다.
{{{#!folding 전체 코드
<!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 {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
flex-direction: column;
}
#game-container {
position: relative;
width: 300px;
height: 500px;
background-color: #556b2f;
border: 5px solid #000;
overflow: hidden;
touch-action: none;
}
/* 플레이어 스타일 */
#player {
position: absolute;
width: 40px;
height: 40px;
font-size: 35px;
text-align: center;
line-height: 40px;
bottom: 10px;
transform: rotate(90deg);
transition: transform 0.1s linear;
z-index: 10;
}
/* 장애물 공통 스타일 */
.obstacle {
position: absolute;
box-sizing: border-box;
}
/* 화산 스타일 */
.volcano-spot {
border-radius: 50%;
opacity: 0;
transition: opacity 0.2s linear;
}
.warning {
background-color: sienna;
opacity: 0.6;
box-shadow: 0 0 8px rgba(160, 82, 45, 0.7);
}
.erupted {
background-color: red;
box-shadow: 0 0 15px 8px #ff4500;
transform: scale(1.1);
opacity: 1;
}
/* 검은 벽 장애물 스타일 */
.black-wall {
background-color: #2c2c2c;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
z-index: 5;
}
/* UI 요소 스타일 */
.ui-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 20;
}
#game-title {
position: absolute;
top: 10px;
width: 100%;
text-align: center;
color: white;
font-size: 24px;
font-weight: bold;
text-shadow: 2px 2px 4px #000;
z-index: 15;
}
#info-board {
position: absolute;
top: 5px; right: 5px;
color: white; font-size: 14px;
font-weight: bold;
z-index: 15;
}
#game-over { display: none; }
#start-screen { display: flex; }
.game-button {
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
margin-top: 30px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div id="game-container">
<div id="game-title">🌋 화산 피하기 🚗</div>
<div id="info-board">
거리: <span id="distance-display">0</span>m
</div>
<div id="player">🚗</div>
<div id="start-screen" class="ui-overlay">
<h1>화산 피하기</h1>
<p>화산 폭발과 벽을 피해<br>최대한 멀리 도망가세요!</p>
<button id="start-button" class="game-button">게임 시작</button>
</div>
<div id="game-over" class="ui-overlay">
<h1>💥 게임 오버! 💥</h1>
최종 점수: <span id="final-score">0</span><br>
이동 거리: <span id="final-distance">0</span>m<br>
<button id="restart-button" class="game-button">다시 시작</button>
</div>
</div>
<script>
// DOM 요소
const gameContainer = document.getElementById('game-container');
const player = document.getElementById('player');
const distanceDisplay = document.getElementById('distance-display');
const gameOverScreen = document.getElementById('game-over');
const finalScoreSpan = document.getElementById('final-score');
const finalDistanceSpan = document.getElementById('final-distance');
const restartButton = document.getElementById('restart-button');
const startScreen = document.getElementById('start-screen');
const startButton = document.getElementById('start-button');
// 게임 설정
const CONTAINER_WIDTH = gameContainer.clientWidth;
const CONTAINER_HEIGHT = gameContainer.clientHeight;
const PLAYER_SIZE = 40;
const PLAYER_SPEED = 4;
const BASE_SCROLL_SPEED = 3.0;
// 게임 상태 변수
let isGameRunning = false;
let score = 0, distance = 0;
let playerX, playerY, playerAngle, playerScaleX;
let keysPressed = {};
let lastVolcanoTime = 0, lastWallTime = 0;
let animationFrameId;
function initGame() {
isGameRunning = true;
score = 0; distance = 0;
playerX = CONTAINER_WIDTH / 2 - PLAYER_SIZE / 2;
playerY = CONTAINER_HEIGHT - PLAYER_SIZE - 10;
playerAngle = 90; playerScaleX = 1;
distanceDisplay.textContent = '0';
startScreen.style.display = 'none';
gameOverScreen.style.display = 'none';
document.querySelectorAll('.obstacle').forEach(el => el.remove());
player.style.left = `${playerX}px`;
player.style.top = `${playerY}px`;
player.style.transform = `rotate(90deg) scaleX(1)`;
player.style.visibility = 'visible';
lastVolcanoTime = performance.now();
lastWallTime = performance.now();
if(animationFrameId) cancelAnimationFrame(animationFrameId);
gameLoop();
}
function updatePlayer() {
let dx = 0, dy = 0;
if (keysPressed['ArrowLeft'] || keysPressed['a']) dx -= PLAYER_SPEED;
if (keysPressed['ArrowRight'] || keysPressed['d']) dx += PLAYER_SPEED;
if (keysPressed['ArrowUp'] || keysPressed['w']) dy -= PLAYER_SPEED;
if (keysPressed['ArrowDown'] || keysPressed['s']) dy += PLAYER_SPEED;
let nextX = playerX + dx;
let nextY = playerY + dy;
document.querySelectorAll('.black-wall').forEach(wall => {
const wallRect = wall.getBoundingClientRect();
const containerRect = gameContainer.getBoundingClientRect();
const wallGameRect = {
left: wallRect.left - containerRect.left, top: wallRect.top - containerRect.top,
right: wallRect.right - containerRect.left, bottom: wallRect.bottom - containerRect.top
};
const hPlayerRect = { left: nextX, top: playerY, right: nextX + PLAYER_SIZE, bottom: playerY + PLAYER_SIZE };
if (hPlayerRect.right > wallGameRect.left && hPlayerRect.left < wallGameRect.right &&
hPlayerRect.bottom > wallGameRect.top && hPlayerRect.top < wallGameRect.bottom) {
nextX = playerX;
}
const vPlayerRect = { left: playerX, top: nextY, right: playerX + PLAYER_SIZE, bottom: nextY + PLAYER_SIZE };
if (vPlayerRect.right > wallGameRect.left && vPlayerRect.left < wallGameRect.right &&
vPlayerRect.bottom > wallGameRect.top && vPlayerRect.top < wallGameRect.bottom) {
nextY = playerY;
}
});
playerX = Math.max(0, Math.min(CONTAINER_WIDTH - PLAYER_SIZE, nextX));
playerY = Math.max(0, Math.min(CONTAINER_HEIGHT - PLAYER_SIZE, nextY));
if (dx !== 0 || dy !== 0) {
if (dy < 0) playerAngle = dx === 0 ? 90 : (dx < 0 ? 45 : 135);
else if (dy > 0) playerAngle = dx === 0 ? -90 : (dx < 0 ? -45 : -135);
else playerAngle = 0;
if (dx < 0) playerScaleX = 1; else if (dx > 0) playerScaleX = -1;
}
player.style.left = `${playerX}px`;
player.style.top = `${playerY}px`;
player.style.transform = `rotate(${playerAngle}deg) scaleX(${playerScaleX})`;
}
function isOverlapping(newRect) {
let overlapping = false;
document.querySelectorAll('.obstacle').forEach(obstacle => {
const existingRect = obstacle.getBoundingClientRect();
const containerRect = gameContainer.getBoundingClientRect();
const existingGameRect = {
left: existingRect.left - containerRect.left, top: existingRect.top - containerRect.top,
right: existingRect.right - containerRect.left, bottom: existingRect.bottom - containerRect.top
};
const padding = 10;
if (newRect.right + padding > existingGameRect.left && newRect.left - padding < existingGameRect.right &&
newRect.bottom + padding > existingGameRect.top && newRect.top - padding < existingGameRect.bottom) {
overlapping = true;
}
});
return overlapping;
}
function createVolcano(timestamp, difficultyLevel) {
const interval = Math.max(500, 1600 - difficultyLevel * 150);
if (timestamp - lastVolcanoTime < interval) return;
lastVolcanoTime = timestamp;
let newRect, w, h, x, y;
for (let i = 0; i < 10; i++) {
const minSize = Math.min(50, 30 + difficultyLevel * 4);
const maxSize = Math.min(90, 60 + difficultyLevel * 6);
const size = Math.random() * (maxSize - minSize) + minSize;
w = size; h = size;
if (Math.random() < 0.5) h = Math.random() * (maxSize - minSize) + minSize;
x = Math.random() * (CONTAINER_WIDTH - w);
y = -h;
newRect = { left: x, top: y, right: x + w, bottom: y + h };
if (!isOverlapping(newRect)) break;
if (i === 9) return;
}
const volcano = document.createElement('div');
volcano.className = 'obstacle volcano-spot';
volcano.style.width = `${w}px`; volcano.style.height = `${h}px`;
volcano.style.left = `${x}px`; volcano.style.top = `${y}px`;
gameContainer.appendChild(volcano);
setTimeout(() => volcano.classList.add('warning'), 600);
setTimeout(() => {
volcano.classList.remove('warning');
volcano.classList.add('erupted');
}, 800);
setTimeout(() => volcano.remove(), 3000);
}
function createBlackWall(timestamp, difficultyLevel) {
const interval = Math.max(1200, 2800 - difficultyLevel * 200);
if (timestamp - lastWallTime < interval) return;
lastWallTime = timestamp;
let newRect, width, angle, x, y;
for (let i = 0; i < 10; i++) {
const minWidth = Math.min(PLAYER_SIZE * 1.5, PLAYER_SIZE + difficultyLevel * 5);
const maxWidth = Math.min(PLAYER_SIZE * 2.5, PLAYER_SIZE * 2 + difficultyLevel * 8);
const WALL_HEIGHT = 20;
width = Math.random() * (maxWidth - minWidth) + minWidth;
angle = Math.random() * 180 - 90;
x = Math.random() * (CONTAINER_WIDTH - width);
y = -WALL_HEIGHT;
newRect = { left: x, top: y, right: x + width, bottom: y + WALL_HEIGHT };
if (!isOverlapping(newRect)) break;
if (i === 9) return;
}
const wall = document.createElement('div');
wall.className = 'obstacle black-wall';
wall.style.width = `${width}px`; wall.style.height = `20px`;
wall.style.left = `${x}px`; wall.style.top = `${y}px`;
wall.style.transform = `rotate(${angle}deg)`;
gameContainer.appendChild(wall);
setTimeout(() => wall.remove(), 5000);
}
function updateObstacles(currentScrollSpeed) {
document.querySelectorAll('.obstacle').forEach(obstacle => {
let top = parseFloat(obstacle.style.top) || 0;
obstacle.style.top = `${top + currentScrollSpeed}px`;
if (obstacle.classList.contains('erupted')) {
checkVolcanoCollision(obstacle);
}
if (obstacle.classList.contains('black-wall')) {
const playerRect = { left: playerX, top: playerY, right: playerX + PLAYER_SIZE, bottom: playerY + PLAYER_SIZE };
const wallRect = obstacle.getBoundingClientRect();
const containerRect = gameContainer.getBoundingClientRect();
const wallGameRect = {
left: wallRect.left - containerRect.left, top: wallRect.top - containerRect.top,
right: wallRect.right - containerRect.left, bottom: wallRect.bottom - containerRect.top
};
if (playerRect.right > wallGameRect.left && playerRect.left < wallGameRect.right &&
playerRect.bottom > wallGameRect.top && playerRect.top < wallGameRect.bottom) {
// ⭐ [수정됨] 벽이 플레이어를 밀어낼 때, 즉시 화면에 반영
playerY = wallGameRect.bottom;
player.style.top = `${playerY}px`;
}
}
});
}
function checkVolcanoCollision(volcano) {
if (!isGameRunning) return;
const playerRect = player.getBoundingClientRect();
const volcanoRect = volcano.getBoundingClientRect();
if (playerRect.right > volcanoRect.left && playerRect.left < volcanoRect.right &&
playerRect.bottom > volcanoRect.top && playerRect.top < volcanoRect.bottom) {
endGame();
}
}
function endGame() {
if (!isGameRunning) return;
isGameRunning = false;
cancelAnimationFrame(animationFrameId);
player.style.visibility = 'hidden';
finalScoreSpan.textContent = Math.floor(score);
finalDistanceSpan.textContent = Math.floor(distance);
gameOverScreen.style.display = 'flex';
}
function gameLoop(timestamp) {
if (!isGameRunning) return;
const difficultyLevel = Math.floor(distance / 200);
const currentScrollSpeed = BASE_SCROLL_SPEED + difficultyLevel * 0.25;
updatePlayer();
createVolcano(timestamp, difficultyLevel);
createBlackWall(timestamp, difficultyLevel);
updateObstacles(currentScrollSpeed);
score += currentScrollSpeed * 0.5;
distance += currentScrollSpeed * 0.1;
distanceDisplay.textContent = `${Math.floor(distance)}`;
if (playerY >= CONTAINER_HEIGHT - PLAYER_SIZE) {
endGame();
}
animationFrameId = requestAnimationFrame(gameLoop);
}
// 이벤트 리스너
document.addEventListener('keydown', (e) => { keysPressed[e.key] = true; });
document.addEventListener('keyup', (e) => { keysPressed[e.key] = false; });
startButton.addEventListener('click', initGame);
restartButton.addEventListener('click', initGame);
</script>
</body>
</html>
}}}
