Giters

yeongpin / php-Lottery

🎲 A modern gacha game system built with PHP & MySQL, featuring: ✨ Complete user management system 🎮 Dynamic gacha animations 📋 Daily/Monthly task system 💳 PayPal payment integration 🌓 Dark/Light theme support 🌐 Multi-language (EN/中文) 📱 Responsive design 🔒 Secure authentication

Repository from Github https://github.comyeongpin/php-LotteryRepository from Github https://github.comyeongpin/php-Lottery

🎲 Gacha System (抽獎系統)

一個基於 PHP 和 MySQL 的現代化抽獎系統，具有完整的用戶管理、抽獎機制、任務系統和支付整合。

🌟 系統特點

用戶系統

  • 安全的用戶註冊和登入
  • image
  • image
  • 支持深色/淺色主題切換
  • image
  • 多語言支持（中文/英文）
  • 個人化儀表板
  • image
  • image
  • 自動保存用戶偏好設置

抽獎系統

  • 多種抽獎選項（單抽/五連抽/十連抽）
  • 五種稀有度（神話/傳說/史詩/稀有/普通）
  • 動態抽獎動畫效果
  • recording
  • 詳細的獎池資訊顯示
  • image
  • 抽獎歷史記錄
  • image
  • 物品庫存管理
  • image

任務系統

  • 每日任務
  • 每月任務
  • 限定任務
  • 任務獎勵自動發放
  • 任務進度追蹤
  • 即時獎勵通知

支付系統

  • PayPal 支付整合
  • image
  • 多種充值選項
  • 贈送代幣機制
  • 安全的交易處理
  • 交易歷史記錄

🎨 界面設計

主題支持

  • 自適應深色/淺色模式
  • 平滑的主題切換動畫
  • 符合人體工程學的色彩搭配
  • 一致的視覺風格

響應式設計

  • 完全支持移動端
  • 自適應各種屏幕尺寸
  • 觸控優化界面
  • 流暢的動畫效果

用戶體驗

  • 直觀的操作界面
  • 清晰的視覺反饋
  • 豐富的動畫效果
  • 友好的錯誤提示

🔐 後台管理系統

管理功能

image

  • 用戶管理

    • 查看所有用戶
    • image
    • 封禁/解封用戶
    • 修改用戶代幣數量
    • image
    • 查看用戶抽獎歷史
    • image

  • 物品管理

    • 新增/編輯/刪除物品
    • image
    • image
    • 設置物品稀有度
    • 調整物品抽中機率
    • 管理物品分類
    • image

  • 抽獎系統設置

    • 調整各稀有度機率
    • 設置抽獎消耗
    • 查看抽獎統計數據
    • image
    • image
    • 管理獎池內容

  • 任務系統管理

    • 創建/編輯任務
    • image
    • image
    • 設置任務獎勵
    • 管理任務類型
    • 查看任務完成情況

  • 支付管理

    • 查看充值記錄
    • image
    • 管理充值選項
    • image
    • 設置充值贈送
    • 處理支付問題

  • 系統設置

    • 網站基本設置
    • 語言包管理
    • 主題設置
    • 系統日誌查看

數據統計

  • 用戶數據

    • 註冊用戶統計
    • 活躍用戶分析
    • 用戶充值數據
    • 用戶行為分析

  • 抽獎數據

    • 抽獎次數統計
    • 物品產出統計
    • 稀有度分布
    • 代幣消耗統計

  • 收入統計

    • 每日收入報表
    • 充值方式分析
    • 收入趨勢圖表
    • 用戶消費習慣

安全特性

  • 管理員權限分級
  • 操作日誌記錄
  • 登入IP限制
  • 敏感操作二次驗證
  • 自動備份機制

🛠️ 技術實現

前端技術

  • HTML5 + CSS3
  • JavaScript (ES6+)
  • Bootstrap 5
  • Animate.css
  • 自定義動畫效果

後端技術

  • PHP 7+
  • MySQL 數據庫
  • PDO 數據庫操作
  • RESTful API 設計

安全特性

  • 密碼加密存儲
  • SQL 注入防護
  • XSS 攻擊防護
  • CSRF 防護
  • 安全的會話管理

📦 系統要求

  • PHP 7.0 或更高版本
  • MySQL 5.7 或更高版本
  • Apache/Nginx 網頁服務器
  • SSL 證書（用於支付功能）
  • 現代瀏覽器支持

