• 💂 網站推薦:【神級源碼資源網】【摸魚小游戲】
• 🤟 前端學習課程：👉【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);elsecr_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.也可通過下方卡片添加好友回復無限生機獲取

總結

以上是生活随笔為你收集整理的HTML小游戏14 —— H5横版冒险游戏《无限生机》（附完整源码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。