<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.map{
position: relative;
width: 400px;
height: 700px;
margin: 0 auto;
border: 1px solid red;
overflow: hidden;
}
.bgimage{
position: absolute;
z-index: -1;
width: 400px;
height: 700px;
background: url("./image/12.png");
}
.score{
position: absolute;
top: 0;
right:0;
font-weight: bold;
}
</style>
</head>
<body>
<div class="map">
<span class="score">Score:0</span>
<div class="bgimage"></div>
<div class="bgimage"></div>
</div>
<script>
var bg=document.getElementsByClassName("bgimage");
bg[0].style.top="-700px";
bg[1].style.top="0px";
setInterval(function(){
for(var i=0;i<bg.length;i++){
var top=parseInt(bg[i].style.top);
top++;
if(top>=700){
top=-700;
}
bg[i].style.top=top+"px";
}
},5)
var Map=document.getElementsByClassName("map")[0];
var scoretxt=document.getElementsByClassName("score")[0];
var Score=0;
function user(){
this.width=60;
this.height=70;
this.src="./image/14.gif";
this.x=170;
this.y=600;
this._user=null;
this.createuser=function(){
if(this._user==null){
this._user=document.createElement("img");
this._user.style.width=this.width+"px";
this._user.style.height=this.height+"px";
this._user.style.zIndex=1;
this._user.style.position="absolute";
Map.appendChild(this._user);
}
this._user.style.left=this.x+"px";
this._user.style.top=this.y+"px";
this._user.src=this.src;
}
this.usermove=function(x,y){
this.x=x-this.width/2;
this.y=y-this.height/2;
this.createuser();
}
}
function shouter(){
this.width=10;
this.height=20;
this.src="./image/15.png";
this._shouter=null;
this.x;
this.y;
this.creategun=function(user){
if(this._shouter==null){
this._shouter=document.createElement("img");
this._shouter.style.width=this.width;
this._shouter.style.height=this.height;
this._shouter.src=this.src;
this._shouter.style.zIndex = 1;
this._shouter.style.position="absolute";
this.x=parseInt(user._user.style.left)+user.width/2-this.width/2;
this.y=parseInt(user._user.style.top)-this.height;
Map.appendChild(this._shouter);
}
this._shouter.style.left=this.x+"px";
this._shouter.style.top=this.y+"px";
}
this.gunmove=function(index,arry){
this.y-=2;
if(this.y<=0){
this._shouter.remove();
arry.splice(index,1);
}
this.creategun();
}
this.shouterEnemy=function(enemy,index,arry){
for(var key in enemy){
if(this.y>=enemy[key].y&&this.y<=enemy[key].y+enemy[key].height&&this.x>enemy[key].x-this.width&&this.x<enemy[key].x+enemy[key].width){
enemy[key].blood--;
if(enemy[key].blood<=0){
Score+=enemy[key].score;
scoretxt.innerHTML="Score:"+Score;
enemy[key]._enemy.remove();
enemy.splice(key,1);
}
this._shouter.remove();
arry.splice(index,1);
}
}
}
}
function enemy(w,h,b,s,f){
this.width=w||40;
this.height=h||30;
this.blood=b||3;
this.score=f||100;
this.src=s||"./image/17.png";
this._enemy=null;
this.x;
this.y;
this.createenemy=function(){
if(this._enemy==null){
this._enemy=document.createElement("img");
this._enemy.style.width=this.width+"px";
this._enemy.style.height=this.height+"px";
this._enemy.src=this.src;
this._enemy.style.zIndex=2;
this._enemy.style.position="absolute";
this.x=Math.random()*(400-this.width);
this.y=-this.height;
Map.appendChild(this._enemy);
}
this._enemy.style.left=this.x+"px";
this._enemy.style.top=this.y+"px";
}
this.enemymove=function(index,arry){
this.y++;
if(this.y>=700){
this._enemy.remove();
arry.splice(index,1);
}
this.createenemy();
//飞机撞击敌机，game over
if(User.x>this.x-User.width+10&&User.x<this.x+this.width-10&&User.y>this.y-this.height+20&&User.y<this.y+this.height-20){
User.src="./image/16.gif";
User.createuser();
alert("Game Over!");
clearInterval(time_createenemy);
clearInterval(time_createshouter);
clearInterval(time_enemymove);
clearInterval(time_shoutermove);
Map.onmousemove=null;
return;
}
}
}
var User;
var Shouter;
var Enemy;
var s_gun=[];
var s_enemy=[];
var time_createenemy;
var time_createshouter;
var time_enemymove;
var time_shoutermove;
window.onload=function(){
/*创建用户*/
User=new user();
User.createuser();
Map.onmousemove=function(e){
var x=e.pageX-this.offsetLeft;
var y= e.pageY-this.offsetTop;
User.usermove(x,y);
}
/*造子弹*/
time_createshouter=setInterval(function(){
Shouter=new shouter();
Shouter.creategun(User);
s_gun.push(Shouter);
},200)
/*子弹移动*/
time_shoutermove=setInterval(function(){
if(s_gun.length>0){
for(var i=0;i<s_gun.length;i++){
s_gun[i].gunmove(i,s_gun);
s_gun[i].shouterEnemy(s_enemy,i,s_gun);
}
}
},5)
/*造敌机*/
time_createenemy=setInterval(function(){
if(Math.random()<0.7){
Enemy=new enemy();
Enemy.createenemy();
s_enemy.push(Enemy);
}
else{
Enemy=new enemy(50,70,5,"./image/18.png",300);
Enemy.createenemy();
s_enemy.push(Enemy);
}
},1000)
/*敌机移动*/
time_enemymove=setInterval(function(){
if(s_enemy.length>0){
for(var key in s_enemy){
s_enemy[key].enemymove(key,s_enemy);
}
}
},5)
}
</script>
</body>
</html>思路分析
1.画地图，完成游戏背景，让背景图片无缝滚动。
2.创建用户飞机的类，类里包括
用户飞机的属性（width,height,src,x,y,_user(存储用户飞机对象)）
创建用户飞机的方法createuser()
用户飞机随着鼠标移动的方法usermove(x,y)
3.实例化一个用户飞机，调用创建用户飞机的方法。
4.给地图添加鼠标移动事件，调用用户飞机移动方法，同时将鼠标的坐标传给usermove(x,y);
5.创建子弹的类，类里包括
子弹的属性（width,height,src,x,y,_shouter(存储子弹对象)）
创建子弹的方法 creategun(user);传参是因为要通过用户飞机的位置定义子弹产生的位置。
子弹向上移动的方法 gunmove(index,arry);传参是因为当子弹超出地图时，要删除子弹这个实例。
6.通过定时器每200ms实例化一个子弹，调用创造子弹的方法创造子弹；每5ms让所有子弹都调用子弹移动方法向上移动一次。
注：因为要遍历子弹，所以要统计子弹的数量。方法：定义一个空数组的全局变量，每实例化一个子弹，给这个数组追加一个子弹对象元素。
7.创建敌机的类，类里包括
敌机的属性（width,height,src,blood，score,x,y,_enemy(存储敌机对象)）；
创建敌机的方法；
敌机移动的方法；
注：由于敌机的种类不同，他们的宽，高，图片路径，血量不一样，所以应给敌机的类设置形参，属性width，height，src，blood,score的值应为参数的值，如果不传递参数的话定义这些属性为默认值（小飞机）。Eg：this.width=w||40;this.height=h||30;....
8.用定时器每1000ms实例化一个敌机，调用创造敌机的方法创建一个敌机对象。每10ms让所有敌机调用敌机移动方法向下移动一次。
注：这里和子弹一样，要定义一个空数组，每创建一个敌机，给这个数组用push方法追加一个敌机元素。方便遍历敌机，控制所有敌机向下移动。
创建敌机时，敌机分为大敌机和小敌机。利用判断一个随机数的大小是否小于0.7，设置百分之七十的概率产生小飞机，百分之三十的概率产生大飞机，大飞机需要设置参数，小飞机不传参则使用默认参数。
9.判断子弹打到敌机，给子弹类添加判断子弹打到敌机的方法，打到敌机时，此子弹删除，此敌机掉血，血量为零时删除此敌机并计分。
注：子弹和敌机删除时，不仅要删除dom元素，还要删除实例化对象。
在判断子弹打到敌机时，一开始的判断方法存在bug。当用户飞机在敌机的后面时，子弹位置也满足删除条件，也可打掉敌机。处理方法：控制子弹的y必须在敌机height的范围内。
10.判断用户飞机撞击敌机，如果用户飞机飞到敌机范围内，则弹出游戏结束。清除所有定时器。此时发现用户飞机还能移动，清除地图的鼠标移动事件。
注：一开始是在用户飞机移动方法中判断的。此处存在bug，即在用户飞机未移动的情况下，是不会撞死的。原因是在鼠标移动时，才调用用户飞机移动的方法，而鼠标不动时，不会调用飞机移动方法，因此也不会撞死。
解决方法：在敌机移动中去判断用户飞机是否撞击敌机。
11.添加背景音乐。
12. 测试出bug：当飞机飞到最高处时，会报错。原因：在调用判断子弹撞击敌机方法时，子弹已超出地图，子弹被删除，因此数组长度为0，s_gun[i]为未定义。会报错。
解决方法：在调用判断子弹撞击敌机方法时，再判断一次。如果s_gun[i]为未定义，直接return；不进行判断。
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
