页面主体部分
<body>
<div id="mainScreen">
<div id="bg1" class="bg"></div>
<div id="bg2" class="bg"></div>
<div id="airplane"></div>.
</div>
</body>
页面css部分
<style type="text/css">
//背景样式
#mainScreen{
width:背景宽；
height:背景高；
margin:0 auto;
position:relative;
overflow:hidden;
}
.bg{
width:背景宽;
height:背景高;
position:absolute;
background-image:背景图片链接;
}
#bg2{
top:-背景高；}
//飞机样式
#airplane{
wdith:飞机图片宽;
height：飞机图片高;
background-image:飞机图片链接;
position:absolute;
left:距背景左边距离;
top:距背景上边距离;
}
//子弹样式
.bullent{
width:子弹宽
height:子弹高
position:absolute;
background-image:子弹图片链接;
background-size:子弹宽 子弹高;}
//坦克样式
.tank{
width:坦克宽
height:坦克高
position:absolute;
background-image:坦克图片链接;
background-size:坦克宽 坦克高;}
</style>
页面js部分
<script type="text/javascript">
//让背景动起来
var bg1 = document.getElementById("bg1")
var bg2 = document.getElementById("bg2")
var bgtimer = setInterval(function(){
bg1.style.top = bg1.offsetTop+1+"px"
bg2.style.top = bg2.offsetTop+1+"px"
if(bg1.offsetTop>=背景高){
bg1.offsetTop = -背景高}else if(bg2.offsetTop>=背景高）{
bg1.offsetTop = -背景高
}
},20)
//让飞机动起来(拖拽效果)
var mainscreen = document.getElementById("mainscreen")
var airplane = document.getElementById("airplane")
//给飞机添加按下鼠标事件
airplane.addEventListener("mousedown",function(e){
var ev=e || window.event
var basex=ev.pageX
var basey=ev.pageY
movex=0
movey=0
//给屏幕添加鼠标移动事件
mainscreen.addEventListener("mousemove",function(){
var ee=e || window.event
movex=ee.pageX-basex
basex=ee.pageX
movey=ee.pageY-basey
basey=ee.pageY
airplane.style.left = airplane.offsetLeft+movex+"px"
airplane.style.top = airplane.offsetTop+movey+"px"
},false)
}
,false)
//发射子弹
var timerBullent = setInterval(function(){
var bullent = document.creatElement("div")
mainscreen.appendChild(bullent)
bullent.class="bullent"
bullent.style.left=bullent.offsetLeft+ 飞机宽度一半值 +"px"
bullent.style.top=bullent.offsetTop -10 +"px"
//让子弹推进
var timerBullentMove = setInterval(function(){
bullent.style.top = bullent.offsetTop - 5+"px"
if(bullent.offsetTop<=-20) //子弹移动到屏幕上方，则终止这个子弹的定时器，并将这个子弹移除
clearInterval(timerBullentMove)
mainscreen.removeChild(bullent)
},100)
bullent.timer=timerBullentMove
},1000)
//坦克下落
var timerTank = setInterval(function(){
//创建坦克
var tank = document.creatElement("div")
mainscreen.appendChild(tank)
tank.class="tank"
tank.style.left=randonNum(0,背景宽度-坦克宽度)+"px" //调用随机函数，生成top：0水平方向随机位置的坦克
tank.style.top="0px"
//让坦克下落
var timerTankMove = setInterval(function(){
tank.style.top = tank.offsetTop + 10+"px"
if(tank.offsetTop >= 背景高) //坦克出界则终止坦克移动的定时器，并将这个坦克移除
clearInterval(timerTankMove)
mainscreen.removeChild(tank)
},100)
tank.timer = timerTankMove
},1000)
//碰撞检测（此处直接调用碰撞检测函数，用pzjc(x,y)表示 ）
//子弹击中坦克检测
var timerPZJC = setInterval(function(){
var allTanks = document.getElementByClassName("tank")
var allBullents = document.getElementByClassName("bullent")
for(var i=0;i<allTanks.length;i++)
for(var j=0;j<allBullents.length;j++)
{
var a=allTanks[i]
var b=allBullents[j]
if ( pzjc(a,b) ){
clearInterval(a.timer)
clearInterval(b.timer)
mainscreen.removeChild(a)
mainscreen.removeChild(a)
}
}
},200)
//死亡检测
var timerDeath = setInterval(function(){
var allTanks = document.getElementByClassName("tank")
for(var i=0;i<allTanks.length;i++) {
if ( pzjc(airplane,allTanks[i]) ){ //飞机与坦克碰撞，则结束所有定时器
for(var j=1;i<100;j++)
{ clearInterval(j) }
}
}
},200)
</script>
1654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
