kiosk-wars/index.html at main · codetsar/kiosk-wars · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kiosk Wars - Битва за Территорию</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="game-container">
        <header class="game-header">
            <h1>Kiosk Wars</h1>
            <p>Битва за территорию киосков</p>
        </header>

        <div class="game-wrapper">
            <canvas id="gameCanvas" width="800" height="800"></canvas>

            <div class="game-info-panel">
                <div class="status-panel">
                    <div id="turnInfo" class="info-section">
                        <h3>Статус Игры</h3>
                        <div id="turnText">Ход: 1 | Активный: Игрок 1 | Фаза: Планирование</div>
                        <div id="actionsText">Действий осталось: 3</div>
                    </div>

                    <div id="playerInfo" class="info-section">
                        <h3>Игроки</h3>
                        <div class="player-stats">
                            <div class="player player1">
                                <span class="color-indicator blue"></span>
                                <span>Игрок 1: <span id="player1Money">100.0$</span></span>
                                <span>Территорий: <span id="player1Territory">0</span></span>
                            </div>
                            <div class="player player2">
                                <span class="color-indicator red"></span>
                                <span>AI Бот: <span id="player2Money">100.0$</span></span>
                                <span>Территорий: <span id="player2Territory">0</span></span>
                            </div>
                        </div>
                    </div>

                    <div id="gameGoal" class="info-section">
                        <h3>Цель</h3>
                        <p>Захватите 70% территории!</p>
                    </div>

                    <div id="winnerMessage" class="info-section winner-message" style="display: none;">
                        <h3>Победа!</h3>
                        <p id="winnerText"></p>
                        <button id="restartButton" class="restart-btn">Играть снова</button>
                    </div>
                </div>

                <div class="controls-panel">
                    <h3>Управление</h3>
                    <div class="control-instructions">
                        <p><strong>ЛКМ:</strong> Построить киоск на пустой клетке</p>
                        <p><strong>Пробел:</strong> Завершить ход</p>
                        <p><strong>R:</strong> Перезапустить игру</p>
                    </div>

                    <div class="action-panel">
                        <h4>Действия</h4>
                        <div class="cost-info">
                            <p>Стоимость киоска: 50$</p>
                            <p>Действий за ход: 3</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="game-instructions">
            <h3>Как играть:</h3>
            <ul>
                <li>Цель игры - захватить 70% территории</li>
                <li>У вас есть 3 действия за ход</li>
                <li>Кликайте на пустые клетки для строительства киосков</li>
                <li>Киоски дают влияние на прилегающую территорию</li>
                <li>Игра заканчивается при захвате 70% территории</li>
            </ul>
        </div>
    </div>

    <script src="game.js"></script>
</body>
</html>