js面向对象编程小游戏2——飞机大战
实现的功能：页面元素有敌机，用户的飞机，子弹，可实现子弹将敌机炸毁，碰撞炸毁等不同的功能
代码如下：
html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>title>
<style type="text/css">
.map
{
position: relative;
width: 400px;
height: 700px;
border: 1px solid black;
margin: 0 auto;
overflow: hidden;
cursor: none; /*让鼠标坐标消失*/
}
.bgimage{
width: 400px;
height: 700px;
position: absolute;
background: url("./img/12.png") 0 0 no-repeat;
background-size: 400px 700px;
}
span{
color: red;
font-weight: bold;
position: absolute;
right: 0;
top: 0;
z-index: 3;
}
style>
head>
<body>
<div class="map">
<span id="fen">得分：span>
<div class="bgimage">div>
<div class="bgimage">div>
div>
<script>
//获取地图
var Map=document.getElementsByClassName("map")[0]; //注意加分号
var scolltotal=0;
var sc=document.getElementById("fen");
//背景图片变化样式
/* var bgimg=document.getElementsByClassName("bgimage")
bgimg[0].style.top=-700+"px"
bgimg[1].style.top=0+"px"
setInterval(function(){
for(var i=0;i
{
var top=parseInt(bgimg[i].style.top);
top++;
if(top>=700)
{
top=-700;
}
bgimg[i].style.top=top+"px";
}
},100)*/
//为了简化代码将定时器封装成函数
var bgimg = document.getElementsByClassName("bgimage");
bgimg[0].style.top = -700 + "px";
bgimg[1].style.top = 0 + "px";
setInterval(function ()
{
for (var i = 0; i < bgimg.length; i++)
{
var top = parseInt(bgimg[i].style.top);
top++;
if (top >= 700) {
top = -700;
}
bgimg[i].style.top = top + "px";
}
}, 100)
})();
//创建坦克的父类和实例化的子类
var User;
function user(){
this.width=60;
this.height=70;
this._user=null;
this.src="./img/14.gif";
this.x;
this.y;
this.creatuser=function(/*x,y*/)
{
if(this._user==null){
this._user=document.createElement("img")
this._user.style.position="absolute"
this._user.style.width=this.width+"px"
this._user.style.height=this.height+"px"
this._user.style.zIndex=1;
this._user.src=this.src
Map.appendChild(this._user)
this._user.style.left=170+"px"
this._user.style.top=600+"px"
}
/* this._user.style.left=x+"px" //方法2，直接在坦克创建方法里传参并且再if外面改
this._user.style.top=y+"px"*/
};
//在类里再创建一个泰克随鼠标移动的方法
this.usemove=function(x,y) //方法1新创建一个父类方法传参，传的是鼠标的坐标
{
this.x=x
this.y=y
this._user.style.left=x+"px";
this._user.style.top=y+"px";
}
}
//创建子弹父类和子类
var Dan
function dan()
{
this.width=10;
this.height=20;
this._shouter=null;
this.src="./img/15.png";
this.x;
this.y;
//创建子弹出来的方法
this.creatdan=function(user) //参数如果穿的是对象，表明对象里面的所有属性和方法都可以通过.获取
{
//利用参数算出坦克正上方的位置坐标赋值给子弹初始值
this.x=parseInt(user._user.style.left)+user.width/2-this.width/2
this.y=parseInt(user._user.style.top)-this.height;
if(this._shouter==null)
{
this._shouter=document.createElement("img")
this._shouter.style.position="absolute"
this._shouter.style.zIndex=1;
this._shouter.src=this.src
this._shouter.style.width=this.width+"px"
this._shouter.style.height=this.height+"px"
Map.appendChild(this._shouter)
}
this._shouter.style.left=this.x+"px"
this._shouter.style.top=this.y+"px"
}
//创建子弹发射即移动的方法同理有两种方法
this.danmove=function(i,arr) { //传的是当前子弹的实例化对象和对应的索引
this.y -= 2;
//当子弹飞出界面的时候 删除
if (this.y <= 0) {
this._shouter.remove();
arr.splice(i,1);//t同理子弹飞出屏幕之后也得删除实例化对象
}
this._shouter.style.left = this.x + "px"
this._shouter.style.top = this.y + "px"
}
//创建敌机和子弹相撞消失的方法，注意是在子弹的类里创建的方法
this.meet=function(dizu,i,arr){
//判断相遇的坐标条件
for(var key in dizu)
{
//注意因为此处this代表的是当前的子弹元素，而不是对应的子弹的实例化对象，要拿到对象必须通过传参
if(this.y>dizu[key].y&&this.y<=dizu[key].y+dizu[key].height&&this.x>dizu[key].x-this.width&&this.x
{
//坐标条件满足之后还要再判断血量血量为0之后再移除敌机，否则移除当前碰撞子弹即可
dizu[key].blood-=1
if(dizu[key].blood<=0)
{
/*console.log(dizu[key].scoll)*/
dizu[key]._enemy.remove() //移除创建的敌机dom元素
dizu.splice(key,1) //移除元素对应的实例化对象
scolltotal+=dizu[key].scoll
//console.log(scolltotal)
sc.innerHTML="得分："+scolltotal
}
this._shouter.remove() //移除当前与敌机碰撞的子弹的dom元素
arr.splice(i,1) //穿的参数为当前碰撞的那颗子弹的索引
}
}
}
}
//创建敌机子类和父类
var Diji;
//目的为了实现实例化不同的子类，大小图片都不一样
function diji(w,h,b,s,f){
this.width=w||30;
this.height=h||40;
this.blood=b||3;
this.scoll=f||100
this.src=s || "./img/17.png";
this.x;
this.y;
this.speed=3;
this._enemy=null;
//创建敌机方法
this.creatdiji=function(){
//随机敌机刚开始出现的lefttop值
this.x=Math.random()*(400-this.width);
this.y=-this.height;
if(this._enemy==null)
{
this._enemy=document.createElement("img")
this._enemy.style.position="absolute";
this._enemy.style.width=this.width+"px";
this._enemy.style.height=this.height+"px";
this._enemy.style.zIndex=2;
this._enemy.src=this.src;
Map.appendChild(this._enemy);
}
this._enemy.style.left=this.x+"px";
this._enemy.style.top=this.y+"px"
};
//敌机移动方法
this.dijimove=function(i,arr1)
{
this.y+=this.speed;
if(this.y>700){
this._enemy.remove() ; //移除创建的敌机对象，但是敌机对应的实例化对象还在
arr1.splice(i,1); //同理再删除创建的实例化对象
}
this._enemy.style.top=this.y+"px"
//判断敌机是否和用户的飞机相撞，若是，游戏结束
//数值是为了缩小碰撞范围
if(User.x>this.x-User.width+20&&User.x<this.x+this.width-20&&User.y<this.y+this.height-10&&User.y>this.y-User.height+10)
{
alert("游戏结束是否返回")
window.location.reload() //返回之后重新加载页面
}
}
}
var danzu=[];
var dizu=[];
window.onload=function(){
User=new user();
User.creatuser();
//用定时器实例化多个对象即多个子弹,放入数组中数组中放的是多个实例化话形象
setInterval(function(){
Dan=new dan()
Dan.creatdan(User)
danzu.push(Dan)
},200);
//创建数组中每个子弹移动的定时器
setInterval(function ()
{
if(danzu.length>0)
{
for(var i=0;i<danzu.length;i++)
{
danzu[i].danmove(i,danzu); //子弹移动清除
if(dizu.length>0)
{
//这里是每颗子弹去调用meet方法 如果进入该方法里面的if判断那么danzu[i] 就是当前的碰撞的子弹实例
if(danzu[i]==undefined)return;//这里处理飞机飞到最高处，发射子弹直接消失，下面没有对象 做修改
danzu[i].meet(dizu,i,danzu); //当前碰撞的子弹。和子弹对应的索引
}
}
}
},5);
//创建敌机出现的定时器
setInterval(function(){
//判断实例化敌机出现的随机大小，因为有多个同理用数组插入
if(Math.random()<0.7){ //实现大敌机出现的概率是百分之70
Diji=new diji();
Diji.creatdiji()
dizu.push(Diji)
}
else{
Diji=new diji(50,60,5,"./img/18.png",300);
Diji.creatdiji()
dizu.push(Diji)
}
},1000);
//敌机移动的定时器
setInterval(function(){
if(dizu.length>0){
for(var key in dizu){
dizu[key].dijimove(key,dizu)
}
}
},100)
//给鼠标绑定移动事件获取鼠标的坐标并且让其在中间
Map.onmousemove=function(e)
{
var x= e.pageX-this.offsetLeft-User.width/2
var y= e.pageY-this.offsetTop-User.height/2
User.usemove(x,y) //对应的方法1调用父类的方法时传参
//User.creatuser(x,y) //对应的方法2调用父类的方法时传参
}
}
script>
body>
html>