JavaScript飞机大战

引言

  • 此游戏图片参照网络,自己依靠html、css、JavaScript编写,动画全部依靠原生js所写,没有使用其他js库。游戏按下鼠标即可拖动飞机进行移动。文章末尾有源代码及图片下载链接。

准备工作

  • 准备飞机大战各种元素图片(图片来源网络)
  • 背景图片(略大需要前往链接下载)
  • 飞机与敌机与子弹
    飞机       敌机      在这里插入图片描述

代码逻辑

  • 所用动画都是通过改变图片位置来进行实现的。
  • 飞机移动通过鼠标的监听进行实现的。
  • 碰撞检测远离:
    • 图片1的距离背景左侧距离加上图片1的宽度<图片2距离左侧的距离
    • 图片2的距离背景左侧距离加上图片2的宽度<图片1距离左侧的距离
    • 图片1的距离背景上侧距离>图片2距离上侧的距离加上图片2的高度
    • 图片2的距离背景上侧距离>图片1距离上侧的距离加上图片1的高度
    • 当以上四个条件成立其中一条图片都没有发生碰撞,当全部不满足时候两张图片发生碰撞。取反即可得碰撞发生情况。

HTML代码部分

<html>
	<head>
		<meta charset="utf-8" />
		<title>飞机title>
		<link rel="stylesheet" href="youxi.css" />
	head>
	<body>
		<div id="box">
			<div class="beijing" id="bj1">
			div>
			<div class="beijing" id="bj2">
			div>
			<div id="feiji">
			div>
			<div id="jishu">
				得分:0
			div>
			<div id="over">
			div>
		div>
	body>
	<script type="text/javascript" src="youxi.js" >script>
html>

css部分代码

.{
	margin: 0;
	padding: 0;
}
#box{
	width:470px;
	height:800px;
	overflow:hidden;
	margin:0 auto;
	position:relative;
}
.beijing{
	height:801px;
	width:470px;
	background-image:url(img/beijing.jpg);
	margin:0 auto;
	position:absolute
}
#bj1{
	top: 0;
}
#bj2{
	top: -800px;
}

#feiji{
	width:50px;
	height: 62px;
	background-image: url(img/feiji.png);
	position: absolute;
	top:710px;
	left: 210px;
}
.zidan{
	height:15px;
	width:6px;
	background-image:url(img/zidan.png);
	position:absolute;
	background-size: 6px 15px;
}

.diji{
	width:40px;
	height:30px;
	background-image:url(img/diji.png);
	position:absolute;
}
#over{
	width:280px;
	height:230px;
	background-image:url(img/over.png);
	background-size:280px 230px;
	position:absolute;
	top:285px;
	left:95px;
	display:none;
	z-index:1;
}

#jishu{
	position:absolute;
	top:20px;
	left:20px;
	font-size:25px;
}

JavaScript

var box=document.getElementById("box")
var bj1= document.getElementById("bj1")
var bj2= document.getElementById("bj2")

var timer = setInterval(function(){
	a = parseInt(getComputedStyle(bj1, null)["top"])+1
	b = parseInt(getComputedStyle(bj2, null)["top"])+1
	if (a>799){
		a = -800
	}
	if (b>799){
		b = -800
	}
	bj1.style.top=a
	bj2.style.top=b
},5)

var feiji=document.getElementById("feiji")

feiji.onmousedown=function(e){
	var ev = e || window.event
	posX = ev.clientX-feiji.offsetLeft-box.offsetLeft
	posY = ev.clientY-feiji.offsetTop-box.offsetTop
	console.log(posX,posY)
	document.onmousemove = function(e){
		var ev = e || window.event
		feijiX = ev.clientX-box.offsetLeft-posX
		feijiY = ev.clientY-box.offsetTop-posY
		if(feijiX<0){
			feijiX=0
		}
		if(feijiX>420){
			feijiX=420
		}
		if(feijiY<0){
			feijiY=0
		}
		if(feijiY>738){
			feijiY=738
		}
		feiji.style.left = feijiX
		feiji.style.top = feijiY
	}
	
}
document.onmouseup=function(){
	document.onmousemove = null
	// document.onmouseuo
}

//创建敌机

var timerdiji=setInterval(function(){
	var diji=document.createElement("div")
	box.appendChild(diji)
	diji.className="diji"
	m =Math.floor(Math.random()*400)
	diji.style.left=35+m
	diji.style.top=-30
	var timers=setInterval(function(){
		diji.style.top=diji.offsetTop+5
		if(diji.offsetTop>800){
			clearInterval(timers)
			box.removeChild(diji)
		}
	},20)
},150)

//创建子弹
var timerzidan=setInterval(function(){
	var zidan=document.createElement('div')
	box.appendChild(zidan)
	zidan.className='zidan'
	zidan.style.left=feiji.offsetLeft+22+'px'
	zidan.style.top=feiji.offsetTop-15+'px'
	var timers=setInterval(function(){
		zidan.style.top=zidan.offsetTop-2+'px'
		if(zidan.offsetTop<-20){
			clearInterval(timers)
			box.removeChild(zidan)
		}
	},1)
},150)




// //碰撞检测
function crash(object1, object2){
	var ob1_left=object1.offsetLeft
	var ob1_top=object1.offsetTop	
	var ob1_right=object1.offsetLeft+object1.offsetWidth
	var ob1_bottom=object1.offsetTop+object1.offsetHeight	
	var ob2_left=object2.offsetLeft
	var ob2_top=object2.offsetTop
	var ob2_right=object2.offsetLeft+object2.offsetWidth
	var ob2_bottom=object2.offsetTop+object2.offsetHeight		
	
	if(ob1_top>ob2_bottom){
		return false
	}else if(ob1_bottom<ob2_top){
		return false
	}else if(ob1_left>ob2_right){
		return false
	}else if(ob1_right<ob2_left){
		return false
	}else{
		return true
	}
}

var jishu=document.getElementById("jishu")

var number=0

//子弹与敌机检测
var air_timer=setInterval(function(){
	var diji=document.getElementsByClassName("diji")
	var zidan=document.getElementsByClassName("zidan")
	for (var i=0;i<diji.length;i++){
		for (var j=0;j<zidan.length;j++){
			if(crash(zidan[j],diji[i])){
				box.removeChild(zidan[j])
				box.removeChild(diji[i])
				number=number+50
				jishu.innerText="得分:"+number
				break
			}
		}
	}
},1)



var over=document.getElementById("over")
//子弹与敌机检测
var air_timer=setInterval(function(){
	var diji=document.getElementsByClassName("diji")
	for (var i=0;i<diji.length;i++){
		if(crash(feiji,diji[i])){
			box.removeChild(feiji)
			clearTimeout(timerdiji)
			clearTimeout(timerzidan)
			clearTimeout(timer)
			over.style.display = "inline"
		}
	}
},1)

总结

  • 代码中许多类使用了拼音(英语不好),由于初学js时候所写,没有使用jQuery等库,所以代码显示比较冗长且零乱,如有BUG请理解。
  • 源代码及图片:源代码

你可能感兴趣的:(JavaScript飞机大战)