2026 · AI人工智能

Math Run — a Math Game You Play with a PenMath Run：一款用笔来玩的数学游戏

A 3D browser game where you handwrite the answers to math problems. A neural network I trained on MNIST reads your writing right in the browser, and the difficulty adapts, aiming for about 85% of problems right. No server and nothing to install.一款 3D 网页游戏，你要亲手写出数学题的答案。我用 MNIST 训练的神经网络直接在浏览器里识别你的笔迹，难度会随你的表现调整，目标是让你答对大约 85% 的题。不需要服务器，也不用安装任何东西。

$Math Run — a Math Game You Play with a Pen$

MNIST test accuracyMNIST 测试准确率: 98.28%98.28%
Success rate the difficulty aims for难度设定所追求的答对率: 85%85%
Servers or installs needed需要的服务器或安装: None无

Why I built it

I wanted to show that a deep learning model can leave the notebook and run a real-time app, right in the browser. The first version in 2025 was a simple 2D runner. In 2026 I rebuilt it as a full 3D game, Night Parade, with a story and a difficulty system based on research into how people learn.

How it plays

Yokai come down a shrine path, each carrying a math problem whose answer is a single digit. You write the answer on a talisman with a mouse, finger or pen. The model reads it, and the talisman flies at every yokai with that answer. Let one reach you and you lose a heart.

为什么要做它

我想证明，深度学习模型可以走出 notebook，直接在浏览器里驱动一个实时应用。2025 年的第一个版本是一个简单的 2D 跑酷游戏。2026 年我把它重做成一个完整的 3D 游戏 Night Parade，加入了故事情节，还有一套以学习研究为依据的难度系统。

怎么玩

妖怪沿着神社的小路走来，每个都带着一道答案是一位数的数学题。你用鼠标、手指或笔在符纸上写下答案。模型识别出来后，符纸会飞向所有答案是这个数的妖怪。只要有一个妖怪走到你面前，你就会失去一颗心。

$A 7 is handwritten on the talisman, the model reads it, and one talisman banishes both yokai whose answer is 7$

Reading the handwriting

The model is a small MLP that I trained on MNIST with TensorFlow, reaching 98.28% test accuracy. It’s converted to TensorFlow.js and runs on the WASM backend, which leaves the GPU free for the 3D scene.

A digit drawn with a mouse looks different from an MNIST scan, so I wrote my own preprocessing without OpenCV. The drawing is turned to grayscale, thresholded with Otsu’s method and cropped. Then it’s scaled to 20 px and centred by its centre of mass in a 28×28 image, the same way the MNIST digits were prepared.

The game also reads in context. The model’s probabilities are combined with the answers on screen, so a sloppy 3 that looks a bit like an 8 still counts when a 3 is on screen. A clearly written wrong digit is still a miss.

Keeping it hard enough

Every problem is built backwards from its answer. A 7 can become 12 − 5, then 3 × 4 − 5, then √16 × 3 − 5, so there’s no fixed question bank to memorise. Each problem gets a difficulty score on the same scale as the player’s Elo-style rating, and the game picks problems the player should get right about 85% of the time, following the Eighty Five Percent Rule (Wilson et al., 2019). Higher ranks unlock new kinds of problems. The game also times your handwriting, so yokai never arrive faster than you can write.

Automated tests simulate players of different skill and check that no one is overwhelmed, everyday players stay near that target, and difficulty rises smoothly.

Built to stay simple

It’s all static files, with no server, no API keys and no build step, hosted for free on GitHub Pages. The 3D scene uses Three.js with toon shading, and every sound is made with the Web Audio API.

Next I’d like to read answers with more than one digit, and fine-tune the model on each player’s own handwriting, right in the browser.

识别手写

模型是一个小型的 MLP（多层感知机），我用 TensorFlow 在 MNIST 上训练，测试准确率达到 98.28%。它被转换成 TensorFlow.js，在 WASM 后端上运行，这样 GPU 就能留给 3D 场景。

用鼠标画出来的数字，和 MNIST 里扫描的数字看起来不一样，所以我没有用 OpenCV，自己写了预处理。先把图像转成灰度，用大津法（Otsu’s method）做二值化，再裁剪。然后缩放到 20 px，按质心居中放进一张 28×28 的图像，和当初处理 MNIST 数字的方式一样。

游戏还会结合上下文来识别。模型给出的概率会和屏幕上的答案结合起来，所以屏幕上有 3 的时候，一个写得潦草、有点像 8 的 3 仍然算数。但如果清清楚楚写了一个错的数字，还是算没打中。

保持足够的难度

每道题都是从答案倒推出来的。7 可以变成 12 − 5，再变成 3 × 4 − 5，再变成 √16 × 3 − 5，所以没有固定的题库可以背。每道题都有一个难度分，和玩家类似 Elo 的等级分用同一个标尺，游戏会挑选玩家大约有 85% 的把握答对的题，依据的是“85% 规则”（Eighty Five Percent Rule，Wilson et al., 2019）。等级越高，解锁的新题型越多。游戏还会计算你写字所需的时间，所以妖怪来的速度永远不会快过你写字的速度。

自动化测试会模拟不同水平的玩家，检查没有人被难到应付不过来，普通玩家的答对率保持在目标附近，难度也是平稳上升的。

刻意保持简单

它全部由静态文件组成，没有服务器，没有 API 密钥，也不需要构建步骤，免费托管在 GitHub Pages 上。3D 场景用 Three.js 和卡通着色（toon shading）制作，所有声音都由 Web Audio API 生成。

接下来，我想让它能识别不止一位数的答案，并直接在浏览器里，用每位玩家自己的笔迹来微调模型。