飞机大战
无聊写的一个飞机大战的游戏 贴个代码
每一步都有详细的解释。。
如果有兴趣交流的。。
可以给我留言。。。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.qq{
width: 200px;
height: 200px;
background: red;
position: fixed;
left:42%;
bottom: 10%;
z-index: 1;
background: url(img/飞机.png);
background-repeat:no-repeat ;
background-size: cover;
/*background: navy;*/
}
body{
width: 100%;
height: 500px;
overflow: hidden;
}
.beijing{
width: 100%;
position: relative;
/*background-image: url(img/3312.jpg);*/
}
.cc{
transition: 0.1s;
position: absolute;
top: -3300px;
}
.zidan{
width: 65px;
height: 65px;
position: fixed;
z-index: 10;
/*background: brown;*/
/*border-radius:50% ;*/
transition: 0.1s;
background-position: center;
background-size:100% 100%;
}
.dddd{
width: 300px;
height: 150px;
position: fixed;
top: 100px;
left: 50%;
margin-left: -150px;
z-index: 100;
border: 2px solid white;
line-height: 150px;
text-align: center;
font-size: 50px;
color: white;
opacity: 0;
transition: 2.5s;
}
.kaishi{
width: 500px;
height: 100px;
border: 2px solid white;
position: fixed;
left: 50%;
margin-left: -250px;
text-align: center;
line-height: 100px;
z-index: 99;
bottom: 30%;
font-size: 40px;
color: white;
}
.dazhan{
width: 100%;
height: 130px;
top: 30%;
font-size: 200px;
text-align: center;
line-height: 210px;
position: fixed;
z-index: 99;
color: white;
transition: 1.5s;
opacity: 1;
}
</style>
</head>
<body>
<div class="dddd">
等分：0
</div>
<div class="dazhan">
飞机大战UZI
</div>
<div class="kaishi">
开始游戏
</div>
<div class="qq"></div>
<div class="beijing">
<img src="img/3312.jpg" width="100%" class="cc"/>
</div>
<audio autoplay="autoplay"loop="loop" preload="auto" id="yinyue">
<source src="img/Joy Gruttmann - Schnappi.mp3" type="video/mp4">
</audio>
</body>
</html>
<script>
var yinyue=document.getElementById("yinyue")
var script=document.querySelector("script")
var qq=document.querySelector(".qq")
var body=document.querySelector("body")
var beijing=document.querySelector(".beijing")
var gao=window.innerHeight
body.style.height=gao+"px" //
beijing.style.height="4700px"
var cc=document.querySelector(".cc")
var dingshi,zidan,shangyi;
var dong=-3000;
//获取飞机头的位置；
var tou,bian,zuo,shang;
//创建子弹的函数
function cj(){
//qq是飞机
tou=window.getComputedStyle(qq,null).top;
bian=window.getComputedStyle(qq,null).left;
var a=document.createElement("div")
a.className="zidan"
zuo=parseInt(bian)+100-35;
shang=parseInt(tou)-140;
a.style.left=zuo+"px";
a.style.top=shang+"px";
a.style.backgroundImage="url(img/aixintwo.png)"
window.body.insertBefore(a,script)
}
//创建子弹结束
// var suoyouzidan=document.querySelectorAll(".zidan");
var wangxiazou;
var to=0;
var f=0;
var diren;
var arr=["img/uzi1.png","img/uzi2.png","img/uzi3.png","img/uzi4.png"]
var akk=[100,380,680,880];
var kaishi=document.querySelector(".kaishi");
kaishi.onclick=function(){
var dazhan=document.querySelector(".dazhan");
dazhan.style.opacity="0"
var dd=document.querySelector(".dddd")
dd.style.opacity="1"
this.style.display="none"
//子弹位移的定时器
shangyi=setInterval(function(){
var suoyouzidan=document.querySelectorAll(".zidan");
for(var i=0;i<suoyouzidan.length;i++ ){
if(parseInt(window.getComputedStyle(suoyouzidan[i],null).top)<0){
suoyouzidan[i].remove()
// console.log("删除了")
}
else{
// console.log("创建了")
var hh=parseInt(window.getComputedStyle(suoyouzidan[i],null).top)-25
suoyouzidan[i].style.top=hh+"px"
}
}
},100)
//子弹定时器结束
zidan=setInterval(function(){
cj()
},500)
//战斗背景图的移动
dingshi=setInterval(function(){
dong+=8
if(dong>0){
dong=-3000
cc.style.top=dong+"px"
cc.style.transition="0"
}
else{
cc.style.top=dong+"px"
cc.style.transition="0.2s"
}
},100)
//背景图移动结束
// var diren;
//创建敌人
// var arr=["img/uzi1.png","img/uzi2.png","img/uzi3.png","img/uzi4.png"]
// var akk=[0,300,600,800]
diren=setInterval(function(){
var suji=parseInt(Math.random()*(3-0+1)+0,10)
// console.log(suji)
for(var k=0;k<suji;k++){
var di=document.createElement("img")
di.src=arr[k];
di.width="350";
di.height="350";
di.style.position="fixed"
di.style.top="-400px"
di.style.left=akk[k]+"px"
di.style.transition="0.7s"
di.className="uzi"
window.body.insertBefore(di,script)
}
},800)
//创建敌人结束
// var wangxiazou;
// var to=0
// var f=0
//敌人往下走
wangxiazou=setInterval(function(){
var suoyoudiren=document.querySelectorAll(".uzi")
for(var i=0;i<suoyoudiren.length;i++){
var hh=parseInt(window.getComputedStyle(suoyoudiren[i],null).top)+80
suoyoudiren[i].style.top=hh+"px"
var suoyouzidan=document.querySelectorAll(".zidan");
}
var zidan=document.querySelectorAll(".zidan");
var uzi=document.querySelectorAll(".uzi")
for(var i=0;i<zidan.length;i++){
for(var k=0;k<uzi.length;k++){
if(zidan[i].offsetLeft-parseInt(window.getComputedStyle(uzi[k],null).left)<350&&zidan[i].offsetTop-uzi[k].offsetTop<350&&zidan[i].offsetLeft-uzi[k].offsetLeft>-70){
zidan[i].remove()
uzi[k].remove()
f+=1;
var dd=document.querySelector(".dddd")
dd.innerHTML="得分："+f;
}
}
}
},200)
//敌人往下走
}
//控制飞机的移动
var a,b,aa,bb,h;
qq.ontouchstart=function(e){
h=1
a=e.touches[0].clientX- qq.offsetLeft
b=e.touches[0].clientY-qq.offsetTop
}
document.ontouchmove=function(e){
e.preventDefault()
if(h==1){
aa=e.touches[0].clientX-a
bb=e.touches[0].clientY-b
if(aa<0){
aa=0;
}
else if(aa>window.innerWidth-qq.offsetWidth){
aa=window.innerWidth-qq.offsetWidth
}
if(bb<0){
bb=0
}
else if(bb>window.innerHeight-qq.offsetHeight){
bb=window.innerHeight-qq.offsetHeight
}
// console.log(aa,bb)
qq.style.left=aa+"px"
qq.style.top=bb+"px"
}
}
qq.ontouchend=function(){
h=0
}
//控制飞机移动结束
window.onload=function(){
document.addEventListener("touchstart", function(){
yinyue.play();
}, false);
}
</script>
</body>
</html>
