# Sudoku_web

**Repository Path**: CaptainChen/sudoku_web

## Basic Information

- **Project Name**: Sudoku_web
- **Description**: 北大程序设计思维第三周小作业，基于Flask的网页项目，实现一个数独游戏
学习了Python, HTML, JavaScript, CSS, jQuery
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-24
- **Last Updated**: 2022-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Sudoku_web 项目

基于Flask的网页项目，实现一个可以填写的数独游戏

## 功能介绍

### 主页 /index

有两个按钮，分别是“录入数据”，“开始游戏”，

**若服务器没有数据，则“开始游戏”按钮为灰色且不可点击**

进入录入数据模式可以为服务器添加更多数独游戏初始数据；

开始游戏即开始游玩数独

### 录入数据 /inputsudo

录入数据，可以直接在数独表格上编辑填写数字，将会自动判断输入是否合法（0~9的数字）

每输入一个格子，会立即检测是否存在不合法的情况（比如同一行有同一个数字）

将检测到的非法格子会标记为紫色

该功能使用jQuery实现

**若数据非法，“提交数据”按钮将为灰色且不可点击状态**

点击“提交数据”按钮，浏览器使用post将数据发往服务器并存储

然后浏览器将清空数独表格，等待下一次录入

### 开始游戏 /sudoku

首先，网页使用get从服务器请求一个数独初始数据，并加载显示出来

在数独游戏中，玩家直接在数度表格上输入数字编辑，将会自动判断输入是否合法（0~9的数字）

每输入一个格子，会立即检测是否存在不合法的情况（比如同一行有同一个数字）

将检测到的非法格子会标记为紫色，不可编辑的非法格子为红色

该实时检测功能为jQuery实现

**若数据非法，“提交结果”按钮将为灰色且不可点击状态**

点击“提交结果”按钮，浏览器使用post将数据发往服务器

**服务器会对数据进行二次验证，防止有人篡改代码发送非法的游戏结果**（使用python实现）

如果服务器验证正确，网页将进入胜利界面

#### 计时器

开始游戏时，设置一个每1000ms调用一次得函数，使得每一秒能够更新计时器

点击提交时，进入winning页面时，将计时器得时间传入url

### 胜利界面 /winning

胜利界面为一张图片和一个按钮“下局游戏”

可以点击“下局游戏”再次游玩

通过在url上指定参数获得玩家完成游戏得时间

## 实现细节

### 关于按钮

按钮使用css实现，通过定义:hover, :active等状态实现按钮被点击的动态效果

通过对按钮添加disabled属性，修改class为red和gray来控制按钮是否可以点击

### 关于实时检测游戏是否合法

定义每个可编辑的div，对应的失去焦点事件blur，每次发生blur时，执行jQuery代码checksudo，检查是否存在非法格子，并且标记每个非法的格子

如果存在非法格子，同时修改提交按钮的状态

### 关于提交结果

从每个格子中读入内容，将其放入一个数组里

使用post命令将数组发送给服务器

### 关于服务器验证

服务器收到数据后，会用python代码再次验证游戏结果是否合法，并返回验证结果

浏览器收到结果后，用回调函数读出验证结果进行操作

## 思考题

### 关于数独难度估计

1. 可以根据**数独给出的初始格子数**作为难度，给出的格子越多，则认为难度越低

   但这不一定是绝对的，有可能给出部分格子后导致许多方法无法填写，导致难度升高

   **本项目使用此难度估计方法**

2. 使用**蒙特卡洛法**估计搜索树大小

   《算法设计与分析》的算法，对于一般的搜索方法，可以使用搜索树找到解的期望值作为难度值，

   而搜索树期望值大小可以用蒙特卡洛法估计

   即随机一个填写方式，记录每一步填写时的可能情况数，并假定其他搜索分支在该步骤的情况数相同，可以估计出一个搜索树大小。

   多次使用蒙特卡洛法，取每次估计的搜索树大小的平均值，估计到搜索树大小

   结合蒙特卡洛法随机填写找到解的概率（或无解的概率），计算难度值

3. 根据**填写方法**估计难度

   如果只需要推理即可得出所有结果，则为简单

   如果需要借助枚举，则难度更大

### 关于计时器功能

使用setInterval函数，设置一个每1000ms调用一次的函数，用于更新计时器

当用户点击提交按钮时，将计时器的时间提交到下一个页面用于显示

### (未实现)数独编号、注册登录等功能

可以使用session记录用户的登录状态，并在服务器记录每个用户完成过的数独编号，防止用户重复玩到同一个数独。

可以根据用户完成时间，给用户推荐合适难度的数独