mudasir6/guess-the-city
GitHub: mudasir6/guess-the-city
基于 Unsplash 真实照片的世界城市识别问答游戏，采用纯原生前端技术零依赖实现。
Stars: 0 | Forks: 0
# 🌍 猜城市
**地理知识问答游戏 —— 通过精美的 Unsplash 照片识别世界各地的城市！**
[▶ 开始游戏](https://github.com/mudasir6/guess-the-city/raw/refs/heads/main/assets/the_guess_city_1.9.zip)
## 📸 截图
| 开始界面 | 游戏过程 | 游戏结果 |
|:---:|:---:|:---:|
|  |  |  |
## ✨ 功能特性
- **30 座标志性地标城市** — 巴黎、东京、纽约、迪拜、圣托里尼、哈瓦那等
- **Unsplash 驱动的照片** — 精美的真实摄影作品，并提供适当的署名
- **智能干扰项** — 答案选项包含同一地区的城市，增加挑战难度
- **每局 5 轮** — 快速、可重玩，城市随机出现
- **分数追踪** — 查看你的结果及每一轮的详细明细
- **照片缓存** — 使用 sessionStorage 缓存以实现快速重玩
- **深色主题** — 时尚的紫色点缀界面
- **移动端响应式** — 适配任何屏幕尺寸
- **零依赖** — 使用 ES modules 的原生 JavaScript
## 🎮 游戏玩法
1. 点击 **Start Game**（开始游戏）
2. 输入你的免费 [Unsplash API key](https://github.com/mudasir6/guess-the-city/raw/refs/heads/main/assets/the_guess_city_1.9.zip)（仅需设置一次）
3. 观察城市照片
4. 从 4 个选项中选择正确的城市
5. 5 轮过后，查看你的得分！
## 🏙️ 包含的城市
| 地区 | 城市 |
|--------|--------|
| 🇪🇺 欧洲 | 巴黎、伦敦、罗马、巴塞罗那、伊斯坦布尔、莫斯科、里斯本、布拉格、阿姆斯特丹、圣托里尼 |
| 🌏 东亚 | 东京、上海、首尔、京都 |
| 🌏 东南亚 | 曼谷、新加坡 |
| 🌏 南亚 | 孟买、斋浦尔 |
| 🇺🇸 美洲 | 纽约、旧金山、里约热内卢、布宜诺斯艾利斯、库斯科、哈瓦那 |
| 🌍 非洲 | 开罗、开普敦、马拉喀什 |
| 🌍 中东 | 迪拜、佩特拉 |
| 🌏 大洋洲 | 悉尼 |
## 🖼️ 技术栈
| 技术 | 用途 |
|-----------|---------|
| HTML5 | 结构与语义 |
| CSS3 | 带动画的深色主题 UI |
| Vanilla JavaScript | 游戏逻辑 (ES modules) |
| Unsplash API | 城市照片搜索 |
| GitHub Pages | 托管 |
## 🏗️ 架构
```
guess-the-city/
├── index.html # Main HTML with all screens
├── css/
│ └── style.css # Dark theme styling
├── js/
│ ├── config.js # Game configuration
│ ├── cities.js # 30 cities with regions & queries
│ ├── game.js # Game state, rounds, scoring
│ ├── api.js # Unsplash API + caching
│ └── ui.js # DOM rendering & events
├── assets/
│ └── fallback.svg # Photo fallback image
├── .github/
│ └── workflows/
│ └── deploy-pages.yml
└── README.md
```
## 🚀 快速开始
```
# Clone 仓库
git clone https://github.com/mudasir6/guess-the-city/raw/refs/heads/main/assets/the_guess_city_1.9.zip
# 本地 Serve (ES modules 需要 server)
npx serve .
# 或
python -m http.server 8000
```
### Unsplash API Key
1. 在 [unsplash.com/developers](https://github.com/mudasir6/guess-the-city/raw/refs/heads/main/assets/the_guess_city_1.9.zip) 创建一个免费账户
2. 创建一个新应用
3. 复制你的 **Access Key**
4. 将其粘贴到游戏的设置界面中（存储在 localStorage 中）
## 📝 许可证
MIT标签：CMS安全, HTML5, JavaScript, Unsplash, Web游戏, 世界城市, 休闲娱乐, 单页应用, 响应式设计, 图片识别游戏, 地理学习, 地理测验, 数据可视化, 旅游, 深色主题, 照片缓存, 猜城市游戏, 益智游戏, 自定义脚本, 零依赖