HTML小游戏24 —— h5魂斗罗之突围游戏（附完整源码）

• 💂 网站推荐:【神级源码资源网】【摸鱼小游戏】
• 🤟 前端学习课程：👉【28个案例趣学前端】【400个JS面试题】
• 💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【摸鱼学习交流群】

本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 h5魂斗罗之突围游戏

✨ 前言

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

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

✨ 项目基本结构

大致目录结构如下：

├── images
│   ├── boold-sheet0.png
│   ├── bwater.png
│   ├── ...
│   ├── tiledbackground4.png
│   └── tiledbackground5.png
├── c2runtime.js
├── data.js
├── jquery-2.1.1.min.js
└── index.html

场景展示

​​

HTML源码

<div id="fb-root"></div>
<div id="c2canvasdiv">
<canvas id="c2canvas" width="1136" height="640">
<h1>Your browser does not appear to support HTML5. Try upgrading your browser to the latest version. <a href="http://www.whatbrowser">What is a browser?</a>
<br/><br/><a href="http://www.microsoft/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br/>
<a href="http://www.mozilla/firefox/">Mozilla Firefox</a><br/>
<a href="http://www.google/chrome/">Google Chrome</a><br/>
<a href="http://www.apple/safari/download/">Apple Safari</a><br/>
<a href="http://www.google/chromeframe">Google Chrome Frame for Internet Explorer</a><br/></h1>
</canvas>
</div>

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;
}

JS 源码

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

调整画布大小以填充浏览器视口。

  jQuery(window).resize(function() {
   cr_sizeCanvas(jQuery(window).width(), jQuery(window).height());
  });

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

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

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

图片资源

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

 ⭐️ 好书推荐

《数字身份与元宇宙信任治理》

【内容简介】

本书是一本介绍数字身份和元宇宙的普及型书籍，力求专业性与通俗性相平衡。全书共八章，其中前四章主要介绍数字身份管理及应用，包括数字身份的相关概念及特性；身份认证管理、应用赋能及零信任安全管理；各国的数字身份实施；讨论数字身份在公共治理、商业服务等领域的应用价值。后面四章主要探究元宇宙框架及其信任治理，从Web技术架构的演变，介绍元宇宙的网络技术基础Web 3.0，以及相关的数字身份模式的发展趋势；讨论元宇宙中的数字身份技术要素及形态特征，以及数字身份、数字分身等关键特征要素；探讨利用数字身份对元宇宙的信任环境进行治理的方法和技术；探讨如何构建元宇宙的信任治理规则。

📚 京东自营购买链接：《数字身份与元宇宙信任治理》

源码下载

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

2.从海拥资源网下载：https://code.haiyong.site/960/
3.也可通过下方卡片添加好友回复魂斗罗获取