170 lines
11 KiB
HTML
170 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||
<title>Гречка: Червяки</title>
|
||
<style>
|
||
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #87CEEB; font-family: sans-serif; }
|
||
#game { position: fixed; inset: 0; }
|
||
#c { width: 100%; height: 100%; display: block; touch-action: none; }
|
||
#hud { position: fixed; top: 0; left: 0; right: 64px; padding: 6px 8px; color: #fff; font-size: 14px;
|
||
text-shadow: 0 1px 3px #000; pointer-events: none; display: flex; gap: 12px; flex-wrap: wrap; }
|
||
#hudWind { font-family: monospace; font-weight: bold; letter-spacing: 1px;
|
||
background: rgba(0,0,0,0.45); border-radius: 6px; padding: 1px 7px; }
|
||
/* оружие справа сверху */
|
||
#wOpen { position: fixed; top: 8px; right: 8px; width: 52px; height: 52px; border-radius: 10px;
|
||
background: rgba(0,0,0,0.55); border: 2px solid #f1c40f; display: flex; align-items: center; justify-content: center; z-index: 5; }
|
||
#wOpen canvas { width: 40px; height: 40px; }
|
||
#wPop { position: fixed; top: 68px; right: 8px; width: 248px; max-height: 60vh; overflow-y: auto;
|
||
background: rgba(20,20,20,0.92); border-radius: 12px; padding: 8px; display: none; z-index: 6; }
|
||
#wPop.on { display: block; }
|
||
.wrow { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; color: #fff; font-size: 14px; }
|
||
.wrow.sel { background: #3d484b; outline: 2px solid #f1c40f; }
|
||
.wrow.empty { opacity: 0.35; }
|
||
.wrow canvas { width: 36px; height: 36px; background: #111; border-radius: 6px; }
|
||
.wrow .ammo { margin-left: auto; color: #f1c40f; }
|
||
/* зум */
|
||
#zoom { position: fixed; right: 8px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
|
||
.zbtn { width: 44px; height: 44px; border-radius: 50%; border: none; font-size: 22px; background: rgba(0,0,0,0.5); color: #fff; }
|
||
/* движение как в оригинале */
|
||
#controls { position: fixed; left: 8px; bottom: 12px; display: none; gap: 10px; z-index: 5; }
|
||
@media (pointer: coarse) { #controls { display: flex; } }
|
||
.btn { width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff;
|
||
font-size: 28px; display: flex; align-items: center; justify-content: center; user-select: none; -webkit-user-select: none; }
|
||
.btn:active { background: rgba(241,196,15,0.6); }
|
||
/* джойстик прицела */
|
||
#stick { position: fixed; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7);
|
||
background: rgba(0,0,0,0.25); display: none; z-index: 5; pointer-events: none; }
|
||
#stickKnob { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: rgba(241,196,15,0.8);
|
||
left: 34px; top: 34px; }
|
||
#banner, #modeOverlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
|
||
background: rgba(0,0,0,0.6); z-index: 10; }
|
||
/* правая колонка: прыжок, над ним огонь */
|
||
#jumpBtn { position: fixed; right: 12px; bottom: 12px; width: 84px; height: 64px; border-radius: 14px;
|
||
border: 3px solid #00a1ff; background: rgba(0,0,0,0.5); color: #fff; font-size: 26px;
|
||
display: block; z-index: 5; user-select: none; -webkit-user-select: none; }
|
||
#jumpBtn:active { background: rgba(0,161,255,0.6); }
|
||
/* кнопка огня */
|
||
#fireBtn { position: fixed; right: 12px; bottom: 84px; width: 84px; height: 84px; border-radius: 50%;
|
||
border: 3px solid #f1c40f; background: rgba(192,57,43,0.85); color: #fff; font-size: 15px; font-weight: bold;
|
||
display: block; z-index: 5; user-select: none; -webkit-user-select: none; }
|
||
#fireBtn:active { background: rgba(241,196,15,0.9); }
|
||
#fuseBtn { position: fixed; right: 12px; bottom: 176px; min-width: 84px; height: 40px; border-radius: 10px;
|
||
border: 2px solid #00a1ff; background: rgba(0,0,0,0.55); color: #fff; font-size: 15px; z-index: 5; display: none; }
|
||
#hint { position: fixed; top: 66px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px;
|
||
background: rgba(0,0,0,0.55); border-radius: 10px; padding: 6px 12px; pointer-events: none; z-index: 4;
|
||
white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
|
||
#modeOverlay { display: flex; }
|
||
#lobby, #invitePop, #pickPop { position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
|
||
background: rgba(0,0,0,0.6); z-index: 11; }
|
||
#lobby .box input { font-size: 18px; padding: 10px; border-radius: 8px; border: 1px solid #ccc; margin: 6px; width: 200px; text-align: center; }
|
||
#roomCode { font-size: 26px; font-weight: bold; letter-spacing: 4px; margin: 8px; }
|
||
#modeRow { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
|
||
#modeRow .big, #dnRow .big { background: #95a5a6; opacity: 0.7; }
|
||
#modeRow .big.on { background: #27ae60; opacity: 1; }
|
||
#dnRow { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
|
||
#dnRow .big.on { background: #2980b9; opacity: 1; }
|
||
#topTable { margin-top: 10px; font-size: 14px; color: #333; }
|
||
#topTable table { margin: 4px auto; border-collapse: collapse; }
|
||
#topTable td { padding: 1px 8px; text-align: left; }
|
||
#netStatus { font-size: 14px; margin: 4px; color: #e67e22; }
|
||
#netStatus.ok { color: #27ae60; }
|
||
#netStatus.bad { color: #c0392b; }
|
||
.ltext { font-size: 13px; color: #555; margin: 6px 0 2px; }
|
||
#specBadge { position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%);
|
||
background: rgba(0,0,0,0.6); color: #ffe14d; font-size: 13px; border-radius: 8px;
|
||
padding: 4px 12px; z-index: 5; pointer-events: none; }
|
||
#rosterList { max-height: 38vh; overflow-y: auto; }
|
||
#micBtn { position: fixed; right: 12px; top: 116px; width: 52px; height: 52px; border-radius: 50%;
|
||
font-size: 24px; background: rgba(0,0,0,0.55); border: 2px solid #fff; z-index: 5; }
|
||
#micBtn.on { background: rgba(46,204,113,0.9); border-color: #2ecc71; }
|
||
#micBtn.err { background: rgba(231,76,60,0.9); }
|
||
#earBtn { position: fixed; right: 12px; top: 116px; width: 52px; height: 52px; border-radius: 50%;
|
||
font-size: 24px; background: rgba(0,0,0,0.55); border: 2px solid #fff; z-index: 5; }
|
||
#earBtn.on { background: rgba(52,152,219,0.9); border-color: #3498db; }
|
||
#speakInd { position: fixed; right: 72px; top: 128px; background: rgba(0,0,0,0.7); color: #2ecc71;
|
||
padding: 4px 10px; border-radius: 8px; font-size: 13px; z-index: 5; pointer-events: none; }
|
||
#roster { position: fixed; left: 8px; top: 64px; z-index: 4; background: rgba(0,0,0,0.55); color: #fff;
|
||
border-radius: 10px; padding: 8px 10px; font-size: 13px; display: none; max-width: 44vw; }
|
||
#roster button { margin-left: 6px; font-size: 14px; }
|
||
.box { background: #fff; border-radius: 12px; padding: 24px 32px; text-align: center; max-width: 86vw; }
|
||
.box .b-text { font-size: 22px; margin-bottom: 16px; }
|
||
.big { font-size: 18px; padding: 12px 24px; border-radius: 10px; border: none; background: #27ae60; color: #fff; margin: 6px; }
|
||
.big.blue { background: #2980b9; }
|
||
#help { position: fixed; left: 8px; top: 44px; color: #fff; font-size: 12px; text-shadow: 0 1px 3px #000;
|
||
pointer-events: none; opacity: 0.85; }
|
||
@media (pointer: coarse) { #help { display: none; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="game"><canvas id="c"></canvas></div>
|
||
<div id="hud"><span id="hudTeams"></span><span id="hudTurn"></span><span id="hudWind"></span></div>
|
||
<div id="specBadge" style="display:none">👀 Ты наблюдатель — болеешь с балкона (⬆️ — прыгать)</div>
|
||
<div id="help" style="display:none"></div>
|
||
<div id="wOpen" title="Оружие"></div>
|
||
<div id="wPop"></div>
|
||
<div id="zoom"><button class="zbtn" id="zIn">+</button><button class="zbtn" id="zOut">−</button></div>
|
||
<div id="controls">
|
||
<div id="left" class="btn">⬅️</div>
|
||
<div id="right" class="btn">➡️</div>
|
||
</div>
|
||
<div id="stick"><div id="stickKnob"></div></div>
|
||
<div id="hint"></div>
|
||
<button id="fuseBtn">⏱3с</button>
|
||
<button id="jumpBtn">⬆️</button>
|
||
<button id="fireBtn">ОГОНЬ</button>
|
||
<button id="micBtn" style="display:none" title="Голосовой чат (выкл)">🎤</button>
|
||
<button id="earBtn" style="display:none" title="Слушать бойцов (выкл)">🔊</button>
|
||
<div id="speakInd" style="display:none"></div>
|
||
<div id="modeOverlay"><div class="box">
|
||
<div class="b-text">🌾 Гречка: Червяки</div>
|
||
<div>Две горы. Между ними — вода.<br>5 на 5. Побеждает команда.</div>
|
||
<div style="margin:10px 0" id="dnRow">
|
||
<button class="big" id="dDay" style="background:#f39c12">☀️ День</button>
|
||
<button class="big" id="dNight" style="background:#34495e">🌙 Ночь</button>
|
||
</div><br>
|
||
<button class="big blue" id="mAi">🤖 С компом</button>
|
||
<button class="big" id="mHot">🎮 Вдвоём</button><br>
|
||
<button class="big" id="mNet" style="background:#8e44ad">🌐 По сети</button>
|
||
</div></div>
|
||
<div id="lobby"><div class="box">
|
||
<div class="b-text">🌐 Игра по сети</div>
|
||
<div id="lobbyForm">
|
||
<div id="netStatus">Подключение…</div>
|
||
<input id="nick" maxlength="20" placeholder="Твоё имя"><br>
|
||
<div class="ltext">Новая игра — код выдадим сами:</div>
|
||
<button class="big" id="bCreate">Создать игру</button><br>
|
||
<div class="ltext">— или войти по коду друга —</div>
|
||
<input id="codeIn" maxlength="5" inputmode="numeric" placeholder="Код: 5 цифр"><br>
|
||
<button class="big blue" id="bJoin">Присоединиться</button>
|
||
<div id="topTable">🏆 Топ-10: загрузка…</div>
|
||
<div id="roomsTable" style="margin-top:8px">👀 Сейчас играют: загрузка…</div>
|
||
</div>
|
||
<div id="lobbyWait" style="display:none">
|
||
<div id="roomCode">Код: …</div>
|
||
<div>Друзья вводят код и появляются в твоём мире.<br>Третий и дальше — зрители на балкончиках.<br>Второй игрок зашёл — бой начинается сам.</div>
|
||
<div id="modeRow"><button class="big on" id="bModeTurns">🚶 По очереди</button><button class="big" id="bModeSim">⚡ Одновременно</button></div>
|
||
<div id="dnRow"><button class="big on" id="bDay">☀️ День</button><button class="big" id="bNight">🌙 Ночь</button></div>
|
||
<div id="lobbyNote" style="display:none">Ждём создателя… Бой начнётся сам, как только оба в комнате.</div>
|
||
<button class="big blue" id="bCopyLink">📋 Ссылка на бой</button><br>
|
||
</div>
|
||
</div></div>
|
||
<div id="roster"><div class="b-text">Комната</div><div id="rosterList"></div></div>
|
||
<div id="invitePop"><div class="box">
|
||
<div class="b-text" id="inviteText">Зовут играть!</div>
|
||
<button class="big" id="bAccept">Играю!</button>
|
||
<button class="big" id="bDecline" style="background:#7f8c8d">Откажусь</button>
|
||
</div></div>
|
||
<div id="pickPop"><div class="box">
|
||
<div class="b-text">🏆 Победа! С кем дальше?</div>
|
||
<div id="pickList"></div>
|
||
<button class="big blue" id="bSame">Ещё раз с тем же</button>
|
||
</div></div>
|
||
<div id="banner"><div class="box"><div class="b-text"></div><button class="big" id="again">Ещё бой</button></div></div>
|
||
|
||
<script src="vendor/socket.io.min.js"></script>
|
||
<script src="worms.js?v=62"></script>
|
||
</body>
|
||
</html>
|