🚀 安裝步驟

  1. 克隆專案：

    git clone [https://github.com/your-username/gacha-system.git](https://github.com/yeongpin/php-Lottery.git)

  2. 配置數據庫：

    CREATE DATABASE gacha_system;
USE gacha_system;
SOURCE database.sql;

  3. 配置環境變量：

    cp .env.example .env

  4. 設置權限：

    chmod 755 -R public/
chmod 644 -R config/

📝 配置說明

數據庫配置

// config/database.php
return [
    'host' => 'localhost',
    'dbname' => 'gacha_system',
    'username' => 'your_username',
    'password' => 'your_password',
];

PayPal 配置

PAYPAL_CLIENT_ID=your_client_id
PAYPAL_CLIENT_SECRET=your_client_secret
PAYPAL_MODE=sandbox # 或 'live' 用於生產環境

🔧 開發指南

目錄結構

gacha/
├── config/        # 配置文件
├── models/        # 數據模型
├── public/        # 公開訪問目錄
│   ├── admin/     # 管理後台
│   ├── styles/    # CSS 文件
│   └── locale/    # 語言文件
├── screenshots/   # 截圖
└── README.md      # 說明文檔

開發規範

  • 遵循 PSR-4 自動加載規範
  • 使用 PDO 預處理語句
  • 統一的錯誤處理機制
  • 完整的日誌記錄
  • 代碼註釋規範

📄 開源協議

本項目採用 MIT 協議 - 查看 LICENSE 文件了解詳情。

💻 代碼示例

// 加載語言文件
async function loadTranslations(lang) {
    try {
        const response = await fetch(`locale/${lang}.json`);
        translations[lang] = await response.json();
    } catch (error) {
        console.error('Failed to load translations:', error);
    }
}

// 切換語言
async function toggleLanguage() {
    const languageIcon = document.getElementById('language-icon');
    const currentLang = localStorage.getItem('language') || 'en';
    const newLang = currentLang === 'zh' ? 'en' : 'zh';
    
    if (!translations[newLang]) {
        await loadTranslations(newLang);
    }
    
    languageIcon.textContent = newLang === 'zh' ? '🇹🇼' : '🇺🇸';
    localStorage.setItem('language', newLang);
    changeLanguage(newLang);
}

// 應用翻譯
function changeLanguage(lang) {
    if (!translations[lang]) return;

    document.querySelectorAll('[data-translate]').forEach(element => {
        const key = element.getAttribute('data-translate');
        let text = getNestedTranslation(translations[lang], key);
        
        if (text) {
            if (key === 'consumeTokens') {
                const tokens = element.getAttribute('data-tokens');
                text = text.replace('{n}', tokens);
            }
            element.textContent = text;
        }
    });
}

HTML 使用示例

<!-- 語言切換按鈕 -->
<button class="language-toggle" onclick="toggleLanguage()" title="切換語言">
    <span id="language-icon">🇺🇸</span>
</button>

<!-- 使用翻譯的元素 -->
<h2 data-translate="welcome">歡迎</h2>
<p data-translate="description">這是一段描述文字</p>

語言文件示例 (locale/zh.json)

{
    "welcome": "歡迎",
    "description": "這是一段描述文字",
    "consumeTokens": "消耗{n}代幣"
}

語言文件示例 (locale/en.json)

{
    "welcome": "Welcome",
    "description": "This is a description",
    "consumeTokens": "Cost {n} Tokens"
}

CSS 樣式

.language-toggle {
    position: fixed;
    bottom: 80px;
    left: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
    z-index: 1000;
}

.dark-mode .language-toggle {
    background: #2d2d2d;
    color: white;
}

任務完成提示樣式

/* 任務完成提示樣式 */
.task-completed-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1a1a1a; /* 深色背景 */
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 1000;
    min-width: 300px;
}
.task-completed-popup h3 {
    color: #fff; /* 白色文字 */
    margin-bottom: 15px;
    font-size: 1.3em;
    font-weight: bold;
}
.task-completed-popup p {
    color: #fff; /* 白色文字 */
    margin-bottom: 20px;
    font-size: 1.1em;
}
.confirm-btn {
    padding: 12px 30px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1em;
    font-weight: 500;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.confirm-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    background: var(--accent-color);
}

使用示例

<div class="popup-content">
    <h3 data-translate="taskCompleted">任務完成！</h3>
    <p class="reward-text" data-translate="rewardText">獲得 ${data.reward_tokens} 代幣</p>
    <button onclick="closeTaskPopupAndReload(this)" class="confirm-btn" data-translate="confirm">確定</button>
</div>

🔄 更新日誌

v1.0.0 (2024-11-25)

  • 初始版本發布
  • 實現基本功能
  • 整合支付系統

👥 貢獻指南

  1. Fork 本專案
  2. 創建新的功能分支
  3. 提交更改
  4. 發起 Pull Request

🙏 致謝

📱 聯繫方式

About

🎲 A modern gacha game system built with PHP & MySQL, featuring: ✨ Complete user management system 🎮 Dynamic gacha animations 📋 Daily/Monthly task system 💳 PayPal payment integration 🌓 Dark/Light theme support 🌐 Multi-language (EN/中文) 📱 Responsive design 🔒 Secure authentication

License:MIT License

Languages

Language:PHP 56.1%Language:CSS 43.9%