游戏规则:
WSAD键控制大飞机移动方向,按下J键可发射子弹消灭敌机,每歼灭一架敌机可得10分;
与敌机相撞或者有遗漏敌机没有歼灭,则游戏结束
游戏显示如下图:
css部分:
<style>
.container {
width: 800px;
height: 500px;
margin: 10vh auto;
background: #000;
position: relative;
overflow: hidden;
}
.plane {
color: #fff;
width: 70px;
height: 70px;
position: absolute;
bottom: 10px;
left: calc(50% - 30px);
background: url(img/战斗机.png) no-repeat;
background-size: 70px 70px;
}
.bullet {
width: 25px;
height: 30px;
background: url(img/子弹.png) no-repeat;
background-size: 100% 100%;
position: absolute;
}
.enemy {
width: 40px;
height: 40px;
background: url(img/战斗机.png) no-repeat;
transform: rotate(180deg);
background-size: 100% 100%;
position: absolute;
top: 0;
}
.again {
width: 220px;
height: 160px;
border: 1px solid #ccc;
box-shadow: 5px 5px #ccc;
background: rgb(252, 187, 187);
text-align: center;
line-height: 80px;
color: #fff;
font-size: 20px;
position: absolute;
top: calc(50% - 80px);
left: calc(50% - 110px);
margin: 0 auto;
cursor: pointer;
}
i {
font-style: normal;
}
.sorce {
height: 30px;
font-size: 20px;
text-align: center;
font-weight: bold;
margin: 0 auto;
position: absolute;
top: 65px;
left: calc(50% - 100px