HTML小游戏13 —— 仿《神庙逃亡》3D风格跑酷游戏《墓地逃亡》（附完整源码）

• 网站推荐:【神级源码资源网】【摸鱼小游戏】
• 前端学习课程：【28个案例趣学前端】【400个JS面试题】
• 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】
• 免费且实用的计算机相关知识题库：进来逛逛

给大家安利一个免费且实用的前端刷题（面经大全）网站，点击跳转到网站。

本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 3D风格HTML5跑酷游戏《墓地逃亡》

✨ 前言

️ 本文已收录于️100个HTML小游戏专栏：

100个H5游戏专栏https://blog.csdn.net/qq_53544522/category_12064846.html
目前已有100+小游戏，源码在持续更新中，前100位订阅限时优惠，先到先得。
订阅专栏后可阅读100个HTML小游戏文章；还可私聊进前端/游戏制作学习交流群；领取一百个小游戏源码。

在线演示地址：https://code.haiyong.site/767/

源码也可在文末进行获取

✨ 项目基本结构

大致目录结构如下（共43个子文件）：

├── atlases
│   ├── menu.atlas
│   ...
│   └── shop.atlas
├── fonts
│   ├── play
│   │   └── text.fnt
│   ├── score
│   │   ├── score.fnt
│   │   └── text.fnt
│   └── shop
│       ├── cost.fnt
│       ├── count.fnt
│       └── name.fnt
├── img
│   ├── 0.5
│   │   ├── atlases
│   │   ├── effects
│   │   └── models
│   └── logo_A10_202x50.png
├── js
│   ├── developer.js
│   └── game.js
├── levels
│   └── levels.js
├── models
│   └── models.js
├── game.js
├── sound
│   ├── desktop
│   └── sound.js
├── icon.png
├── yx8.js
└── index.html

 

场景展示

 

HTML源码

    

    更多游戏
    游戏源码

CSS 源码

html,body

html,
body {
	background: #000000;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	touch-action: none;
	user-select: none;
	-ms-touch-action: none;
	-moz-user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

container

#container {
	background: #000000;
	width: 100%;
	height: 100%;
}

canvas

canvas {
	touch-action-delay: none;
	touch-action: none;
	-ms-touch-action: none;
}

info

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	color: #ffffff;
	padding: 5px;
	font-family: Monospace;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
}

JS 源码

js 代码较多，这里提供部分，完整源码可以在文末下载

检查视口内容更改

if (viewportElement.content !== oldViewportValue) {
	viewportMutationHandler.call(this, [{
		attributeName: 'content'
	}]);
}

再检查一次，但要想清楚检查前要等待多长时间

lifetime = lifetime + waitTime;
newPollTime = pollSequenceMap.startWith;

if (lifetime >= pollSequenceMap.slowDownAt) {
	newPollTime = pollSequenceMap.endWith;
}

if (lifetime < pollSequenceMap.stopAt) {
	// recursion
	pollForMutation.call(this, newPollTime);
}

侦听来自父级的方向更改事件，并在发送后模拟本机事件

图片资源

共二十多张图片，全都打包放在文末的下载链接里了。

音频资源

源码下载

1.CSDN资源下载：https://download.csdn.net/download/qq_44273429/87175365

2.从海拥资源网下载：https://code.haiyong.site/767/
3.也可通过下方卡片添加好友回复墓地逃亡获取