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

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

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

本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个

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

在线演示地址： 源码也可在文末进行获取

✨ 项目基本结构

大致目录结构如下（共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 ? "orientationchange" : "resize", orientationChange, false);

function trace(v) {
          
   
	//    console.log(v)
}
var ccConfig = {
          
   
	"debugMode": 0,
	"showFPS": false,
	"frameRate": 30,
	"id": "gameCanvas",
	"renderMode": 1,
	"engineDir": "./../",
	"modules": ["cocos2d"],
	"jsList": []
}
document["ccConfig"] = ccConfig;
document.getElementById("img2").src = cc._loadingImage;
document.getElementById("img3").src = cc.tgideasLogo;
var GD = {
          
   }
GD.GETNUM = 0;
GD.SCORE = 0;
GD.isApp = true,
	GD.isWin = false;
GD.MAXHITUM = 0;
GD.SHARE = "我没能完成勘探新召唤师峡谷的，你行你来啊！"
GD.MAXTIME = 60;
GD.SOUND = false;
GD.USETIME = 0;

function complete() {
          
   
	orientationChange();
	document.getElementById("loadicon").style.display = "none";
	cc.game.run();
}

Base64Images.js

图片资源

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

源码下载

1.资源下载（需要VIP）： 2.从学长的资源网下载（更优惠）：