利用JS實(shí)現(xiàn)機(jī)器人總動(dòng)員小游戲

更新時(shí)間：2022年11月17日 14:07:57 作者：海擁

這篇文章主要介紹了如何利用HTML+CSS+JS編寫(xiě)一個(gè)機(jī)器人總動(dòng)員小游戲,代碼簡(jiǎn)單易懂對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

本節(jié)教程我會(huì)帶大家使用 HTML 、CSS和 JS 來(lái)制作一個(gè) 機(jī)器人總動(dòng)員小游戲

本節(jié)示例將會(huì)實(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ī)器人總動(dòng)員小游戲的文章就介紹到這了,更多相關(guān)JS機(jī)器人總動(dòng)員游戲內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: