共计 2518 个字符，预计需要花费 7 分钟才能阅读完成。
- 💂 网站举荐:【神级源码资源网】【摸鱼小游戏】
- 🤟 有趣风趣的前端学习课程：👉28 个案例趣学前端
- 💅 想寻找独特学习交换、摸鱼划水的小伙伴，请点击【摸鱼学习交换群】
- 💬 收费且实用的计算机相关常识题库：👉进来逛逛
给大家安利一个收费且实用的前端刷题（面经大全）网站，👉点击跳转到网站。
本节教程我会带大家应用 HTML、CSS 和 JS 来制作一个 机器人总动员小游戏
本节示例将会实现如下所示的成果：
在线演示地址：https://code.haiyong.site/moyu/bwjqr
源码也可在文末进行获取
✨ 前言
🕹️ 本文已收录于🎖️100 个 HTML 小游戏专栏：100 个 HTML 小游戏
🎮 目前已有 100+ 小游戏，源码在继续更新中，前 100 位订阅收费，先到先得。
🐬 订阅专栏后可浏览 100 个 HTML 小游戏文章；还可私聊进支付一百个小游戏源码。
✨ 我的项目根本构造
大抵目录构造如下（共 204 个子文件）：
├── css
│ └── style.css
├── js
│ └── script.js
├── images
│ ├── back1.png
│ ├── ball.png
│ ├── circle1.png
│ ├── elem1.png
│ ...
│ └── unit.png
└── index.htmlHTML 源码
<body>
<div id="main_container">
<div id="progress_container">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="progress">
<div><a id="tt_load_logo_c" href="https://code.haiyong.site/" target="_blank"><img id="tt_load_logo" border=""src="logo.png"></a></div>
<div id="tt_load_progress_cont">
<div id="tt_load_progress" > </div>
</div>
<div id="tt_load_play"><img id="tt_load_button" src="tt_load_button.png" height="55px"></div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="screen_background_container" align="center">
<div id="screen_background_wrapper"><canvas
id="screen_background"></canvas><canvas
id="screen_background2"></canvas></div>
</div>
<div id="screen_container" align="center">
<div id="screen_wrapper"><canvas id="screen">You browser does
not support this application :(</canvas><canvas id="screen2"></canvas></div>
</div>
</div>
<div id="p2l_container" align="center"><img
id="p2l" src="./robot_files/p2l.png" style="padding-top: 100px;"></div> CSS 源码
body
body{
margin: 0px;
padding: 0px;
background-color: rgb(0, 0, 0);
overflow: hidden;
}progress_container
#progress_container{
height: 2048px;
display: none;
width: 1536px;
position: absolute;
left: 0px;
top: 0px;
background: rgb(102, 102, 102);
z-index: 1000;
}p2l_container
#p2l_container {
width: 100%;
height: 746px;
position: absolute;
left: 0px;
top: 0px;
display: none;
z-index: 1000;
background: #fff;
}JS 源码
js 代码较多，这里提供局部，残缺源码能够在文末下载
var CRENDER_DEBUG = !1;
function ImagesPreloader() {function a() {
var e = 0,
f = 0,
g;
for (g in c.loadedImages) c.loadedImages[g].complete && e++,
f++;
e >= f ? c.endCallback && c.endCallback(c.loadedImages) : (c.processCallback && c.processCallback(Math.floor(e / f * 100)), setTimeout(a, 50))
}
var c = this;
this.curItem = -1;
this.loadedImages = {};
this.processCallback = this.endCallback = this.data = null;
this.load = function(c, f, g) {
this.data = c;
this.endCallback = f;
this.processCallback = g;
for (c = 0; c < this.data.length; c++) f = this.data,
g = new Image,
g.src = f.src,
this.loadedImages[f.name] = g;
a()}
}图片资源
一共两百多张图片，全都打包放在文末的下载链接里了。
源码下载
1.CSDN 资源下载（须要 VIP）：https://download.csdn.net/download/qq_44273429/86830451
2. 从学长的资源网下载（更优惠）：https://code.haiyong.site/535/
正文完
