H5小游戏1—— 是男人就下一百层（附完整源码）

💂 网站推荐:【】【】 🤟 风趣幽默的前端学习课程：👉 💅 想寻找共同学习交流、摸鱼划水的小伙伴，请点击【】 💬 免费且实用的计算机相关知识题库：👉

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

在线演示地址： 演示视频：

源码也可在文末免费获取

✨ 项目基本结构

目录结构如下：

这是一个简单的 H5小游戏

HTML

<div style="display:inline-block;width:100%; height:100%;margin: 0 auto; background: black; position:relative;" id="gameDiv">
    <canvas id="gameCanvas" width="480" height="640" style="background-color: #000000"></canvas>
</div>

CSS 代码

body {
          
   
    text-align: center;
    background: #000000;
    padding: 0;
    border: 0;
    margin: 0;
    height: 100%;
}

html{
          
   
    -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */
}

JS 代码

由于代码过长，影响阅读体验，这里只提供部分的JS代码，完整代码可以在文末下载。

egret_h5 = {
          
   };

egret_h5.prefix = "";

egret_h5.loadScript = function (list, callback) {
          
   
    var loaded = 0;
    var loadNext = function () {
          
   
        egret_h5.loadSingleScript(egret_h5.prefix + list[loaded], function () {
          
   
            loaded++;
            if (loaded >= list.length) {
          
   
                callback();
            }
            else {
          
   
                loadNext();
            }
        })
    };
    loadNext();
}

egret_h5.loadSingleScript = function (src, callback) {
          
   
    var s = document.createElement(script);
    if (s.hasOwnProperty("async")) {
          
   
        s.async = false;
    }
    s.src = src;
    s.addEventListener(load, function () {
          
   
        this.removeEventListener(load, arguments.callee, false);
        callback();
    }, false);
    document.body.appendChild(s);
}

源码下载

1.资源下载： 2.从学长的资源网下载（价格更优惠）：