开发集成热门小游戏（vue+js）

嗝屁小孩纸2025-11-07 19:10

作者：fyupeng

技术专栏：☞ https://github.com/fyupeng

项目地址：☞ https://github.com/fyupeng/distributed-blog-system-api

项目预览地址：☞ 预览

留给读者

开发集成三十款热门小游戏，让你玩转国内热门游戏。

一、介绍

主页：

游戏库：

游戏列表：

游戏启动页面：

打字游戏：单词熟练度挑战

二、代码

主页html:

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏世界 - 30款精彩游戏等你探索</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700;900&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
    <style>
        :root {
            --neon-blue: #00d4ff;
            --neon-purple: #8b5cf6;
            --neon-green: #00ff88;
            --dark-bg: #0a0a0a;
            --dark-secondary: #1a1a1a;
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: var(--dark-bg);
            color: white;
            overflow-x: hidden;
        }
        
        .gaming-title {
            font-family: 'Orbitron', monospace;
            background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple), var(--neon-green));
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradient-shift 3s ease-in-out infinite;
        }
        
        @keyframes gradient-shift {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        
        .neon-glow {
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
            transition: all 0.3s ease;
        }
        
        .neon-glow:hover {
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
            transform: translateY(-2px);
        }
        
        .game-card {
            background: rgba(26, 26, 26, 0.8);
            border: 1px solid rgba(0, 212, 255, 0.2);
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .game-card:hover {
            transform: translateY(-8px) rotateX(5deg);
            border-color: var(--neon-blue);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
        }
        
        .hero-bg {
            background: url('resources/hero-gaming.jpg') center/cover no-repeat;
            position: relative;
        }
        
        .hero-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(10, 10, 10, 0.4);
        }
        
        .particles-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }
        
        .particle {
            position: absolute;
            background: var(--neon-blue);
            border-radius: 50%;
            opacity: 0.6;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(180deg); }
        }
        
        .nav-link {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--neon-blue);
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .stats-number {
            font-family: 'Orbitron', monospace;
            font-size: 3rem;
            font-weight: 900;
            color: var(--neon-blue);
        }
        
        .feature-game {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(0, 212, 255, 0.1));
            border: 1px solid rgba(139, 92, 246, 0.3);
        }
    </style>
<base target="_blank">
</head>
<body>
    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-50 bg-black bg-opacity-80 backdrop-blur-md border-b border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center space-x-3">
                    <img src="resources/gamepad-icon.jpg" alt="Logo" class="w-8 h-8 rounded">
                    <span class="text-xl font-bold gaming-title">游戏世界</span>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="index.html" class="nav-link text-white hover:text-blue-400">首页</a>
                    <a href="games.html" class="nav-link text-white hover:text-blue-400">游戏库</a>
                    <a href="about.html" class="nav-link text-white hover:text-blue-400">关于</a>
                </div>
                <div class="md:hidden">
                    <button class="text-white">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-bg min-h-screen flex items-center justify-center relative">
        <div class="particles-container" id="particles"></div>
        <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
            <h1 class="text-5xl md:text-7xl font-bold mb-6 gaming-title" id="hero-title">
                游戏世界
            </h1>
            <p class="text-xl md:text-2xl mb-8 text-gray-300" id="hero-subtitle">
                探索30款精心制作的HTML5游戏，从经典复古到现代创新，总有一款适合你
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="games.html" class="neon-glow bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300">
                    开始探索
                </a>
                <button class="border border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-white px-8 py-4 rounded-lg font-semibold text-lg transition-all duration-300">
                    观看介绍
                </button>
            </div>
        </div>
    </section>

    <!-- Featured Games Section -->
    <section class="py-20 bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl font-bold mb-4 gaming-title">精选游戏</h2>
                <p class="text-xl text-gray-400">最受欢迎的精彩游戏推荐</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="featured-games">
                <!-- Featured games will be populated by JavaScript -->
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-20 bg-black">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
                <div class="stat-item">
                    <div class="stats-number" data-target="30">0</div>
                    <p class="text-xl text-gray-400 mt-2">精彩游戏</p>
                </div>
                <div class="stat-item">
                    <div class="stats-number" data-target="10000">0</div>
                    <p class="text-xl text-gray-400 mt-2">玩家数量</p>
                </div>
                <div class="stat-item">
                    <div class="stats-number" data-target="24">0</div>
                    <p class="text-xl text-gray-400 mt-2">小时在线</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 border-t border-gray-800 py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="flex items-center justify-center space-x-3 mb-4">
                <img src="resources/gamepad-icon.jpg" alt="Logo" class="w-8 h-8 rounded">
                <span class="text-xl font-bold gaming-title">游戏世界</span>
            </div>
            <p class="text-gray-400">© 2024 游戏世界. 所有权利保留.</p>
        </div>
    </footer>

    <script src="main.js"></script>
</body>
</html>

所有文件列表：

游戏项目列表：

三、附件

资源已绑定在文章顶部。

相关推荐
赛博切图仔1 小时前
深入理解 package.json：前端项目的 “身份证“
前端·javascript
UIUV2 小时前
JavaScript 学习笔记：深入理解 map() 方法与面向对象特性
前端·javascript·代码规范
玉宇夕落2 小时前
深入剖析 JavaScript 中 map() 与 parseInt 的“经典组合陷阱”
javascript·面试
太平洋月光2 小时前
MJML邮件如何随宽度变化动态切换有几列📮
前端·css
AAA不会前端开发2 小时前
TypeScript核心类型系统完全指南
前端·typescript
徐同保2 小时前
使用GitKraken把feature_xtb_1104分支的多次提交记录合并到一起，只保留一次提交记录，并合并到master分支
前端
小光学长2 小时前
基于Vue的智慧楼宇报修平台设计与实现066z15wb（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。
前端·数据库·vue.js
醉方休2 小时前
web前端 DSL转换技术
前端
sen_shan2 小时前
Vue3+Vite+TypeScript+Element Plus开发-27.表格页码自定义
前端·javascript·typescript
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03综合整理：pdf预览显示：你尝试预览的文件可能对你的计算机有害。如果你信任此文件以及其来源，请打开此文件以看其内容，如何解决以正常预览文件04Linux下V2Ray安装配置指南05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06npm使用国内淘宝镜像的方法07《大数据技术原理与应用》实验报告三 熟悉HBase常用操作08BongoCat - 跨平台键盘猫动画工具09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10GitLab 零基础入门指南：从安装到项目管理全流程