BIPfR/HTML-Game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Обновить clicker.html

Browse Source
This commit is contained in:
KoDer
2026-06-16 15:24:58 +03:00
parent 6e3ed30c96
commit b086c2b2a1
1 changed files with 23 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
clicker.html
+23 -45
View File
@@ -100,18 +100,11 @@
@media (max-width: 768px) { @media (max-width: 768px) {
.game-container { grid-template-columns: 1fr; } .game-container { grid-template-columns: 1fr; }
} }
/* Статус API */
.api-status { .api-status {
position: fixed; position: fixed; top: 10px; left: 10px;
top: 10px; padding: 8px 16px; border-radius: 20px;
left: 10px; font-size: 12px; background: rgba(0, 0, 0, 0.7);
padding: 8px 16px; color: #aaa; z-index: 1000;
border-radius: 20px;
font-size: 12px;
background: rgba(0, 0, 0, 0.7);
color: #aaa;
z-index: 1000;
} }
.api-status.connected { color: #4caf50; } .api-status.connected { color: #4caf50; }
.api-status.error { color: #f44336; } .api-status.error { color: #f44336; }
@@ -119,7 +112,7 @@
</head> </head>
<body> <body>
<div class="api-status" id="apiStatus">⏳ API: ожидание...</div> <div class="api-status" id="apiStatus">⏳ API: ожидание...</div>
<div class="game-container"> <div class="game-container">
<div class="clicker-section"> <div class="clicker-section">
<div class="stats"> <div class="stats">
@@ -139,8 +132,11 @@
<script> <script>
// ═══════════════════════════════════════════════════════════ // ═══════════════════════════════════════════════════════════
// СОСТОЯНИЕ ИГРЫ // КОНФИГУРАЦИЯ
// ═══════════════════════════════════════════════════════════ // ══════════════════════════════════════════════════════════
const MY_SAVE = 'main_save';
const TABLE_NAME = 'game_save';
let gameState = { let gameState = {
score: 0, score: 0,
totalClicks: 0, totalClicks: 0,
@@ -173,10 +169,9 @@
}; };
// ═══════════════════════════════════════════════════════════ // ═══════════════════════════════════════════════════════════
// API КЛИЕНТ (через bridge в родителе) // API КЛИЕНТ
// ═══════════════════════════════════════════════════════════ // ═══════════════════════════════════════════════════════════
let api = null; let api = null;
const TABLE_NAME = 'game_save';
const statusEl = document.getElementById('apiStatus'); const statusEl = document.getElementById('apiStatus');
function updateStatus(text, type = '') { function updateStatus(text, type = '') {
@@ -184,20 +179,17 @@
statusEl.className = 'api-status ' + type; statusEl.className = 'api-status ' + type;
} }
// Ждём готовности API
async function waitForAPI() { async function waitForAPI() {
if (window.gameApi) { if (window.gameApi) {
api = window.gameApi; api = window.gameApi;
updateStatus('✓ API подключён', 'connected'); updateStatus('✓ API подключён', 'connected');
return true; return true;
} }
return new Promise((resolve) => { return new Promise((resolve) => {
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
updateStatus('✗ API недоступен, используем localStorage', 'error'); updateStatus(' API недоступен, используем localStorage', 'error');
resolve(false); resolve(false);
}, 5000); }, 5000);
window.addEventListener('gameApiReady', () => { window.addEventListener('gameApiReady', () => {
clearTimeout(timeout); clearTimeout(timeout);
api = window.gameApi; api = window.gameApi;
@@ -207,14 +199,13 @@
}); });
} }
// ═══════════════════════════════════════════════════════════ // ══════════════════════════════════════════════════════════
// СОХРАНЕНИЕ / ЗАГРУЗКА // СОХРАНЕНИЕ / ЗАГРУЗКА
// ═══════════════════════════════════════════════════════════ // ═══════════════════════════════════════════════════════════
async function loadGame() { async function loadGame() {
// Пытаемся загрузить через API
if (api) { if (api) {
try { try {
const result = await api.selectData(TABLE_NAME, { key: 'game_state' }); const result = await api.selectData(TABLE_NAME, { key: 'game_state' }, MY_SAVE);
if (result.data && result.data.length > 0) { if (result.data && result.data.length > 0) {
const savedState = JSON.parse(result.data[0].value); const savedState = JSON.parse(result.data[0].value);
gameState = { ...gameState, ...savedState }; gameState = { ...gameState, ...savedState };
@@ -229,8 +220,6 @@
console.warn('API загрузка не удалась:', e.message); console.warn('API загрузка не удалась:', e.message);
} }
} }
// Fallback на localStorage
const saved = localStorage.getItem('clickerGame'); const saved = localStorage.getItem('clickerGame');
if (saved) { if (saved) {
const savedState = JSON.parse(saved); const savedState = JSON.parse(saved);
@@ -243,38 +232,31 @@
} }
async function saveGame() { async function saveGame() {
// Сохраняем через API
if (api) { if (api) {
try { try {
// Сначала удаляем старую запись await api.deleteData(TABLE_NAME, { key: 'game_state' }, MY_SAVE);
await api.deleteData(TABLE_NAME, { key: 'game_state' });
// Затем вставляем новую
await api.insertData(TABLE_NAME, { await api.insertData(TABLE_NAME, {
key: 'game_state', key: 'game_state',
value: JSON.stringify(gameState), value: JSON.stringify(gameState),
updated_at: new Date().toISOString() updated_at: new Date().toISOString()
}); }, MY_SAVE);
return; return;
} catch (e) { } catch (e) {
console.warn('API сохранение не удалось:', e.message); console.warn('API сохранение не удалось:', e.message);
} }
} }
// Fallback
localStorage.setItem('clickerGame', JSON.stringify(gameState)); localStorage.setItem('clickerGame', JSON.stringify(gameState));
} }
async function resetGame() { async function resetGame() {
if (!confirm('Сбросить весь прогресс?')) return; if (!confirm('Сбросить весь прогресс?')) return;
if (api) { if (api) {
try { try {
await api.deleteData(TABLE_NAME, { key: 'game_state' }); await api.deleteData(TABLE_NAME, { key: 'game_state' }, MY_SAVE);
} catch (e) { } catch (e) {
console.warn('API удаление не удалось:', e.message); console.warn('API удаление не удалось:', e.message);
} }
} }
localStorage.removeItem('clickerGame'); localStorage.removeItem('clickerGame');
location.reload(); location.reload();
} }
@@ -344,16 +326,16 @@
const power = getClickPower(); const power = getClickPower();
gameState.score += power; gameState.score += power;
gameState.totalClicks++; gameState.totalClicks++;
const animation = document.createElement('div'); const animation = document.createElement('div');
animation.className = 'click-animation'; animation.className = 'click-animation';
animation.textContent = `+${power}`; animation.textContent = `+${power}`;
animation.style.left = `${event.clientX}px`; animation.style.left = `${event.clientX}px`;
animation.style.top = `${event.clientY}px`; animation.style.top = `${event.clientY}px`;
document.body.appendChild(animation); document.body.appendChild(animation);
setTimeout(() => animation.remove(), 1000); setTimeout(() => animation.remove(), 1000);
updateUI(); updateUI();
} }
@@ -369,24 +351,20 @@
// ИНИЦИАЛИЗАЦИЯ // ИНИЦИАЛИЗАЦИЯ
// ═══════════════════════════════════════════════════════════ // ═══════════════════════════════════════════════════════════
(async () => { (async () => {
// Ждём API
await waitForAPI(); await waitForAPI();
// Создаём таблицу при первом запуске
if (api) { if (api) {
try { try {
await api.createTable(TABLE_NAME, { await api.createTable(TABLE_NAME, {
'key': 'TEXT', 'key': 'TEXT',
'value': 'TEXT', 'value': 'TEXT',
'updated_at': 'TEXT' 'updated_at': 'TEXT'
}, 'Таблица сохранений игры'); }, MY_SAVE, 'Таблица сохранений кликера');
} catch (e) { } catch (e) {
// Таблица уже существует — это нормально
console.log('Таблица уже существует или:', e.message); console.log('Таблица уже существует или:', e.message);
} }
} }
// Загружаем игру
await loadGame(); await loadGame();
updateUI(); updateUI();