<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>RPS Neon</title>
<style>
*{box-sizing:border-box}
body{
margin:0;min-height:100vh;padding:20px 14px;
background:radial-gradient(ellipse at top,#20234a,#080b15 75%);
color:white;font-family:Arial,sans-serif;
display:flex;justify-content:center;align-items:center
}
.app{width:100%;max-width:430px;text-align:center}
h1{font-size:29px;margin:0 0 7px}
h1 span{color:#45eaff;text-shadow:0 0 14px #45eaff}
.sub{color:#929fbd;font-size:13px;margin-bottom:24px}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:18px}
button{font:inherit;cursor:pointer;touch-action:manipulation}
.mode{padding:12px 4px;border-radius:12px;border:1px solid #303d59;color:#aebbd5;background:#11192a;font-size:13px}
.mode.active{border-color:#45eaff;color:#45eaff;background:#14283b}
.panel{padding:17px 12px;border:1px solid #303d59;border-radius:16px;background:#111827;margin-bottom:15px}
#status{font-size:16px;line-height:1.5;font-weight:bold;min-height:25px}
#hint{font-size:12px;color:#9caac3;margin-top:7px;line-height:1.5}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:15px 0}
.choice{border:1px solid #303d59;border-radius:14px;background:#151f32;color:white;padding:15px 2px;font-size:36px}
.choice:active{background:#23344e}
.choice span{display:block;font-size:12px;margin-top:8px;color:#bdc9de}
.choice:disabled{opacity:.45;cursor:default}
.reveal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:15px}
.person{padding:14px 5px;background:#111827;border:1px solid #303d59;border-radius:14px}
.symbol{font-size:38px;margin:8px}
.name{font-size:12px;color:#9eacc5}
.buttons{display:flex;gap:9px;margin-top:15px}
.action{flex:1;padding:13px 4px;border:0;border-radius:12px;font-weight:bold}
.primary{background:#45eaff;color:#07111b}
.secondary{background:#222d43;color:white;border:1px solid #394763}
button:focus-visible{outline:2px solid white;outline-offset:3px}
.hidden{display:none!important}
</style>
</head>
<body>
<main class="app">
<h1>✊ ROCK <span>RPS</span> ✌️</h1>
<div class="sub">ROCK · PAPER · SCISSORS NEON</div>
<div class="modes">
<button class="mode active" data-mode="bot">🤖 С ботом</button>
<button class="mode" data-mode="two">👥 Вдвоём</button>
<button class="mode" data-mode="three">👥 На троих</button>
</div>
<div class="panel">
<div id="status" aria-live="polite">Выбери свой ход!</div>
<div id="hint">Бот уже зафиксировал свой выбор тайно.</div>
</div>
<div class="choices" id="choices">
<button class="choice" data-pick="rock">✊<span>Камень</span></button>
<button class="choice" data-pick="paper">✋<span>Бумага</span></button>
<button class="choice" data-pick="scissors">✌️<span>Ножницы</span></button>
</div>
<div id="reveal" class="reveal hidden"></div>
<div class="panel">
<div style="color:#9eacc5;font-size:12px">ПОБЕДЫ В ТЕКУЩЕМ РЕЖИМЕ</div>
<div id="scores" style="display:flex;justify-content:space-around;gap:5px;margin-top:12px"></div>
</div>
<div class="buttons">
<button class="action primary" id="next">↻ Новая партия</button>
<button class="action secondary" id="reset">Сбросить счёт</button>
</div>
</main>
<script>
const $=id=>document.getElementById(id);
const names={rock:'Камень',paper:'Бумага',scissors:'Ножницы'};
const icons={rock:'✊',paper:'✋',scissors:'✌️'};
const beats={rock:'scissors',paper:'rock',scissors:'paper'};
const modes=[...document.querySelectorAll('.mode')];
const choiceButtons=[...document.querySelectorAll('.choice')];
let mode='bot',picks=[],round=0,phase='pick';
let botPick='',timer=null;
const scores={
bot:[0,0,0],
two:[0,0,0],
three:[0,0,0]
};
function randomPick(){
return ['rock','paper','scissors'][Math.floor(Math.random()*3)];
}
function setStatus(a,b=''){
$('status').textContent=a;
$('hint').textContent=b;
}
function setChoices(enabled){
choiceButtons.forEach(b=>b.disabled=!enabled);
}
function newRound(){
clearTimeout(timer);
picks=[];round=0;phase='pick';
botPick=mode==='bot'?randomPick():'';
$('reveal').classList.add('hidden');
$('reveal').innerHTML='';
$('choices').classList.remove('hidden');
setChoices(true);
$('next').textContent='↻ Новая партия';
setStatus(mode==='bot'?'Твой ход! ✨':'Игрок 1, выбери ход!',
mode==='bot'?'Выбор бота уже зафиксирован. Он не изменится.':
'После выбора ход будет скрыт.');
drawScores();
}
function drawScores(){
const labels=mode==='bot'?['Ты','Бот','Ничьи']:
mode==='two'?['Игрок 1','Игрок 2','Ничьи']:
['Игрок 1','Игрок 2','Игрок 3'];
$('scores').innerHTML=labels.map((label,i)=>
`<div style="flex:1"><div style="font-size:12px;color:#aab8d0">${label}</div><b style="font-size:23px;color:${i===0?'#45eaff':'#ff69c8'}">${scores[mode][i]}</b></div>`
).join('');
}
function result(a,b){
if(a===b)return 0;
return beats[a]===b?1:-1;
}
function revealPlayers(){
$('choices').classList.add('hidden');
$('reveal').classList.remove('hidden');
$('reveal').innerHTML=picks.map((p,i)=>
`<div class="person"><div class="name">${mode==='bot'?(i===0?'Ты':'Бот'):'Игрок '+(i+1)}</div><div class="symbol">${icons[p]}</div><div>${names[p]}</div></div>`
).join('');
}
function finishRound(){
phase='done';
revealPlayers();
let winners=[];
if(mode==='bot'){
let r=result(picks[0],picks[1]);
if(r===0){
scores.bot[2]++;
setStatus('🤝 Ничья!','Оба выбрали одинаково.');
}else{
let w=r===1?0:1;
scores.bot[w]++;
setStatus(w===0?'🎉 Ты победил!':'🤖 Бот победил!','Партия завершена.');
}
}else{
let types=new Set(picks);
if(types.size===1||types.size===3){
scores[mode][2]++;
setStatus(types.size===1?'🤝 Все выбрали одинаково!':'🔄 Круговая ничья!',
types.size===3?'Все три символа представлены. Получилась круговая ничья.':'Никто не победил.');
}else{
const winnerType=[...types].find(p=>
beats[p]===[...types].find(q=>q!==p));
picks.forEach((p,i)=>{if(p===winnerType)winners.push(i)});
winners.forEach(i=>scores[mode][i]++);
setStatus('🏆 Победитель: '+winners.map(i=>'Игрок '+(i+1)).join(', '),
'Победившие игроки получили по одному очку.');
}
}
drawScores();
$('next').textContent='↻ Следующая партия';
}
function startPass(player){
phase='pick';
$('choices').classList.remove('hidden');
$('reveal').classList.add('hidden');
$('reveal').innerHTML='';
setChoices(true);
setStatus('Игрок '+(player+1)+', твой ход!',
'Выбери камень, бумагу или ножницы.');
}
function choose(pick){
if(phase!=='pick')return;
if(mode==='bot'){
picks=[pick,botPick];
finishRound();
return;
}
picks.push(pick);
round++;
if(round<(mode==='three'?3:2)){
phase='pass';
$('choices').classList.add('hidden');
setStatus('📱 Передайте устройство!',
'Игрок '+(round)+' отойдите от экрана. Следующий игрок выбирает через 3 секунды.');
timer=setTimeout(()=>startPass(round),3000);
}else finishRound();
}
choiceButtons.forEach(b=>b.addEventListener('click',()=>choose(b.dataset.pick)));
modes.forEach(b=>b.addEventListener('click',()=>{
clearTimeout(timer);
mode=b.dataset.mode;
modes.forEach(x=>x.classList.toggle('active',x===b));
newRound();
}));
$('next').addEventListener('click',newRound);
$('reset').addEventListener('click',()=>{
clearTimeout(timer);
scores[mode]=[0,0,0];
newRound();
});
newRound();
</script>
</body>
</html>