Spaces:

kolaslab
/

LineBattle

Running

App Files Files Community

kolaslab commited on Jan 30, 2025

Commit

7243134

verified ·

1 Parent(s): ae69bc4

Update index.html

Browse files

Files changed (1) hide show

index.html +289 -387

index.html CHANGED Viewed

@@ -1,415 +1,317 @@
 <!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>

 <!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 {
+            margin: 0;
+            padding: 20px;
+            background-color: #f0f0f0;
+            font-family: Arial, sans-serif;
+        }
+        #gameContainer {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        #gameCanvas {
+            border: 2px solid #333;
+            box-shadow: 0 0 10px rgba(0,0,0,0.2);
+            background-color: #fff;
+        }
+        #gameInfo {
+            margin-top: 20px;
+            padding: 10px;
+            background-color: #fff;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        .controls {
+            margin-top: 10px;
+            display: flex;
+            gap: 10px;
+        }
+        button {
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+    </style>
 </head>
 <body>
+    <div id="gameContainer">
+        <canvas id="gameCanvas"></canvas>
+        <div id="gameInfo">
+            <div id="turnInfo">현재 턴: 적색군</div>
+            <div id="selectedUnit">선택된 유닛: 없음</div>
+            <div class="controls">
+                <button id="endTurn">턴 종료</button>
+                <button id="resetGame">게임 재시작</button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // 게임 상수
+        const GRID_SIZE = 80;
+        const COLS = 10;
+        const ROWS = 6;
+        // Canvas 설정
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        canvas.width = GRID_SIZE * COLS;
+        canvas.height = GRID_SIZE * ROWS;
+        // 지형 데이터
+        const elevationData = [
+            [1, 1, 2, 2, 2, 2, 1, 1, 1, 1],
+            [1, 2, 2, 3, 3, 2, 2, 1, 1, 1],
+            [1, 2, 3, 3, 2, 2, 2, 2, 1, 1],
+            [1, 2, 2, 2, 2, 2, 3, 2, 2, 1],
+            [1, 1, 2, 2, 2, 3, 2, 2, 1, 1],
+            [1, 1, 1, 2, 2, 2, 2, 1, 1, 1]
+        ];
+        // 유닛 클래스
+        class Unit {
+            constructor(type, team, x, y) {
+                this.type = type;
+                this.team = team;
+                this.x = x;
+                this.y = y;
+                this.hp = this.getInitialHP();
+                this.moved = false;
+                this.attacked = false;
+                // 유닛 타입별 스탯
+                const stats = {
+                    'Infantry': { move: 2, attack: 3, defense: 3, range: 1 },
+                    'Archer': { move: 2, attack: 2, defense: 2, range: 3 },
+                    'Cavalry': { move: 3, attack: 4, defense: 2, range: 1 }
+                };
+                Object.assign(this, stats[type]);
+            }
+            getInitialHP() {
+                const hpValues = {
+                    'Infantry': 25,
+                    'Archer': 20,
+                    'Cavalry': 22
+                };
+                return hpValues[this.type];
+            }
+            draw() {
+                const x = this.x * GRID_SIZE;
+                const y = this.y * GRID_SIZE;
+                // 유닛 기본 모양
+                ctx.fillStyle = this.team === 'red' ? '#ff0000' : '#0000ff';
+                ctx.beginPath();
+                ctx.arc(x + GRID_SIZE/2, y + GRID_SIZE/2, GRID_SIZE/3, 0, Math.PI * 2);
+                ctx.fill();
+                // 유닛 타입 표시
+                ctx.fillStyle = '#ffffff';
+                ctx.font = '14px Arial';
+                ctx.textAlign = 'center';
+                ctx.fillText(this.type[0], x + GRID_SIZE/2, y + GRID_SIZE/2 + 5);
+                // HP 바
+                this.drawHealthBar(x, y);
+            }
+            drawHealthBar(x, y) {
+                const maxHP = this.getInitialHP();
+                const barWidth = GRID_SIZE * 0.8;
+                const barHeight = 5;
+                const barX = x + GRID_SIZE * 0.1;
+                const barY = y + GRID_SIZE * 0.8;
+                // 배경
+                ctx.fillStyle = '#ff0000';
+                ctx.fillRect(barX, barY, barWidth, barHeight);
+                // 현재 체력
+                ctx.fillStyle = '#00ff00';
+                ctx.fillRect(barX, barY, (this.hp / maxHP) * barWidth, barHeight);
+            }
         }
+        // 게임 상태
+        let gameState = {
+            units: [],
+            selectedUnit: null,
+            currentTurn: 'red',
+            turnCount: 1
+        };
+        // 게임 초기화
+        function initGame() {
+            gameState.units = [];
+            gameState.currentTurn = 'red';
+            gameState.turnCount = 1;
+            gameState.selectedUnit = null;
+            // 적색군 유닛 배치
+            for(let i = 0; i < 6; i++) {
+                gameState.units.push(new Unit('Infantry', 'red', 0, i));
+            }
+            for(let i = 0; i < 3; i++) {
+                gameState.units.push(new Unit('Archer', 'red', 1, i*2));
+                gameState.units.push(new Unit('Cavalry', 'red', 2, i*2));
+            }
+            // 청색군 유닛 배치
+            for(let i = 0; i < 6; i++) {
+                gameState.units.push(new Unit('Infantry', 'blue', 9, i));
+            }
+            for(let i = 0; i < 3; i++) {
+                gameState.units.push(new Unit('Archer', 'blue', 8, i*2));
+                gameState.units.push(new Unit('Cavalry', 'blue', 7, i*2));
+            }
         }
+        // 격자 그리기
+        function drawGrid() {
+            ctx.strokeStyle = '#ccc';
+            ctx.lineWidth = 1;
+            for(let x = 0; x <= canvas.width; x += GRID_SIZE) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, canvas.height);
+                ctx.stroke();
             }
