用jq表现出简易飞机大战效果
其html和css样式:
<h1 class="score">0</h1>
<div class="container">
<div class="plane"></div>
</div>
css:
.container {
width: 500px;
position: relative;
height: 80vh;
margin: 10vh auto;
overflow: hidden;
background: #000;
}
.plane {
width: 120px;
height: 80px;
background: url(./plane.png) 0 / 100% 100%;
position: absolute;
left: calc(50% - 40px);
bottom: 20px;
}
.bullet {
width: 8px;
height: 22px;
background: #ff0;
position: absolute;
border-radius: 10px 10px 0 0;
box-shadow: 0 5px 5px rgb(9, 95, 35);
}
.enemy {
width: 80px;
height: 50px;
background: url(./plane.png) 0 / 100% 100%;
position: absolute;