Spaces:

kolaslab
/

LineBattle

Running

App Files Files Community

kolaslab commited on Jan 30

Commit

ae69bc4

verified ·

1 Parent(s): 683efc9

Update index.html

Browse files

Files changed (1) hide show

index.html +414 -18

index.html CHANGED Viewed

@@ -1,19 +1,415 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!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>