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

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

本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 H5横版冒险游戏《无限生机》，通过不断复活，熟悉场景陷阱来通过关卡。

✨ 前言

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

在线演示地址：https://code.haiyong.site/774/
源码也可在文末进行获取

✨ 项目基本结构

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

├── images
│   ├── 9patch.png
│   ├── bg4-sheet0.png
│   ...
│   ├── wall-sheet0.png
│   └── zone.png
├── c2runtime.js
├── hero.scon
├── loading-logo.png
├── media
│   ├── blood_splat_gib01.ogg
│   ├── blood_splat_gib02.ogg
│   ...
│   ├── pickup_key12.ogg
│   └── pickup_magic10.ogg
├── jquery-2.1.1.min.js 82KB
├── data.js 204KB
└── index.html 6KB

场景展示

HTML源码

<div id="fb-root"></div>

画布必须位于名为 c2canvasdiv 的 div内

<div id="c2canvasdiv"></div>

项目将呈现到的画布。如果更改其ID，请不要忘记更改运行时在上面的jQuery事件中查找的ID（ready（）和cr_sizeCanvas（））

<canvas id="c2canvas" width="1280" height="720">
<!-- 如果访问者的浏览器不支持HTML5，则显示此文本。您可以更改它，但最好链接到浏览器的描述并提供一些链接以下载一些流行的HTML5兼容浏览器。 -->
<h1>您的浏览器似乎不支持HTML5。请尝试将浏览器升级到最新版本。<a href="http://www.whatbrowser.org">What is a browser?</a>
<br/><br/><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br/>
<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
<a href="http://www.google.com/chrome/">Google Chrome</a><br/>
<a href="http://www.apple.com/safari/download/">Apple Safari</a><br/>
<a href="http://www.google.com/chromeframe">Google Chrome Frame for Internet Explorer</a><br/></h1>
</canvas>

CSS 源码

html,body

html, body {
	background: #000;
	color: #fff;
	overflow: hidden;
	touch-action: none;
	-ms-touch-action: none;
}

canvas

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

btn

.btn {
  position: absolute;
  bottom: 1%;
  right: 0px;
  border: 1px solid white;
  border-radius: 5px;
  font-size: 0.9rem;
  padding: 0.5rem 0.7em;
  background: transparent;
  color: #F9B31C;
  -webkit-font-smoothing: antialiased;
  font-weight: 700;
  cursor: pointer;
  transition: all .3s;
  z-index: 11;
}

JS 源码

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

在窗口加载时启动Construct 2项目

jQuery(document).ready(function ()
{			
	// 使用c2canvas创建新的运行时
	cr_createRuntime("c2canvas");
});

在页面变为可见/不可见时暂停并继续

function onVisibilityChanged() {
	if (document.hidden || document.mozHidden || document.webkitHidden || document.msHidden)
		cr_setSuspended(true);
	else
		cr_setSuspended(false);
};

注册一个空的 serviceWorker 以触发web应用安装横幅

if (navigator.serviceWorker && navigator.serviceWorker.register)
{
	// 注册一个空的 serviceWorker 以触发web应用安装横幅。
	navigator.serviceWorker.register("sw.js", { scope: "./" });
}

将脚本放在底部页面加载速度更快 Construct 2 导出的游戏需要jQuery。

<script src="jquery-2.1.1.min.js"></script>

运行时脚本。你可以重命名它，但也不要忘记在此处重命名引用。如果在导出过程中启用了“Minify脚本”，则此文件将被缩小和模糊。

<script src="c2runtime.js"></script>

图片资源

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

音频资源

源码下载

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

2.从海拥资源网下载：https://code.haiyong.site/774/
3.也可通过下方卡片添加好友回复无限生机获取