dennii/Connect-5
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Connect-5.git synced 2026-04-17 20:36:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial commit: Connect-5 premium Gomoku game with multiple board sizes

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-13 13:47:41 +11:00
commit 57f350274e
4 changed files with 951 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
index.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Connect-5 - Premium Gomoku Game" />
<title>Connect-5 - Premium Gomoku Game</title>
<link rel="icon" type="image/png" href="Logo.png" />
<link rel="stylesheet" href="styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="container">
<header class="header">
<div class="header-content">
<h1 class="title">
<img src="Logo.png" alt="BCT Logo" class="title-icon" />
Connect-5
</h1>
<p class="subtitle">Premium Gomoku Experience</p>
<a
href="https://www.youtube.com/@beyondcloudtechnology"
target="_blank"
rel="noopener noreferrer"
class="youtube-link"
>
<svg class="youtube-icon" viewBox="0 0 24 24" fill="currentColor">
<path
d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
/>
</svg>
Watch on YouTube @beyondcloudtechnology
</a>
</div>
</header>
<main class="game-container">
<div class="controls-panel">
<div class="size-selector">
<label for="boardSize">Board Size:</label>
<div class="size-buttons">
<button class="size-btn active" data-size="15">15×15</button>
<button class="size-btn" data-size="20">20×20</button>
<button class="size-btn" data-size="25">25×25</button>
</div>
</div>
<div class="game-info">
<div class="turn-indicator">
<span class="label">Current Turn:</span>
<div class="player-display">
<span class="player-marker" id="currentPlayer">X</span>
</div>
</div>
<div class="score-display">
<div class="score-item">
<span class="score-label">Player X</span>
<span class="score-value" id="scoreX">0</span>
</div>
<div class="score-item">
<span class="score-label">Player O</span>
<span class="score-value" id="scoreO">0</span>
</div>
</div>
</div>
<button class="reset-btn" id="resetBtn">
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
/>
</svg>
New Game
</button>
</div>
<div class="board-wrapper">
<div class="board" id="gameBoard"></div>
</div>
<div class="status-message" id="statusMessage">
Player X starts the game
</div>
</main>
<footer class="footer">
<p>© 2025 Beyond Cloud Technology. All rights reserved.</p>
</footer>
</div>
<div class="victory-overlay" id="victoryOverlay">
<div class="victory-content">
<h2 class="victory-title" id="victoryTitle">Player X Wins!</h2>
<p class="victory-subtitle">Five in a row achieved!</p>
<button class="play-again-btn" id="playAgainBtn">Play Again</button>
</div>
</div>
<script src="game.js"></script>
</body>
</html>