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

JavaScript 游戏开发

 

本节课所讲内容：

1. JavaScript 游戏开发

主讲教师：Head老师

一. JavaScript 游戏开发

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

游戏截图：

全民飞机大战-开始游戏

页面布局  index.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;
}

效果：