[hideprofile][html]
<div class="svoya-game" id="svoyaGame">
<div class="svoya-head">
<div>
<div class="svoya-title">Своя игра</div>
<div class="svoya-rules">
Выбирайте вопросы сами. Верный ответ прибавляет номинал к банку, неверный — списывает.
После открытия вопроса у вас 5 секунд, чтобы выбрать «Ответить» или «Пас».
</div>
</div>
<div class="svoya-bank">Банк: <span id="svoyaScore">0</span></div>
</div>
<div class="svoya-board">
<div class="svoya-cat">Кино</div>
<div class="svoya-cat">Сериалы</div>
<div class="svoya-cat">Мультфильмы</div>
<button class="svoya-cell" data-cat="0" data-row="0">100</button>
<button class="svoya-cell" data-cat="1" data-row="0">100</button>
<button class="svoya-cell" data-cat="2" data-row="0">100</button>
<button class="svoya-cell" data-cat="0" data-row="1">300</button>
<button class="svoya-cell" data-cat="1" data-row="1">300</button>
<button class="svoya-cell" data-cat="2" data-row="1">300</button>
<button class="svoya-cell" data-cat="0" data-row="2">500</button>
<button class="svoya-cell" data-cat="1" data-row="2">500</button>
<button class="svoya-cell" data-cat="2" data-row="2">500</button>
</div>
<div class="svoya-actions">
<button class="svoya-main-btn" id="svoyaFinish">Завершить игру</button>
<button class="svoya-test-btn" id="svoyaReset">Сбросить тестовую попытку</button>
</div>
<div class="svoya-result" id="svoyaResult"></div>
</div>
<div class="svoya-modal" id="svoyaModal">
<div class="svoya-card">
<div class="svoya-meta">
<span id="svoyaMeta"></span>
<span id="svoyaTimer"></span>
</div>
<div class="svoya-question" id="svoyaQuestion"></div>
<div class="svoya-decision" id="svoyaDecision">
<button class="svoya-answer-btn" id="svoyaAnswerBtn">Ответить</button>
<button class="svoya-pass-btn" id="svoyaPassBtn">Пас</button>
</div>
<div class="svoya-answer-box" id="svoyaAnswerBox">
<input id="svoyaAnswerInput" type="text" autocomplete="off" placeholder="Введите ответ">
<button class="svoya-check-btn" id="svoyaCheckBtn">Проверить</button>
</div>
<div class="svoya-feedback" id="svoyaFeedback"></div>
</div>
</div>
<style>
.svoya-game{
--sv-bg:#111522;
--sv-panel:#171c2d;
--sv-panel2:#222943;
--sv-text:#f4f6fb;
--sv-muted:#aab2c8;
--sv-accent:#d8bd68;
--sv-line:#313a5a;
--sv-good:#78dca8;
--sv-bad:#ff7f88;
max-width:980px;
margin:20px auto;
padding:24px;
border-radius:18px;
background:var(--sv-bg);
color:var(--sv-text);
font-family:Arial,Helvetica,sans-serif;
}
.svoya-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
flex-wrap:wrap;
}
.svoya-title{
font-size:34px;
font-weight:800;
margin-bottom:8px;
}
.svoya-rules{
max-width:700px;
color:var(--sv-muted);
line-height:1.55;
}
.svoya-bank{
padding:12px 16px;
background:var(--sv-panel);
border:1px solid var(--sv-line);
border-radius:14px;
font-size:20px;
font-weight:700;
}
.svoya-board{
margin-top:24px;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
}
.svoya-cat{
padding:12px 8px;
text-align:center;
background:var(--sv-panel);
border:1px solid var(--sv-line);
border-radius:12px;
font-weight:700;
}
.svoya-cell{
min-height:78px;
border:1px solid var(--sv-line);
border-radius:12px;
background:var(--sv-panel2);
color:var(--sv-accent);
font-size:26px;
font-weight:800;
cursor:pointer;
}
.svoya-cell:hover:not(:disabled){
filter:brightness(1.08);
}
.svoya-cell:disabled{
opacity:.28;
cursor:default;
}
.svoya-actions{
display:flex;
justify-content:flex-end;
gap:10px;
flex-wrap:wrap;
margin-top:20px;
}
.svoya-main-btn,
.svoya-test-btn,
.svoya-answer-btn,
.svoya-pass-btn,
.svoya-check-btn{
border:0;
border-radius:10px;
padding:11px 16px;
font-weight:700;
cursor:pointer;
}
.svoya-main-btn,
.svoya-answer-btn{
background:var(--sv-accent);
color:#171717;
}
.svoya-test-btn,
.svoya-pass-btn{
background:#303851;
color:#fff;
}
.svoya-check-btn{
margin-top:10px;
background:#fff;
color:#111;
}
.svoya-result{
display:none;
margin-top:20px;
padding:16px;
background:var(--sv-panel);
border:1px solid var(--sv-line);
border-radius:12px;
line-height:1.6;
}
.svoya-result.show{display:block;}
.svoya-modal{
position:fixed;
inset:0;
display:none;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(0,0,0,.78);
z-index:99999;
}
.svoya-modal.show{display:flex;}
.svoya-card{
width:min(650px,100%);
padding:22px;
background:#171c2d;
color:#f4f6fb;
border:1px solid #313a5a;
border-radius:18px;
box-shadow:0 20px 70px rgba(0,0,0,.45);
font-family:Arial,Helvetica,sans-serif;
}
.svoya-meta{
display:flex;
justify-content:space-between;
gap:15px;
color:#d8bd68;
font-weight:800;
}
.svoya-question{
margin:18px 0;
font-size:22px;
line-height:1.4;
}
.svoya-decision{
display:flex;
gap:10px;
}
.svoya-answer-box{
display:none;
margin-top:15px;
}
.svoya-answer-box.show{display:block;}
.svoya-answer-box input{
width:100%;
box-sizing:border-box;
padding:12px;
border-radius:10px;
border:1px solid #313a5a;
background:#0f1320;
color:#fff;
font-size:16px;
}
.svoya-feedback{
margin-top:14px;
font-weight:700;
}
.svoya-good{color:#78dca8;}
.svoya-bad{color:#ff7f88;}
@media(max-width:600px){
.svoya-game{padding:15px;}
.svoya-title{font-size:27px;}
.svoya-cat{font-size:12px;}
.svoya-cell{min-height:62px;font-size:21px;}
.svoya-question{font-size:19px;}
}
</style>
<script>
(function(){
const root = document.getElementById('svoyaGame');
if(!root) return;
const DATA = [
{
category:'Кино',
items:[
{
value:100,
q:'Какой фрукт или ягода стали названием престижной антипремии за худшие фильмы?',
answers:['малина','золотая малина']
},
{
value:300,
q:'Как зовут гигантскую гориллу, которая взбиралась на Эмпайр-стейт-билдинг?',
answers:['кинг конг','кинг-конг','king kong']
},
{
value:500,
q:'В каком фильме главные герои передвигались на машине времени DeLorean?',
answers:['назад в будущее','back to the future']
}
]
},
{
category:'Сериалы',
items:[
{
value:100,
q:'В каком сериале шестеро друзей постоянно собирались в кофейне Central Perk?',
answers:['друзья','friends']
},
{
value:300,
q:'Какая девочка из семейки Аддамс станцевала вирусный танец на школьном балу в сериале 2022 года?',
answers:['уэнсдэй','уэнсдей','уэнздей','wednesday']
},
{
value:500,
q:'За какой железный трон боролись правители в известном фэнтези-сериале от HBO?',
answers:['железный трон','за железный трон','iron throne']
}
]
},
{
category:'Мультфильмы',
items:[
{
value:100,
q:'Какой деревянный мальчик мечтал стать настоящим человеком, а его нос рос от лжи?',
answers:['пиноккио','pinocchio']
},
{
value:300,
q:'Как зовут зелёного огра, который жил на болоте и дружил с говорящим Ослом?',
answers:['шрек','shrek']
},
{
value:500,
q:'Какой персонаж-мышонок является главным символом и талисманом Disney?',
answers:['микки маус','микки','mickey mouse']
}
]
}
];
const STORAGE = 'gemini_svoya_game_test_v1';
let state = {
score:0,
used:{},
correct:0,
wrong:0,
passed:0,
finished:false
};
let current = null;
let timerId = null;
let seconds = 5;
const scoreEl = document.getElementById('svoyaScore');
const modal = document.getElementById('svoyaModal');
const meta = document.getElementById('svoyaMeta');
const timer = document.getElementById('svoyaTimer');
const question = document.getElementById('svoyaQuestion');
const decision = document.getElementById('svoyaDecision');
const answerBox = document.getElementById('svoyaAnswerBox');
const input = document.getElementById('svoyaAnswerInput');
const feedback = document.getElementById('svoyaFeedback');
const result = document.getElementById('svoyaResult');
const finishBtn = document.getElementById('svoyaFinish');
function normalize(s){
return String(s || '')
.toLowerCase()
.trim()
.replace(/ё/g,'е')
.replace(/[«»"'.,!?():;]/g,'')
.replace(/[-–—]/g,' ')
.replace(/\s+/g,' ');
}
function save(){
try{
localStorage.setItem(STORAGE, JSON.stringify(state));
}catch(e){}
}
function load(){
try{
const raw = localStorage.getItem(STORAGE);
if(raw) state = JSON.parse(raw);
}catch(e){}
}
function updateUI(){
scoreEl.textContent = (state.score > 0 ? '+' : '') + state.score;
document.querySelectorAll('#svoyaGame .svoya-cell').forEach(function(btn){
const key = btn.dataset.cat + '-' + btn.dataset.row;
btn.disabled = !!state.used[key] || state.finished;
if(state.used[key]) btn.textContent = '—';
});
if(state.finished){
finishBtn.disabled = true;
finishBtn.textContent = 'Игра завершена';
showResult();
}
}
function openQuestion(cat,row){
const key = cat + '-' + row;
if(state.used[key] || state.finished) return;
const item = DATA[cat].items[row];
current = {
cat:cat,
row:row,
key:key,
item:item,
category:DATA[cat].category
};
state.used[key] = true;
save();
updateUI();
meta.textContent = current.category + ' · ' + current.item.value;
question.textContent = current.item.q;
feedback.textContent = '';
feedback.className = 'svoya-feedback';
input.value = '';
answerBox.classList.remove('show');
decision.style.display = 'flex';
modal.classList.add('show');
seconds = 5;
updateTimer();
clearInterval(timerId);
timerId = setInterval(function(){
seconds--;
updateTimer();
if(seconds <= 0){
clearInterval(timerId);
passQuestion(true);
}
},1000);
}
function updateTimer(){
timer.textContent = 'Решение: ' + seconds + ' сек.';
}
function chooseAnswer(){
clearInterval(timerId);
timer.textContent = 'Ответ выбран';
decision.style.display = 'none';
answerBox.classList.add('show');
setTimeout(function(){ input.focus(); },50);
}
function passQuestion(auto){
clearInterval(timerId);
state.passed++;
save();
decision.style.display = 'none';
answerBox.classList.remove('show');
feedback.textContent = auto
? 'Время вышло — вопрос пропущен без штрафа.'
: 'Пас — без штрафа.';
setTimeout(closeModal,900);
}
function submitAnswer(){
const given = normalize(input.value);
if(!given || !current) return;
const accepted = current.item.answers.map(normalize);
const ok = accepted.indexOf(given) !== -1;
answerBox.classList.remove('show');
if(ok){
state.score += current.item.value;
state.correct++;
feedback.className = 'svoya-feedback svoya-good';
feedback.textContent = 'Верно! +' + current.item.value;
}else{
state.score -= current.item.value;
state.wrong++;
feedback.className = 'svoya-feedback svoya-bad';
feedback.textContent = 'Неверно. −' + current.item.value +
'. Правильный ответ: ' + current.item.answers[0];
}
save();
updateUI();
setTimeout(closeModal,1200);
}
function closeModal(){
modal.classList.remove('show');
current = null;
}
function finishGame(){
clearInterval(timerId);
state.finished = true;
save();
closeModal();
updateUI();
}
function showResult(){
result.classList.add('show');
result.innerHTML =
'<b>Итог игры: ' + (state.score > 0 ? '+' : '') + state.score + '</b><br>' +
'Правильных: ' + state.correct + '<br>' +
'Ошибок: ' + state.wrong + '<br>' +
'Пропущено: ' + state.passed;
}
function resetGame(){
clearInterval(timerId);
try{
localStorage.removeItem(STORAGE);
}catch(e){}
state = {
score:0,
used:{},
correct:0,
wrong:0,
passed:0,
finished:false
};
current = null;
modal.classList.remove('show');
result.classList.remove('show');
result.innerHTML = '';
finishBtn.disabled = false;
finishBtn.textContent = 'Завершить игру';
document.querySelectorAll('#svoyaGame .svoya-cell').forEach(function(btn){
const cat = Number(btn.dataset.cat);
const row = Number(btn.dataset.row);
btn.textContent = DATA[cat].items[row].value;
btn.disabled = false;
});
save();
updateUI();
}
document.querySelectorAll('#svoyaGame .svoya-cell').forEach(function(btn){
btn.addEventListener('click',function(){
openQuestion(Number(btn.dataset.cat), Number(btn.dataset.row));
});
});
document.getElementById('svoyaAnswerBtn').addEventListener('click',chooseAnswer);
document.getElementById('svoyaPassBtn').addEventListener('click',function(){
passQuestion(false);
});
document.getElementById('svoyaCheckBtn').addEventListener('click',submitAnswer);
document.getElementById('svoyaFinish').addEventListener('click',finishGame);
document.getElementById('svoyaReset').addEventListener('click',resetGame);
input.addEventListener('keydown',function(e){
if(e.key === 'Enter') submitAnswer();
});
load();
updateUI();
})();
</script>
[/html]
