Spaces:

kolaslab
/

LineBattle

Running

App Files Files Community

LineBattle / index.html

kolaslab

Update index.html

ae69bc4 verified 4 months ago

raw

history blame

13.1 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<title>라인배틀: AI 싱글플레이 예시</title>
	<style>
	/* 간단한 스타일 */
	body {
	margin: 20px;
	font-family: sans-serif;
	}
	h1 {
	margin-bottom: 10px;
	}
	#infoBar {
	margin-bottom: 10px;
	}
	#gameBoard {
	display: grid;
	grid-template-columns: repeat(10, 40px);
	grid-template-rows: repeat(6, 40px);
	gap: 2px;
	margin-bottom: 10px;
	}
	.cell {
	width: 40px;
	height: 40px;
	border: 1px solid #666;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: #ccc;
	}
	.red {
	background-color: #ffaaaa;
	}
	.blue {
	background-color: #aaaaff;
	}
	#endTurnBtn {
	padding: 6px 12px;
	font-size: 14px;
	cursor: pointer;
	margin-right: 10px;
	}
	</style>
	</head>
	<body>
	<h1>라인배틀: AI 싱글플레이 예시</h1>
	<div id="infoBar">
	<span id="turnInfo"></span> \|
	<span id="selectedInfo"></span>
	</div>
	<div id="gameBoard"></div>
	<button id="endTurnBtn">턴 종료</button>
	<div id="message"></div>

	<script>
	/********************************************************
	* 1. 유닛/게임 파라미터 정의
	********************************************************/
	const UNIT_TYPES = {
	INFANTRY: {
	name: "Infantry",
	hp: 25,
	attack: 3,
	defense: 3,
	move: 2,
	range: 1,
	advantage: "ARCHER", // 보병 > 궁수
	},
	ARCHER: {
	name: "Archer",
	hp: 20,
	attack: 2,
	defense: 2,
	move: 2,
	range: 3,
	advantage: "CAVALRY", // 궁수 > 기병
	},
	CAVALRY: {
	name: "Cavalry",
	hp: 22,
	attack: 4,
	defense: 2,
	move: 3,
	range: 1,
	advantage: "INFANTRY", // 기병 > 보병
	}
	};

	// 간단한 상성 보정(예: 1.5배)
	const ADVANTAGE_MULTIPLIER = 1.5;

	// 맵 크기
	const WIDTH = 10;
	const HEIGHT = 6;

	// 팀 정의
	const RED = "RED";
	const BLUE = "BLUE";

	// 게임 상태
	let units = []; // 전체 유닛 객체를 보관
	let currentTeam = RED; // 현재 턴의 팀
	let selectedUnit = null; // 유저가 선택한 유닛(RED 턴 중)

	/********************************************************
	* 2. 유닛 클래스
	********************************************************/
	class Unit {
	constructor(typeKey, team, x, y) {
	const data = UNIT_TYPES[typeKey];
	this.type = typeKey; // "INFANTRY", "ARCHER", "CAVALRY"
	this.team = team; // "RED" 또는 "BLUE"
	this.hp = data.hp;
	this.attack = data.attack;
	this.defense = data.defense;
	this.move = data.move;
	this.range = data.range;
	this.advantage = data.advantage;
	this.x = x;
	this.y = y;
	this.hasActed = false; // 이 턴 중 이동/공격 여부를 단순 체크(확장 가능)
	}
	get isAlive() {
	return this.hp > 0;
	}
	get displayName() {
	// 예: 'I25' (Infantry, HP 25)
	return this.type[0] + this.hp;
	}
	}

	/********************************************************
	* 3. 초기화: 유닛 배치
	********************************************************/
	function initUnits() {
	units = [];
	// RED - 보병(6), 궁수(3), 기병(3) / 예시로 좌측에 배치
	for (let i = 0; i < 6; i++) {
	units.push(new Unit("INFANTRY", RED, 0, i % HEIGHT));
	}
	for (let i = 0; i < 3; i++) {
	units.push(new Unit("ARCHER", RED, 1, i));
	}
	for (let i = 0; i < 3; i++) {
	units.push(new Unit("CAVALRY", RED, 2, i + 3));
	}
	// BLUE - 보병(6), 궁수(3), 기병(3) / 예시로 우측에 배치
	for (let i = 0; i < 6; i++) {
	units.push(new Unit("INFANTRY", BLUE, WIDTH - 1, i % HEIGHT));
	}
	for (let i = 0; i < 3; i++) {
	units.push(new Unit("ARCHER", BLUE, WIDTH - 2, i));
	}
	for (let i = 0; i < 3; i++) {
	units.push(new Unit("CAVALRY", BLUE, WIDTH - 3, i + 3));
	}
	}

	/********************************************************
	* 4. 화면 렌더링
	********************************************************/
	function renderBoard() {
	const board = document.getElementById("gameBoard");
	board.innerHTML = "";

	// 맵을 HEIGHT x WIDTH 순회하며 셀 생성
	for (let y = 0; y < HEIGHT; y++) {
	for (let x = 0; x < WIDTH; x++) {
	const cellDiv = document.createElement("div");
	cellDiv.classList.add("cell");
	cellDiv.dataset.x = x;
	cellDiv.dataset.y = y;

	// 이 좌표에 유닛이 있는지 확인
	const unitHere = units.find(u => u.isAlive && u.x === x && u.y === y);
	if (unitHere) {
	if (unitHere.team === RED) cellDiv.classList.add("red");
	else cellDiv.classList.add("blue");
	cellDiv.textContent = unitHere.displayName;
	}

	// 클릭 이벤트
	cellDiv.addEventListener("click", () => onCellClick(x, y));
	board.appendChild(cellDiv);
	}
	}

	// 상단 정보
	document.getElementById("turnInfo").textContent = `현재 턴: ${currentTeam}`;
	if (selectedUnit) {
	document.getElementById("selectedInfo").textContent =
	`선택 유닛: ${selectedUnit.type} (HP: ${selectedUnit.hp})`;
	} else {
	document.getElementById("selectedInfo").textContent = `선택 유닛: 없음`;
	}
	}

	/********************************************************
	* 5. 유저 입력 처리
	********************************************************/
	function onCellClick(x, y) {
	if (currentTeam !== RED) {
	// 플레이어 턴이 아닐 때는 클릭 무시
	return;
	}

	// 클릭 지점에 유닛이 있는지 확인
	const clickedUnit = units.find(u => u.isAlive && u.x === x && u.y === y);

	if (!selectedUnit) {
	// 아직 유닛을 선택하지 않은 상태
	if (clickedUnit && clickedUnit.team === RED) {
	// 아군 유닛이면 선택
	if (!clickedUnit.hasActed) {
	selectedUnit = clickedUnit;
	}
	}
	} else {
	// 이미 유닛을 선택한 상태
	if (clickedUnit) {
	// 공격 시도 여부 확인
	if (clickedUnit.team !== RED) {
	// 적 유닛이면 공격 시도
	const dist = getDistance(selectedUnit, clickedUnit);
	if (dist <= selectedUnit.range) {
	// 공격
	attack(selectedUnit, clickedUnit);
	selectedUnit.hasActed = true;
	selectedUnit = null;
	}
	} else {
	// 같은 팀 유닛 클릭 => 선택 유닛 변경(단, 이미 행동 끝난 유닛은 선택 불가)
	if (!clickedUnit.hasActed) {
	selectedUnit = clickedUnit;
	}
	}
	} else {
	// 빈 칸 클릭 -> 이동 시도
	const dist = Math.abs(selectedUnit.x - x) + Math.abs(selectedUnit.y - y);
	// (간단히 맨해튼 거리로만 계산. 대각 이동/장애물은 고려 안 함)
	if (dist <= selectedUnit.move) {
	selectedUnit.x = x;
	selectedUnit.y = y;
	// 이동만 하고 싶으면 여기서 hasActed를 true로 하거나,
	// 이동 후 공격을 허용할지 여부는 규칙에 따라 결정
	// 여기선 이동해도 공격 가능하도록 hasActed = false 유지
	}
	}
	}
	renderBoard();
	}

	// 공격 함수
	function attack(attacker, defender) {
	if (!attacker \|\| !defender) return;
	const baseDamage = Math.max(0, attacker.attack - defender.defense);
	let finalDamage = baseDamage;
	// 상성 체크
	if (attacker.advantage === defender.type) {
	finalDamage = Math.floor(finalDamage * ADVANTAGE_MULTIPLIER);
	}
	defender.hp -= finalDamage;
	// 메세지 출력
	const msg =
	`[${attacker.team} ${attacker.type}]가 [${defender.team} ${defender.type}]를 공격! (데미지 ${finalDamage})`;
	showMessage(msg);
	// 사망 체크
	if (defender.hp <= 0) {
	defender.hp = 0;
	showMessage(`→ [${defender.team} ${defender.type}] 격파!`);
	}
	}

	// 메세지 표시(단순히 누적 출력)
	function showMessage(msg) {
	const messageDiv = document.getElementById("message");
	messageDiv.innerHTML += msg + "<br>";
	messageDiv.scrollTop = messageDiv.scrollHeight;
	}

	/********************************************************
	* 6. 턴 종료 & AI 동작
	********************************************************/
	function endTurn() {
	// 플레이어가 턴 종료 클릭
	if (currentTeam === RED) {
	// 모든 유닛의 hasActed 초기화
	units.forEach(u => {
	if (u.team === RED) {
	u.hasActed = false;
	}
	});
	// 턴 교체
	currentTeam = BLUE;
	selectedUnit = null;
	renderBoard();
	// AI 수행
	setTimeout(() => performAiTurn(), 500);
	}
	}

	// AI 간단 로직
	function performAiTurn() {
	// 1. 행동할 수 있는 BLUE 유닛 목록
	const blueUnits = units.filter(u => u.team === BLUE && u.isAlive);

	// 간단한 순차 처리: 각 유닛별로 제일 가까운 적(RED)을 탐색→이동→공격
	for (const aiUnit of blueUnits) {
	// 가장 가까운 RED 유닛 찾기
	const enemies = units.filter(u => u.team === RED && u.isAlive);
	if (enemies.length === 0) break; // 적이 없으면 종료

	let closestEnemy = null;
	let minDist = 9999;
	for (const e of enemies) {
	const d = getDistance(aiUnit, e);
	if (d < minDist) {
	minDist = d;
	closestEnemy = e;
	}
	}

	if (!closestEnemy) continue;

	// 공격 범위 안에 있으면 공격
	if (minDist <= aiUnit.range) {
	attack(aiUnit, closestEnemy);
	} else {
	// 범위 밖이면 이동(가장 간단히, 가까워지도록 x,y를 1칸 이동)
	const moveStep = getSimpleMoveToward(aiUnit, closestEnemy);
	if (moveStep) {
	aiUnit.x = clamp(aiUnit.x + moveStep.dx, 0, WIDTH - 1);
	aiUnit.y = clamp(aiUnit.y + moveStep.dy, 0, HEIGHT - 1);
	// 이동 후, 사거리 안이면 다시 공격
	const distAfterMove = getDistance(aiUnit, closestEnemy);
	if (distAfterMove <= aiUnit.range) {
	attack(aiUnit, closestEnemy);
	}
	}
	}
	}
	// AI 턴 종료
	currentTeam = RED;
	// AI 유닛 hasActed 초기화
	units.forEach(u => {
	if (u.team === BLUE) {
	u.hasActed = false;
	}
	});
	renderBoard();
	checkWinCondition();
	}

	/********************************************************
	* 7. 보조 함수들
	********************************************************/
	// 두 유닛 간 거리(간단히 맨해튼 거리)
	function getDistance(u1, u2) {
	return Math.abs(u1.x - u2.x) + Math.abs(u1.y - u2.y);
	}

	// AI 이동용: 목표 적 유닛에 조금 더 다가가는 방향 계산
	function getSimpleMoveToward(aiUnit, target) {
	// 이동력만큼 세밀히 계산하기보다는, 1칸만 전진(또는 2칸) 하는 식
	const dx = target.x - aiUnit.x;
	const dy = target.y - aiUnit.y;
	let stepX = 0;
	let stepY = 0;

	if (Math.abs(dx) > Math.abs(dy)) {
	stepX = dx > 0 ? 1 : -1;
	} else {
	stepY = dy > 0 ? 1 : -1;
	}

	// aiUnit.move 만큼 이동할 수도 있지만, 여기선 단순화해서 1칸만 이동
	return { dx: stepX, dy: stepY };
	}

	// 범위 제한 함수
	function clamp(value, min, max) {
	return Math.max(min, Math.min(max, value));
	}

	// 승리 조건 체크
	function checkWinCondition() {
	const redAlive = units.some(u => u.team === RED && u.isAlive);
	const blueAlive = units.some(u => u.team === BLUE && u.isAlive);

	if (!redAlive) {
	showMessage("BLUE 승리!");
	} else if (!blueAlive) {
	showMessage("RED 승리!");
	}
	}

	/********************************************************
	* 8. 초기 실행
	********************************************************/
	// 초기 세팅
	initUnits();
	renderBoard();

	// 턴 종료 버튼
	document.getElementById("endTurnBtn").addEventListener("click", () => {
	endTurn();
	checkWinCondition();
	});
	</script>
	</body>
	</html>