本项目是一个基于Dash框架的Web应用程序,旨在帮助用户通过识别颜色差异来测试视觉感知能力。游戏界面包含多个方块,其中一个方块的颜色与其他方块略有不同。用户需要通过点击不同的方块来识别出颜色差异。 项目基于Dash框架构建,使用了fac和fuc组件库,并提供了快速编写Dash CSS的实用工具库。 本项目是对找色差小游戏的仿写
This project is a web application based on the Dash framework, aiming to help users test their visual perception ability through color difference recognition. The game interface contains several blocks, and one block has a slightly different color from the others. The user needs to click different blocks to identify the color difference. The project is based on the Dash framework, and uses the fac and fuc component libraries, and provides a utility library for writing Dash CSS quickly. This project is a reproduction of the The Color!.
- 颜色差异识别:用户需要在多个颜色相似的方块中识别出颜色略有不同的方块。
- 动态生成:每次游戏开始时,方块的颜色和位置都会随机生成。随着关卡推进,难度会越来越高。
- 用户交互:用户可以通过点击方块来选择他们认为颜色不同的方块。
- Color Difference Recognition: The user needs to identify the block with a slightly different color from multiple blocks with similar colors.
- Dynamic Generation: The blocks' colors and positions will be randomly generated every time the game starts. As the level progresses, the difficulty will increase.
- User Interaction: The user can select the block they think is different by clicking on it.
- Dash:用于构建Web应用程序的Python框架。
- feffery_antd_components:用于Dash的Ant Design组件库。
- feffery_utils_components:用于Dash的实用组件库。
- feffery_dash_utils:用于快速编写Dash css的实用工具库。
- Dash: A Python framework for building web applications.
- feffery_antd_components: A component library for the Dash framework based on Ant Design.
- feffery_utils_components: A component library for the Dash framework based on utility components.
- feffery_dash_utils: A utility library for writing Dash CSS quickly.
-
克隆仓库 Clone the repository:
git clone https://github.com/Wangnov/secha-dash.git cd secha-dash -
安装依赖 Install dependencies:
pip install -r requirements.txt pip install feffery_antd_components --pre -U pip install feffery_utils_components --pre -U pip install feffery_dash_utils --pre -U
-
运行项目 Run the project:
python app.py
- 创建一个pythonanywhere账号(免费)
- 上传项目到pythonanywhere
- 创建虚拟环境,并安装依赖
- 新建一个web服务,并设置项目路径和虚拟环境路径
- 修改WSGI configuration file为以下内容(自行替换路径):
import sys
# add your project directory to the sys.path
project_home = u'/home/yourname/secha-dash'
if project_home not in sys.path:
sys.path = [project_home] + sys.path
from app import app
application = app.server- Reload pythonanywhere web服务
- 打开浏览器,输入pythonanywhere web服务的域名,即可访问游戏
Deploy to pythonanywhere
- Create a pythonanywhere account (free)
- Upload the project to pythonanywhere
- Create a virtual environment and install dependencies
- Create a web service and set the project path and virtual environment path
- Modify the WSGI configuration file to the following content (replace the path with your own):
import sys
# add your project directory to the sys.path
project_home = u'/home/yourname/secha-dash'
if project_home not in sys.path:
sys.path = [project_home] + sys.path
from app import app
application = app.server- Reload the pythonanywhere web service
- Open the browser, enter the domain of the pythonanywhere web service, and you can access the game.
MIT © Wangnov