javaScript写的飞机大战小游戏

Fmm419

已于 2022-02-16 13:30:40 修改

阅读量2.5k

点赞数

文章标签： javascript html css

于 2022-02-16 13:29:55 首次发布

本文链接：https://blog.csdn.net/Fmm419/article/details/122961338

版权

效果图

html文件

<!DOCTYPE html>
<html lang='zh'>
<head>
    <meta charset='UTF-8'>
    <title>mm</title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
            user-select:none;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 游戏等级 -->
        <div id="level">
            <h1>飞机大战 Lv1</h1>
            <p>简答模式</p>
            <p>一般模式</p>
            <p>困难模式</p>
            <p>地狱模式</p>
        </div>
        <!-- 游戏界面 -->
        <div id="map">
            <!-- 我军飞机 -->
            <!-- 敌军飞机1 -->
            <!-- 敌军飞机2 -->
            <div class="allFire">
                <!-- 我军子弹 -->
            </div>
        </div>
        <!-- 游戏得分 -->
        <div id="score">0</div>
        <!-- 结束游戏的界面 -->
        <div id="settlement">
            <div>最终得分:<span class="totalscore">10</span></div>
            <div>获得评价:<span class="appraise">青铜</span></div>
            <button>重新开始</button>
        </div>
    </div>
    <script src="./js/index.js"></script>
</body>
</html>

css文件

.wrap{
    position:relative;
    width: 400px;
    height: 600px;
    margin:10px auto;
    overflow:hidden;
}
/* 游戏等级 */
#level{
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    width:100%;
    height:100%;
    font-family:"楷体";
    background:url(../img/bg_1.jpg)repeat 0/cover;
}
#level h1{
    width:100%;
    color:#fff;
    text-align:center;
    padding:100px 0;
}
#level p{
    text-align:center;
    padding:10px 20px;
    letter-spacing:5px;
    font-weight:bold;
    background-color:#fff;
    margin:30px 120px;
    border-radius:5px;
    box-shadow:1px 1px 10px 1px #aaa;
}
#level p:hover{
    cursor:pointer;
    background-color:#4D6BA2;
    color:#fff;
}
/*  游戏界面  */
#map{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:url(../img/bg_2.jpg)repeat 0/cover;
}
#map .plane,/*我军飞机*/
    .enemy,/*敌军飞机*/
    .boom,/*敌军飞机爆炸*/
    .