HTML小游戏4 —— 简易版英雄联盟（附完整源码）

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

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

本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 简易版英雄联盟小游戏

本节示例将会实现如下所示的效果：

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

✨ 项目基本结构

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

├── css│   └── style.css├── js│   ├── Base64Images.js│   ├── cocos2dtgme.js│   └── app2.js├── res│   ├── bg│   │   ├── map1_01.jpg│   │   ├── map1_02.jpg│   │   ...│   │   └── map1_09.jpg│   ├── npc.png│   ...│   └── start.png└── index.html

场景展示

HTML源码

<img src='share.png' width=1 height=1 /><div class="orient" id="orient"><p>请在竖屏情况下使用</p></div><div id="loadicon"><img id="img1"/><br/><img id="img2"/><br/><img id="img3"/></div><canvas id="gameCanvas" width="445" height="700"></canvas>

CSS 源码

html,body

html,body {background-color: #191919;margin: 0;padding: 0;width: 100%;height: 100%;text-align: center}

id 为 loadicon 的 div

#loadicon {margin-top: 250px;}

id 为 orient 的 div

#orient {margin-top: 50px;}

p 标签

p {color: #FFFFFF;font-size: 24}

JS 源码

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

横屏提示

function orientationChange() {if (window.orientation == 90 || window.orientation == -90) {document.getElementById("gameCanvas").style.display = "none"document.getElementById("orient").style.display = "block"} else {document.getElementById("gameCanvas").style.display = "block"document.getElementById("orient").style.display = "none"}}document.getElementById("orient").style.display = "none";

orientationChange()

window.addEventListener("onorientationchange" in window " />
 
源码下载
1.CSDN资源下载（需要VIP）：https://download.csdn.net/download/qq_44273429/86861932
 2.从学长的资源网下载（更优惠）：https://code.haiyong.site/579/