+            for(let y = 0; y <= canvas.height; y += GRID_SIZE) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(canvas.width, y);
+                ctx.stroke();
             }
         }
+        // 지형 그리기
+        function drawTerrain() {
+            // 배경
+            ctx.fillStyle = '#e8e8d0';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // 높낮이 표시
+            elevationData.forEach((row, y) => {
+                row.forEach((height, x) => {
+                    ctx.fillStyle = `rgba(0,0,0,${height * 0.1})`;
+                    ctx.fillRect(x * GRID_SIZE, y * GRID_SIZE, GRID_SIZE, GRID_SIZE);
+                });
+            });
+            // 강
+            ctx.strokeStyle = '#4040ff';
+            ctx.lineWidth = 20;
+            ctx.beginPath();
+            ctx.moveTo(0, canvas.height/2);
+            ctx.bezierCurveTo(
+                canvas.width/4, canvas.height/2 - 40,
+                canvas.width*3/4, canvas.height/2 + 40,
+                canvas.width, canvas.height/2
+            );
+            ctx.stroke();
+        }
+        // 게임 화면 갱신
+        function render() {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            drawTerrain();
+            drawGrid();
+            // 유닛 그리기
+            gameState.units.forEach(unit => unit.draw());
+            // 선택된 유닛 하이라이트
+            if(gameState.selectedUnit) {
+                const x = gameState.selectedUnit.x * GRID_SIZE;
+                const y = gameState.selectedUnit.y * GRID_SIZE;
+                ctx.strokeStyle = '#ffff00';
+                ctx.lineWidth = 3;
+                ctx.strokeRect(x, y, GRID_SIZE, GRID_SIZE);
+            }
+            // 턴 정보 업데이트
+            document.getElementById('turnInfo').textContent =
+                `현재 턴: ${gameState.currentTurn === 'red' ? '적색군' : '청색군'} (${gameState.turnCount}턴)`;
+            document.getElementById('selectedUnit').textContent =
+                gameState.selectedUnit ?
+                `선택된 유닛: ${gameState.selectedUnit.type} (HP: ${gameState.selectedUnit.hp})` :
+                '선택된 유닛: 없음';
+        }
+        // 이벤트 리스너
+        canvas.addEventListener('click', handleClick);
+        document.getElementById('endTurn').addEventListener('click', endTurn);
+        document.getElementById('resetGame').addEventListener('click', () => {
+            initGame();
+            render();
         });
+        function handleClick(e) {
+            const rect = canvas.getBoundingClientRect();
+            const x = Math.floor((e.clientX - rect.left) / GRID_SIZE);
+            const y = Math.floor((e.clientY - rect.top) / GRID_SIZE);
+            const clickedUnit = gameState.units.find(unit => unit.x === x && unit.y === y);
+            if(clickedUnit && clickedUnit.team === gameState.currentTurn) {
+                gameState.selectedUnit = clickedUnit;
+            } else if(gameState.selectedUnit) {
+                // 이동 또는 공격 로직
+                moveUnit(gameState.selectedUnit, x, y);
+            }
+            render();
         }
+        function moveUnit(unit, targetX, targetY) {
+            if(!unit.moved && isValidMove(unit, targetX, targetY)) {
+                unit.x = targetX;
+                unit.y = targetY;
+                unit.moved = true;
             }
         }
+        function isValidMove(unit, targetX, targetY) {
+            const dx = Math.abs(targetX - unit.x);
+            const dy = Math.abs(targetY - unit.y);
+            return dx + dy <= unit.move;
+        }
+        function endTurn() {
+            gameState.currentTurn = gameState.currentTurn === 'red' ? 'blue' : 'red';
+            if(gameState.currentTurn === 'red') gameState.turnCount++;
+            // 유닛 상태 초기화
+            gameState.units.forEach(unit => {
+                unit.moved = false;
+                unit.attacked = false;
+            });
+            gameState.selectedUnit = null;
+            render();
+        }
+        // 게임 시작
+        initGame();
+        render();
+    </script>
 </body>
+</html>