快来一起打飞机、大牛带你用最2代码、写出外挂版微信打飞机

一、简介

　　还记得许多年前的春天，你我一起“打飞机”。

　　那就一起写个打飞机游戏吧：

二、HTML内容

　　HTML内容把需要的图片资源以相应标签格式写出即可，分为以下几部分：

- 　　背景图片
- 　　自己战机的图片
- 　　子弹的图片
- 　　敌机的图片
- 　　敌机挂了的图片
- 计算分数的位置预留

<base href="http://images.cnblogs.com/likecs_com/suoning/860380/" />

<div class="bg">
    <div class="me-plan"></div>
    <div id="play_num"></div>
    <div class="bullet">
        <img src="o_cartridge.png">
    </div>
    <div class="x">
        <img class="lift" src="o_plain1.png">
        <img class="die" src="o_die1.png">
    </div>
    <div class="x2">
        <img class="lift" src="o_plain2.png">
        <img class="die" src="o_die2.png">
    </div>
</div>

HTML代码

三、CSS布局

　　CSS基础知识戳这

　　CSS代码块只需把HTML代码块的图片进程简单布局，分以下几部分：

- 　　背景图片的宽与高、居中、边框、超出边界隐藏、relative相对定位
- 　　自己战机的宽与高、absolute相对父级定位与z-index优先级最高
- 　　自己战机默认隐藏，游戏开始则滑出
- 　　子弹、敌机的absolute相对父级定位
- 　　子弹、敌机的默认隐藏，游戏开始则通过克隆展示
- 　　敌机死亡的图片定位与隐藏
- 　　分数的字体大小设置及定位

<base href="http://images.cnblogs.com/likecs_com/suoning/860380/" />

<style>
        .bg {
            background-image: url("o_bg.jpg");
            height: 500px;
            width: 300px;
            position: relative;
            margin-left: 40%;
            margin-top: 5%;
            overflow: hidden;
            border: 1px;
        }

        .me-plan {
            width: 99px;
            height: 112px;
            background-image: url("o_me.png");
            position: absolute;
            top: 80%;
            left: 35%;
            display: none;
            z-index: 666;
        }

        .bullet {
            position: absolute;
            display: none;
            left: -10px;
        }

        .x, .x2 {
            position: absolute;
            display: none;
        }

        .lift {
            position: absolute;
            top: -110px;
        }

        .die {
            display: none;
        }

        #play_num {
            font-size: 30px;
        }
    </style>

CSS代码