Add multi-player support (2-4 players) and AI bots
This commit is contained in:
sokol
@@ -8,93 +8,139 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="game-container">
|
||||
<!-- Header -->
|
||||
<header class="game-header">
|
||||
<h1>HEXO</h1>
|
||||
<p class="subtitle">DiceWars Clone</p>
|
||||
</header>
|
||||
<!-- Start Screen -->
|
||||
<div id="start-screen" class="start-screen">
|
||||
<div class="start-panel">
|
||||
<h1>HEXO</h1>
|
||||
<p class="subtitle">DiceWars Clone</p>
|
||||
|
||||
<div class="setup-section">
|
||||
<h3>Game Setup</h3>
|
||||
|
||||
<div class="setup-group">
|
||||
<label for="player-count">Total Players:</label>
|
||||
<select id="player-count">
|
||||
<option value="2">2 Players</option>
|
||||
<option value="3" selected>3 Players</option>
|
||||
<option value="4">4 Players</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Game Area -->
|
||||
<div class="game-area">
|
||||
<!-- Left Panel - Player Info -->
|
||||
<aside class="side-panel left-panel">
|
||||
<div class="player-card player-1 active" id="player1-card">
|
||||
<h3>Player 1</h3>
|
||||
<div class="player-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-label">Cells:</span>
|
||||
<span class="stat-value" id="player1-cells">0</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Supply:</span>
|
||||
<span class="stat-value" id="player1-supply">0</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Total Strength:</span>
|
||||
<span class="stat-value" id="player1-strength">0</span>
|
||||
<div class="setup-group">
|
||||
<label>Player Types:</label>
|
||||
<div id="player-types">
|
||||
<div class="player-type-row">
|
||||
<span>Player 1:</span>
|
||||
<select id="player1-type">
|
||||
<option value="human">Human</option>
|
||||
<option value="ai">AI Bot</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="player-type-row">
|
||||
<span>Player 2:</span>
|
||||
<select id="player2-type">
|
||||
<option value="human">Human</option>
|
||||
<option value="ai" selected>AI Bot</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="player-type-row" style="display:none;">
|
||||
<span>Player 3:</span>
|
||||
<select id="player3-type">
|
||||
<option value="human">Human</option>
|
||||
<option value="ai">AI Bot</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="player-type-row" style="display:none;">
|
||||
<span>Player 4:</span>
|
||||
<select id="player4-type">
|
||||
<option value="human">Human</option>
|
||||
<option value="ai">AI Bot</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="game-info">
|
||||
<h3>Game Info</h3>
|
||||
<div class="info-item">
|
||||
<span>Turn:</span>
|
||||
<span id="current-turn">1</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>Phase:</span>
|
||||
<span id="game-phase">Movement</span>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-large" id="start-game-btn">Start Game</button>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" id="end-turn-btn">End Turn</button>
|
||||
<button class="btn btn-secondary" id="new-game-btn">New Game</button>
|
||||
</aside>
|
||||
|
||||
<!-- Canvas -->
|
||||
<main class="canvas-container">
|
||||
<canvas id="game-canvas" width="800" height="800"></canvas>
|
||||
<div class="canvas-overlay" id="message-overlay">
|
||||
<span id="overlay-message"></span>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Right Panel - Actions & Log -->
|
||||
<aside class="side-panel right-panel">
|
||||
<div class="actions-panel">
|
||||
<h3>Actions</h3>
|
||||
<p class="instruction" id="action-instruction">Select a cell to move</p>
|
||||
<button class="btn btn-action" id="cancel-btn" style="width:100%" disabled>Cancel</button>
|
||||
</div>
|
||||
|
||||
<div class="selected-cell-info" id="selected-cell-info" style="display:none;">
|
||||
<h3>Selected Cell</h3>
|
||||
<div class="cell-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-label">Strength:</span>
|
||||
<span class="stat-value" id="cell-strength">0</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Dice:</span>
|
||||
<span class="stat-value" id="cell-dice">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="battle-log">
|
||||
<h3>Battle Log</h3>
|
||||
<div class="log-entries" id="battle-log">
|
||||
<div class="log-entry">Game started...</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="game-footer">
|
||||
<p>Click on your cell with dice, then click adjacent cell to attack</p>
|
||||
</footer>
|
||||
<!-- Game Screen -->
|
||||
<div id="game-screen" class="game-screen" style="display:none;">
|
||||
<!-- Header -->
|
||||
<header class="game-header">
|
||||
<h1>HEXO</h1>
|
||||
<p class="subtitle">DiceWars Clone</p>
|
||||
</header>
|
||||
|
||||
<!-- Game Area -->
|
||||
<div class="game-area">
|
||||
<!-- Left Panel - Player Info -->
|
||||
<aside class="side-panel left-panel">
|
||||
<div id="players-container">
|
||||
<!-- Player cards will be inserted here -->
|
||||
</div>
|
||||
|
||||
<div class="game-info">
|
||||
<h3>Game Info</h3>
|
||||
<div class="info-item">
|
||||
<span>Turn:</span>
|
||||
<span id="current-turn">1</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span>Phase:</span>
|
||||
<span id="game-phase">Movement</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" id="end-turn-btn">End Turn</button>
|
||||
<button class="btn btn-secondary" id="back-menu-btn">Main Menu</button>
|
||||
</aside>
|
||||
|
||||
<!-- Canvas -->
|
||||
<main class="canvas-container">
|
||||
<canvas id="game-canvas" width="800" height="800"></canvas>
|
||||
<div class="canvas-overlay" id="message-overlay">
|
||||
<span id="overlay-message"></span>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Right Panel - Actions & Log -->
|
||||
<aside class="side-panel right-panel">
|
||||
<div class="actions-panel">
|
||||
<h3>Actions</h3>
|
||||
<p class="instruction" id="action-instruction">Select a cell to move</p>
|
||||
<button class="btn btn-action" id="cancel-btn" style="width:100%" disabled>Cancel</button>
|
||||
</div>
|
||||
|
||||
<div class="selected-cell-info" id="selected-cell-info">
|
||||
<h3>Selected Cell</h3>
|
||||
<div class="cell-stats">
|
||||
<div class="stat">
|
||||
<span class="stat-label">Strength:</span>
|
||||
<span class="stat-value" id="cell-strength">-</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat-label">Dice:</span>
|
||||
<span class="stat-value" id="cell-dice">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="battle-log">
|
||||
<h3>Battle Log</h3>
|
||||
<div class="log-entries" id="battle-log">
|
||||
<div class="log-entry">Game started...</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="game-footer">
|
||||
<p>Click on your cell with dice, then click adjacent cell to attack</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="game.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user