利用JS实现机器人总动员小游戏
海拥 人气:0前言
本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 机器人总动员小游戏
本节示例将会实现如下所示的效果:
在线演示地址:https://code.haiyong.site/moyu/bwjqr
项目基本结构
HTML源码
<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/" rel="external nofollow" 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[c], g = new Image, g.src = f.src, this.loadedImages[f.name] = g; a() } }
加载全部内容