<style> #mainBox{ overflow:hidden; position:relative; 320px; height:568px; background:url(images/background_1.png) no-repeat; margin:30px auto 0; } </style>
<div id="mainBox"></div> <script type="text/javascript" src="js/main1.js"></script>
js/main1.js
var mainBox = document.getElementById("mainBox");//获取主界面 var ourPlane = new myPlane(0,0);//创建本飞机对象实例 ourPlane.createPlane("selfPlane");//调用创建本方飞机方法 并且传入本方飞机节点ID名 var selfPlane = document.getElementById("selfPlane");//获取本方飞机节点 ourPlane.shoot();//调用本方飞机的射击方法 mainBox.onmousemove = function(e){ var e = event||window.event; var oLeft = e.clientX - mainBox.offsetLeft - selfPlane.offsetWidth/2; var oTop = e.clientY - mainBox.offsetTop - selfPlane.offsetHeight/2; if(oLeft<=0){ oLeft=0; } if(oLeft>=(mainBox.offsetWidth-selfPlane.offsetWidth)){ oLeft = mainBox.offsetWidth-selfPlane.offsetWidth; } if(oTop<=0){ oTop=0; } if(oTop>=(mainBox.offsetHeight-selfPlane.offsetHeight)){ oTop = mainBox.offsetHeight-selfPlane.offsetHeight; } selfPlane.style.left = oLeft + "px"; selfPlane.style.top = oTop + "px"; mainBox.style.cursor = "none"; } mainBox.onmouseout = function(){ mainBox.style.cursor = ""; } function plane(x,y,hp,imgsrc,speed){ this.planex = x; this.planey = y; this.planeSpeed = speed; this.hp = hp; this.imgsrc = imgsrc; this.createPlane = function(id){ this.planeNode = document.createElement("img"); if(id){ this.planeNode.id = id } this.planeNode.src = this.imgsrc; this.planeNode.style.left = this.planex+"px"; this.planeNode.style.top = this.planey+"px"; this.planeNode.style.position = "absolute"; mainBox.appendChild(this.planeNode); if(this.planeSpeed!=0){ this.move(); } } this.move = function(){ var that = this; var step = 0; this.time = setInterval(function(){ var bullets = document.getElementsByClassName("bullets"); step += that.planeSpeed; that.planeNode.style.top = step + "px"; for(var i=0;i<bullets.length;i++){ if((parseInt(that.planeNode.style.left)<=parseInt(bullets[i].style.left))&&((parseInt(that.planeNode.style.left)+that.planeNode.offsetWidth)>=parseInt(bullets[i].style.left))&&((parseInt(that.planeNode.style.top)+that.planeNode.offsetHeight)>=parseInt(bullets[i].style.top))){ that.hp--; bullets[i].parentNode.removeChild(bullets[i]); } } if(that.hp<=0){ clearInterval(that.time); that.planeNode.parentNode.removeChild(that.planeNode); }else if(parseInt(that.planeNode.style.top) >= mainBox.offsetHeight+that.planeNode.offsetHeight){ clearInterval(that.time); that.planeNode.parentNode.removeChild(that.planeNode); } },50) } } function myPlane(X,Y){ plane.call(this,X,Y,1,"images/我的飞机.gif",0); this.shoot = function(){ this.time = setInterval(function(){ oLeft = parseInt(selfPlane.style.left)+selfPlane.offsetWidth/2+"px"; oTop = selfPlane.style.top; var myBullet = new bullet(oLeft,oTop); myBullet.createBullet(); },100) } this.createEnemy = function(){ var that = this; function enemy(X,Y,hp,imgsrc,speed){ plane.call(this,X,Y,hp,imgsrc,speed); } this.time1 = setInterval(function(){ for(var i=0;i<randomNum(1,3);i++){ var num = randomNum(1,10); if(num<=6){ num = 1; }else if(num>6&&num<=9){ num = 2; }else{ num = 3; } var createX = [randomNum(16,270),randomNum(0,274),randomNum(0,210)]; var imgsrc = "images/enemy"+num+"_fly_1.png"; var enemyPlane = new enemy(createX[num-1],0,Math.pow(num,2),imgsrc,(1/num)*6); enemyPlane.createPlane(); } },2000) } this.createEnemy(); } function bullet(X,Y){ this.bulletx = X; this.bullety = Y; this.createBullet = function(){ this.bulletNode = document.createElement("img"); this.bulletNode.src = "images/bullet1.png"; this.bulletNode.className = "bullets"; this.bulletNode.style.position = "absolute"; this.bulletNode.style.left = this.bulletx; this.bulletNode.style.top = this.bullety; mainBox.appendChild(this.bulletNode); this.move(); } this.move = function(){ var speed = 2; var that = this; this.time = setInterval(function(){ var step = 0; step -= speed; that.bulletNode.style.top = parseInt(that.bulletNode.style.top) + step + "px"; if(parseInt(that.bulletNode.style.top)<=0){ clearInterval(that.time); that.bulletNode.parentNode.removeChild(that.bulletNode); } },1) } } function randomNum(min,max){ return Math.floor(Math.random()*max+min); }