直接在404页嵌入Canvas游戏易失败，因服务器静态返回不执行外部JS、拦截fetch请求，且存在跨域、老旧渲染环境（如IE8+）、禁用Storage、禁止document.write等限制；必须内联所有代码、避免现代语法、兼容HTML 4.01，并确保HTTP状态码为真实404且不干扰语义与SEO。
为什么直接在404页里嵌入Canvas游戏容易失败
因为HTML 404页面通常由服务器静态返回，不执行外部JS、不加载CDN资源，甚至会拦截fetch或XMLHttpRequest请求。你写的game.js可能根本没加载，或者加载后因跨域被Blocked loading resource报错。
真正能跑起来的方案，必须满足：所有代码（HTML + CSS + JS）内联、无外部依赖、不依赖window.location跳转逻辑（404页URL本身可能已损坏）、兼容IE8+（部分老服务器仍用HTML 4.01 DTD）。
- 避免使用
import、async、await——HTML 404页常运行在老旧渲染环境 - 不要读取
localStorage或sessionStorage——某些安全策略下会被禁用 - 禁止调用
document.write()——它会清空整个页面，包括你刚写的404提示 - 用
setTimeout代替requestAnimationFrame——后者在IE9以下不可用
用纯内联Canvas实现“点击方块”小游戏（兼容HTML 4.01）
这个小游戏只依赖<canvas>和原生onmousedown，所有逻辑压进一个<script>标签，连CSS都写在style属性里。实测可在Apache/Nginx的默认404.html中直接粘贴生效。
<canvas id="game" width="320" height="240" style="border:1px solid #ccc;background:#f9f9f9;"></canvas>
<script>
var canvas = document.getElementById('game');
var ctx = canvas.getContext('2d');
var score = 0;
var target = { x: 50, y: 50, w: 40, h: 40 };
<p>function draw() {
ctx.clearRect(0,0,320,240);
ctx.fillStyle = '#4CAF50';
ctx.fillRect(target.x, target.y, target.w, target.h);
ctx.fillStyle = '#000';
ctx.font = '14px monospace';
ctx.fillText('Score: ' + score, 10, 20);
}</p><p>function moveTarget() {
target.x = Math.floor(Math.random() <em> 260) + 10;
target.y = Math.floor(Math.random() </em> 180) + 10;
}</p><p>canvas.onmousedown = function(e) {
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
if (x > target.x && x < target.x + target.w &&
y > target.y && y < target.y + target.h) {
score++;
moveTarget();
}
};</p><p>(function loop() {
draw();
setTimeout(loop, 50);
})();
</script>注意：<canvas>标签必须放在<script>之前；&&不能写成&&（XHTML/HTML 4.01会解析失败）；所有引号统一用英文双引号。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
如何让游戏不干扰404语义和SEO
搜索引擎和屏幕阅读器需要明确知道这是错误页。游戏只是装饰，不能掩盖HTTP状态码和语义结构。
- 确保服务器真实返回
HTTP/1.1 404 Not Found响应头——游戏再炫酷，状态码错了就是无效404 - 保留
<h1>404</h1>和<p>The page you requested does not exist.</p>等可读文本，放在<canvas>上方或下方 - 给
<canvas>加aria-hidden="true"，防止读屏软件误读图形内容 - 避免用
position: fixed遮盖文字——移动端用户可能点不到“返回首页”链接
替换默认Nginx/Apache 404页的实操要点
不是把代码丢进404.html就完事。关键路径和权限必须对：
- Nginx：确认
error_page 404 /404.html;指向的是根目录下的文件，且/404.html有location块允许访问（否则返回空白） - Apache：检查
ErrorDocument 404 /404.html是否启用，且.htaccess未重写该路径 - 所有服务器：确保
404.html文件编码为UTF-8无BOM，否则<script>里的中文注释可能导致JS解析中断 - 测试时用
curl -I https://yoursite.com/this-page-does-not-exist验证响应头确实是404，而不是200伪装
最常被忽略的一点：游戏逻辑里别调用history.back()或location.href——用户按F5刷新404页时，JS会重新执行，但此时页面URL仍是错误路径，硬跳转可能陷入死循环。
