第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-1 页面开发

JavaScript 游戏开发

本节课所讲内容：

JavaScript 游戏开发

主讲教师：Head老师

一. JavaScript 游戏开发

本节课我们串联之前所学内容，使用HTML+JavaScript开发一款游戏（全民飞机大战）

游戏截图：

第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-1 页面开发-LMLPHP

全民飞机大战-开始游戏

页面布局 index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全民飞机大战-1</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
    <div id="bg">
        <div class="logoBg">
            <div id="logo">

            </div>
        </div>
        <div name="buttonStart" id="buttonStart">

        </div>
    </div>

    <script>
        // 推荐使用
        var buttonStart = document.getElementById("buttonStart");
        buttonStart.onclick = function gameStart(){
            alert(1);
        }
    </script>
</body>
</html>

css文件

*{
    padding: 0;
    margin: 0;
}
#bg{
    width: 394px;
    height: 706px;
    background: url(../img/6.png);
}
.logoBg{
    width: 394px;
    height: 340px;
    /* border: 1px solid red; */
    padding-top: 50px;
}
#logo{
    width: 360px;
    height: 200px;
    background: url(../img/7.png) no-repeat;
    background-size: 100%;
    /* 图片居中 */
    margin: 0 auto;
}
#buttonStart{
    width: 200px;
    height: 111px;
    background: url(../img/5.png) no-repeat;
    background-size: 100%;
    margin: 0 auto;
}
#buttonStart:hover{
    margin: auto;
    padding-top: 20px;
    width: 230px;
    height: 111px;
    background: url(../img/5.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
}

效果：

第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-1 页面开发-LMLPHP

老张谋

第二章 web前端开发工程师--JavaScript 飞机大战游戏开发 2-1 页面开发