[知了堂学习笔记]_纯JS制作《飞机大战》游戏_第1讲(实现思路与游戏界面的实现)

整体效果展示：

一、实现思路

如图，这是我完成该项目的一个逻辑图，也是一个功能模块完成的顺序图。

游戏界面的完成
英雄飞机对象实现，在实现发射子弹方法过程中，又引出了子弹对象并实现。在此时，英雄飞机能进行基本操作了。
敌机对象的实现，并且初步完成了boos出现（30s自动出现）。然后又引出了许多方法的处理，如英雄子弹击中敌机和boos，英雄与敌机相撞等等。并一一解决。
随后又设置了一些游戏的参数，如血量，关卡数，等级，积分，必杀，道具对象等等。
最后又完成了一些辅助功能，暂停游戏，继续游戏，退出游戏等。

当然，我做的并不是一个完全版，还有很多需要改进的地方。我只是初步实现了飞机大战游戏最初级的游戏体验，还需要多多学习去完善。

二、游戏界面的完成（主界面）

展示：

要实现这个的界面，主要是用到了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-谷歌浏览器前缀是兼容性处理，还有火狐-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讲(实现思路与游戏界面的实现)

最新文章

热门文章