有意思的带迷宫游戏的404错误页面分享

很多站长都喜欢折腾404错误页面，网上也有大量网友分享的很有意思的404错误页面。这款带迷宫游戏的404错误页面来自于美团技术团队。波波扒了下来，整理了一下特意分享给有需要的朋友们。

其实迷宫游戏特别值得研究的是迷宫的生成算法。源码是单网页，波波没有下载其中的JS和CSS文件。所以不保证美团的技术会不会从服务器删除相关资源。大家也可以自行整理。

页面效果：

页面源码：

<!doctype html>
<html lang=en dir=ltr class="no-js theme-united">
<head>
<meta charset=utf-8>
<meta name=renderer content=webkit>
<meta http-equiv=x-ua-compatible content="IE=edge">
<meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name=author content=soulteary@gmail.com>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-158867676-1"></script>
<script>
windowwindow.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('js',new Date());
gtag('config','UA-158867676-1');
</script>
<meta name=robots content=none>
<title>404 Page not found</title>
<link rel=stylesheet href="https://awps-assets.meituan.net/mit/blog/v20190629/common.css?v=Whistle&t=20181017-1r">
<link rel=stylesheet href="https://awps-assets.meituan.net/mit/blog/v20190629/errorPage.css?v=Whistle&t=20181017-1r">
<script>
top!=self&&top.host!=self.host&&(top.location=self.location);
(function(d){dd.className=d.className.replace(/\bno-js/,'');})(document.documentElement);
var $CONFIG={'data':{}};
</script>
<link href=https://tech.meituan.com/feed/ rel=alternate type=application/rss+xml title="404 Page not found">
<script src="https://awps-assets.meituan.net/mit/blog/v20190629/asset/vendor/zepto.min.js?v=Whistle&t=20181017-1r"></script>
<script src="https://awps-assets.meituan.net/mit/blog/v20190629/common.js?v=Whistle&t=20181017-1r"></script>
</head>
<body class="page page-is-loading page-type-page page-type-error-page">
<div class="container-fluid main-container" id=J_main-container style="margin-left: 0px;">
<div class=row>
<div class=col-md-12>
<h2 class=page-title style="text-align: center;">404 NOT FOUND</h2>
</div>
</div>
<div class=row>
<div class=col-md-12>
<div class=post-container>
<h4 class=post-title style="text-align: center">网页找不到了我们可以帮您，但梦想只能靠你自己！</h4>
</div>
<div class=post-container style="margin-bottom: 15px;">
<div class=row style="padding-left: 17px;text-align: center">
<a class="btn btn-primary btn-sm" href="/">回到首页</a>
</div>
</div>
</div>
</div>
<div class=row>
<div class=col-md-12>
<div class=post-container>
<div class=row>
<div class=col-md-12>
<div class=maze-static-container></div>
</div>
</div>
<div class="row maze-game-container">
<div class=col-md-12>
<canvas class=maze-content></canvas>
</div>
<div class=col-md-12>
<p class=maze-game-info><span>你可以使用 <kbd>w</kbd>、<kbd>a</kbd>、<kbd>s</kbd>、<kbd>d</kbd>，或者方向键进行游戏。</span></p>
</div>
</div>
</div>
</div>
</div>
<div class=row>
<div class=col-md-12>
<div class=post-content>
<div class=content></div>
</div>
</div>
</div>
</div>
<script src="https://awps-assets.meituan.net/mit/blog/v20190629/errorPage.js?v=Whistle&t=20181017-1r"></script>
</body>
</html>