利用JS實(shí)現(xiàn)機(jī)器人總動員小游戲
前言
本節(jié)教程我會帶大家使用 HTML 、CSS和 JS 來制作一個(gè) 機(jī)器人總動員小游戲
本節(jié)示例將會實(shí)現(xiàn)如下所示的效果:
在線演示地址:https://code.haiyong.site/moyu/bwjqr
項(xiàng)目基本結(jié)構(gòu)
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" 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() } }
到此這篇關(guān)于利用JS實(shí)現(xiàn)機(jī)器人總動員小游戲的文章就介紹到這了,更多相關(guān)JS機(jī)器人總動員游戲內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)選項(xiàng)卡滑動切換
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)選項(xiàng)卡滑動切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10微信小程序 子級頁面返回父級并把子級參數(shù)帶回父級實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序 子級頁面返回父級并把子級參數(shù)帶回父級實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08JS獲取客戶端IP地址、MAC和主機(jī)名的7個(gè)方法匯總
這篇文章主要介紹了JS獲取客戶端IP地址、MAC和主機(jī)名的7個(gè)方法匯總,JS本身是不支持獲取IP地址等信息的,本文通過其它方法實(shí)現(xiàn),需要的朋友可以參考下2014-07-07JS中注入eval, Function等系統(tǒng)函數(shù)截獲動態(tài)代碼
這篇文章主要介紹了JS中注入eval, Function等系統(tǒng)函數(shù)截獲動態(tài)代碼,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04JavaScript拖拽、碰撞、重力及彈性運(yùn)動實(shí)例分析
這篇文章主要介紹了JavaScript拖拽、碰撞、重力及彈性運(yùn)動實(shí)現(xiàn)方法,涉及JavaScript數(shù)學(xué)運(yùn)算結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)運(yùn)動效果的相關(guān)技巧,需要的朋友可以參考下2016-01-01axios攔截器機(jī)制的實(shí)現(xiàn)原理詳解
axios 不僅提供了一套跨平臺請求,另外還提供了“攔截器”這一中間件機(jī)制,方便你在請求之前、響應(yīng)之后做些操作處理,本文給大家詳細(xì)介紹了axios 攔截器機(jī)制是如何實(shí)現(xiàn)的,需要的朋友可以參考下2024-05-05javascript 局部頁面打印實(shí)現(xiàn)代碼
Web打印有很多方式,水晶報(bào)表使用的恐怕比較多,但這東西是收費(fèi)軟件,老板說不能用:(。2009-08-08el-date-picker?限制開始時(shí)間和結(jié)束時(shí)間的代碼實(shí)現(xiàn)
在Vue.js中使用Element?UI庫的el-date-picker組件時(shí),可以通過設(shè)置picker-options來限制開始時(shí)間和結(jié)束時(shí)間的選擇范圍,下面通過例子介紹el-date-picker?限制開始時(shí)間和結(jié)束時(shí)間的實(shí)現(xiàn),感興趣的朋友一起看看吧2024-08-08