[知了堂學習筆記]_純JS製作《飛機大戰》遊戲_第1講(實現思路與遊戲介面的實現)

來源:互聯網
上載者:User

標籤:evel   相容   oat   屬性   分享   完成   color   等級   初步   

整體效果展示:

一、實現思路

   ,這是我完成該項目的一個邏輯圖,也是一個功能模組完成的順序圖。

  1. 遊戲介面的完成
  2. 英雄飛機對象實現,在實現發射子彈方法過程中,又引出了子彈對象並實現。在此時,英雄飛機能進行基本操作了。
  3. 敵機對象的實現,並且初步完成了boos出現(30s自動出現)。然後又引出了許多方法的處理,如英雄子彈擊中敵機和boos,英雄與敵機相撞等等。並一一解決。
  4. 隨後又設定了一些遊戲的參數,如血量,關卡數,等級,積分,必殺,道具對象等等。
  5. 最後又完成了一些協助工具功能,暫停遊戲,繼續遊戲,離開遊戲等。

當然,我做的並不是一個完全版,還有很多需要改進的地方。我只是初步實現了飛機大戰遊戲最初級的遊戲體驗,還需要多多學習去完善。

二、遊戲介面的完成(主介面)

展示:

要實現這個的介面,主要是用到了css中animation(動畫)屬性來進行設定。下面我會貼出我寫的代碼。

html代碼:

        <!--主介面(遊戲介面)-->        <div class="main" id="main">            <!--背景圖片盒子-->            <div class="bg" class="bg">                <!--背景圖片-->                <img src="img/bg1.jpg" id="back1"/>                <img src="img/bg1.jpg" id="back2"/>            </div>            <!--遊戲參數盒子-->            <div class="info">                <span>擊殺:</span><span id="killNum">0</span><br />                <span>得分:</span><span id="score">0</span><br />                <span>血量:</span><span id="blood">0</span><br />                <span>等級:</span><span id="level">0</span><br />                <span>炸彈:</span><span id="boom">0</span><br />                <img src="img/end1.jpg" width="80px" height="80px"/>            </div>            <!--暫停按鈕-->            <div class="btn_pause" onclick="stopGame()">                <!--暫停按鈕-->                <img src="img/pause1.png" />            </div>        </div>

 css樣式:

/* *主介面樣式 * */.main {    position: absolute;    width: 441px;    height: 632px;    left: 35%;    /*右移動*/    overflow: hidden; /*溢出部分隱藏不可見*/    z-index: -3;  /*元素的堆疊順序*/}/**  * 背景盒子  */.bg{    position: absolute;    width: 441px;    height: 632px;    z-index: -3;    /*     * -webkit-Google瀏覽器首碼是相容性處理,還有Firefox-moz-,IE-ms-     * 參數對應說明:動畫名(類似函數名,調用函數一樣)  時間(多久完成),播放次數(無限),速度(勻速播放)     */    -webkit-animation: bg 10s infinite linear;}/* * 背景圖片 * 取消兩張圖片間的斷層 */.bg img{    float: left;}@-webkit-keyframes bg{    from{margin-top: -932px}    to{margin-top: -150px}}

第一次發帖,還不熟悉套路,請大家多多包涵!

 以上為今天的第一講,如需瞭解更加深入的知識,請大家進入知了堂社區:http://www.zhiliaotang.com/portal.php;

[知了堂學習筆記]_純JS製作《飛機大戰》遊戲_第1講(實現思路與遊戲介面的實現)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.