当前位置：首页 > news >正文

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

news 2025/11/7 8:44:58

作者：fyupeng
技术专栏：☞ https://github.com/fyupeng
项目地址：☞ https://github.com/fyupeng/distributed-blog-system-api
项目预览地址：☞ 预览

留给读者

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

一、介绍

主页：
在这里插入图片描述
游戏库：

游戏列表：

游戏启动页面：

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

二、代码

主页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>