web前端游戏项目-雷霆战机&飞机大战游戏【附源码】
文章目录
-
- 一：雷霆战机
-
-
-
- `HTML`源码：
- `JS`文件：
-
- （1）`function.js`
- （2）`impact.js`
- （3）`move.1.1.js`
- （4）`script.js`
-
-
- 二：飞机大战
-
-
-
- `HTML`源码：
- `CSS`源码 - `main.css`：
- `JS`代码：
-
-
一：雷霆战机
《雷霆战机》是一款空战游戏，用户可以用按键 W; S; A; D 来控制飞机的前进；后退；向左；向右来避免被敌机撞到，用回车键发射子弹，根据用户的操作时间越长奖励越多，但是随着时间的推移，游戏难度会加大，飞机存活的几率也会变得更小，所以更加考验用户的掌控能力，是一款身心健康的小游戏
运行效果：
HTML源码：
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞机大战title>
<script type="text/javascript" src="js/impact.js">script>
<style>
html,body{width:100%;height:100%;margin:0;padding:0;}
img{display:block;border:none;}
.box{position:relative;overflow:hidden;height:100%;width:100%;min-width:300px;min-height:500px;}
.bjbox{height:auto;position:absolute;left:0;top:0px;opacity: .6;}
.bjbox img{width:100%;height:auto;}
.stata{position:absolute;left:50%;top:50%;margin-left:-125px;margin-top:25px;width:250px;height:50px;font-size:36px;text-align: center;line-height:40px;cursor:pointer;z-index:10;}
.zhandouBox{position:absolute;z-index:1;height:100%;width:100%;}
.wofang{position: absolute;width:180px;height:60px;cursor:pointer;/* left:50%;margin-left:-100px;bottom:15px; */opacity: .6;}
.wofang img{position:absolute;left:-35px;top:-30px;}
.wofang .wo_xue{position: absolute;display:block;border:solid 1px #333;width:150px;height:8px;left:20px;top:40px;background:#ccc;overflow: hidden;}
.wofang .wo_xue div{width:100%;height:100%;background:green;position: absolute;}
.diji_1{position:absolute;width:200px;height:150px;}
.diji_1 img{width:100%;height:100%;}
.diji_1 .xue{position: absolute;display:block;border:solid 1px #333;width:150px;height:8px;left:20px;top:40px;background:#ccc;overflow: hidden;}
.diji_1 .xue div{width:100%;height:100%;background:green;position: absolute;}
.diji_2{position:absolute;width:300px;height:230px;}
.diji_2 img{width:100%;height:100%;}
.diji_2 .xue{position: absolute;display:block;border:solid 1px #333;width:200px;height:12px;left:50px;top:60px;background:#ccc;overflow: hidden;}
.diji_2 .xue div{width:100%;height:100%;background:green;position: absolute;}
.zongjidefen{position:absolute;width:100%;height: 100%;left:0;top:0;background:rgba(0,0,0,.8);font-size:50px;color:#ddd;text-align: center;line-height:300px;z-index:50;display:none;}
.zongjidefen button{display:block;width:250px;height:50px;font-size:36px;text-align: center;line-height:40px;cursor:pointer;margin-left:auto;margin-right: auto;}
.paodan{width:15px;height:45px;position: absolute;}
.paodan img{width:100%;height:100%;}
.img_1{display:block;position: absolute;width:50px;height:50px;}
.img_2{display:block;position: absolute;width:160px;height:170px;}
.img_3{display:block;position: absolute;width:250px;height:266px;}
style>
head>
<body>
<div class="box">
<div class="bjbox">
<img src="images/bg_dz.jpg">
<img src="images/bg_dz.jpg">
div>
<button class="stata">开始button>
<div class="zhandouBox">
<a class="diji_box">
a>
<a class="baozhaxiaoguo_box">
a>
<div class="paodan_1">div>
<div class="wofang">
<img src="images/wofang_dz.png">
<span class="wo_xue">
<div>div>
span>
div>
div>
<div class="zongjidefen">
总计得分：<span>0000span>
<button onClick="zailaiyici()">再来一次button>
div>
div>
<script type="text/javascript" src="js/script.js">script>
body>
html>
JS文件：
（1）function.js
var obj = null;
var obj_1 = null;
var str_2 = "";
var arrshow=[];
var start=1;
var timr1=null;
var startobj=null;
//构造删除数组的原型
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
function fn_num_str(str)
{
var num = parseInt(str)+1000;
num+='';
return num.substring(1);
};
function fn_selechange(e)
{
var str_ = $(e).val();
obj.find("tr").each(function()
{
var str = $(this).find(".t2").html();
if (str_ == "all")
{
obj.find("tr").css("display", "table-row");
return false;
}
if (str.indexOf(str_)!=-1)
{
$(this).css("display", "table-row");
}
else
{
$(this).css("display", "none");
}
})
};
function fn_seach_input(e)
{
var str_ = $(e).val();
obj.find("tr").each(function()
{
var str = ($(this).find(".t4 span").html())+($(this).find(".t3 span").html());
if (str.indexOf(str_) != -1)
{
$(this).css("display", "table-row");
}
else
{
$(this).css("display", "none");
}
})
}
function fn_show_zh(e)
{
var str_ = $(e).html();
if (str_ == "隐藏释义")
{
$(e).html("显示释义");
fn_startshow();
}
else
{
$(e).html("隐藏释义");
fn_startshow();
}
};
function fn_show_en(e)
{
var str_ = $(e).html();
if (str_ == "隐藏API名称")
{
$(e).html("显示API名称");
fn_startshow();
}
else
{
$(e).html("隐藏API名称");
fn_startshow();
}
};
function fn_startshow()
{
var val1= $(".btn1").html();
var val2= $(".btn2").html();
if(val1 == "隐藏释义" && val2 == "隐藏API名称")
{
start = 1;
obj.find("tr").each(function(){
$(this).find(".t3 span").css("display", "block");
$(this).find(".t3 div").css("display", "block");
}).each(function(){
$(this).find(".t4 span").css("display", "block");
});
};
if(val1 == "显示释义" && val2 == "隐藏API名称")
{
start = 2;
obj.find("tr").each(function(){
$(this).find(".t3 span").css("display", "none");
$(this).find(".t3 div").css("display", "none");
}).each(function(){
$(this).find(".t4 span").css("display", "block");
});
};
if(val1 == "隐藏释义" && val2 == "显示API名称")
{
start = 3;
obj.find("tr").each(function(){
$(this).find(".t3 span").css("display", "block");
$(this).find(".t3 div").css("display", "block");
}).each(function(){
$(this).find(".t4 span").css("display", "none");
});
};
if(val1 == "显示释义" && val2 == "显示API名称")
{
start = 4;
obj.find("tr").each(function(){
$(this).find(".t3 span").css("display", "none");
$(this).find(".t3 div").css("display", "none");
}).each(function(){
$(this).find(".t4 span").css("display", "none");
});
};
$(".eyes").removeClass('on');
}
function fn_listinputfus(e)
{
obj_1=$(e);
obj_1.parents("tr").addClass('tron').siblings().removeClass('tron');
str_2=$.trim($(e).parents("tr").find(".t4 span").html());
};
function fn_listinputkeup(e)
{
var str = $(e).val();
var num = str.length;
var star=1;
for(var i=0;i<num;i++)
{
if(str[i] != str_2[i])
{
star = 0;
}
};
if(star == 0)
{
$(e).addClass('no');
}
else
{
$(e).removeClass('no');
}
if(star == 1 && num == str_2.length)
{
$(e).addClass('ok');
}
else
{
$(e).removeClass('ok');
};
};
function fn_lock(e)
{
//fn_num_str;
var str_="";
var num = 0;
$(".table1 tbody tr").each(function(index, el) {
var str = $(this).attr("data");
var str1_ = $(this).find(".t3").attr("val");
var str2_ = $(this).find(".t4").attr("val");
var str1 = $(this).find(".t3 span").html();
var str2 = $(this).find(".t4 span").html();
var shu = $(this).find(".t2").html();
$(".tk").show();
if(str == 1)
{
num++;
str_+=fn_returnstr(fn_num_str(num),0,"",str1_,str1,"","");
}
else if(str == 2)
{
num++;
str_+=fn_returnstr(fn_num_str(num),0,"","","",str2_,str2);
}
else if(str == 3)
{
num++;
str_+=fn_returnstr(fn_num_str(num),0,"",str1_,str1,str2_,str2);
}
else if(str == 4)
{
shu = $(this).find(".t2 input").val();
num++;
str_+=fn_returnstr(fn_num_str(num),1,shu,str1_,str1,str2_,str2);
};
});
$(".tk tbody").html(str_);
};
///
function fn_returnstr(num,strt,shu,str1,str2,str3,str4)
{
strt=strt==0?"修改":"新增"
var str3=''+
''+num+' '+
''+strt+' '+
''+shu+' '+
''+str1+' '+
'>> '+
''+str2+' '+
''+str3+' '+
'>> '+
''+str4+' '+
' ';
return str3;
}
function fn_add(e)
{
var num = parseInt($(".table1 tr:last").find(".t1").html())+1;
var str4=''+fn_num_str(num)+
' '+
''+
' '+
''+
''+
' '+
''+
''+
''+
' '+
''+
' '+
''+
' '+
''+fn_num_str(num)+
' '+
jsn.claSs+
' '+
'+jsn.name+'">'+
''+jsn.name+''+
' '+
'+jsn.explain+'" class="t3">'+
''+jsn.explain+''+
''+
' '+
''+
' '+
''+
' '+
'（2）impact.js
function impact(obj,dobj) {
var o = {
x: getDefaultStyle(obj, 'left'),
y: getDefaultStyle(obj, 'top'),
w: getDefaultStyle(obj, 'width'),
h: getDefaultStyle(obj, 'width')
}
var d = {
x: getDefaultStyle(dobj, 'left'),
y: getDefaultStyle(dobj, 'top'),
w: getDefaultStyle(dobj, 'width'),
h: getDefaultStyle(dobj, 'width')
}
var px, py;
px = o.x <= d.x ? d.x : o.x;
py = o.y <= d.y ? d.y : o.y;
// 判断点是否都在两个对象中
if (px >= o.x && px <= o.x + o.w && py >= o.y && py <= o.y + o.h && px >= d.x && px <= d.x + d.w && py >= d.y && py <= d.y + d.h) {
return true;
} else {
return false;
}
};
function getDefaultStyle(obj, attribute) {
return parseInt(obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, false)[attribute]);
};
（3）move.1.1.js
function getStyle(obj,attr){//获取外部样式
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(a1,b1,c1,obj,json,fnEnd){//缓冲运动
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var bStop=true; //假设：所有的值都已经到了
for(var attr in json){
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
cur=parseInt(getStyle(obj,attr));
}
if(a1==0)
{
var speed=(json[attr]-cur)/b1;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
}
else
{
if(json[attr]>cur)
{
var speed=b1;
}
else
{
var speed=-b1
}
}
if(cur!==json[attr])
{
bStop=false;
if(attr=='opacity')
{
if(json[attr]>cur)
{
if(json[attr]-cur<speed){bStop=true;}
}
else
{
if(json[attr]-cur>speed){bStop=true;}
}
}
}
else
{
}
if(a1==0)
{
if(cur==json[attr])
{}
else
{
if(attr=='opacity')
{
obj.style[attr]=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}
else
{
if(json[attr]-cur>0)
{
if(json[attr]-cur<b1)
{
obj.style[attr]=json[attr]+'px';
}
else
{
if(attr=='opacity')
{
obj.style[attr]=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}
else
{
if(cur-json[attr]<b1)
{
obj.style[attr]=json[attr]+'px';
}
else
{
if(attr=='opacity')
{
obj.style[attr]=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}
}
}
if(bStop){
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
},c1)
}
function getByClass(oParent,sClass){
var aEle=oParent.getElementsByTagName('*');
var aResult=[];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==sClass)
{
aResult.push(aEle[i]);
}
}
return aResult;
}
function getObj(n){//选择器
var oBody=document.getElementsByTagName("body")[0];
if(n.indexOf('#')!==-1){
//针对id
n=n.replace(/[#]/ig,"")
return document.getElementById(n);
}else if(n.indexOf('.')!==-1){
//针对class
n=n.replace(/[.]/ig,"")
var aN = oBody.getElementsByTagName("*");
var aResult=[];
for(var i=0;i<aN.length;i++){
if(aN[i].className==n)
{
aResult.push(aN[i]);
}//if
}
if(aResult.length==1){
return aResult[0];
}else{
return aResult;
}
}else{
//针对标签
var aN = oBody.getElementsByTagName(n)
if(aN.length==1){
return aN[0]
}else{
return aN;
}
}
}
（4）script.js
var btnstata=getObj(".stata");
var zd_quyu=getObj(".zhandouBox");
var diji_box=getObj(".diji_box");
var wofang=getObj(".wofang");
var beijing=getObj(".bjbox");
var baozhaxiaoguo=getObj(".baozhaxiaoguo_box");//爆炸效果区域
// var paodan=getObj(".paodan");
var wofangimg=wofang.getElementsByTagName("img")[0];
var wo_xue_div=getObj(".wo_xue").getElementsByTagName("div")[0];
var zongfen=getObj(".zongjidefen").getElementsByTagName("span")[0];
//alert(zongfen);
var wofangtime_left=null;//移动
var wofangtime_top=null;//移动
var wofangtime_paodan=null;//发射炮弹；
var wofangtime_speed=10;//我方飞机移动速度
var dijizhizao_speed=2000;//敌机制造速度
var dijizhizao_time=null;//敌机制造循环时间对象
var arr_diji_1=[];//敌机
var arr_diji_2=[];//敌机
var arr_diji_zong=[];//敌机
var arr_diji_chuxian_weizhi=[];//敌机出现位置；
var putong_diji=0;//普通敌机击毁数;
var teshu_diji=0;//厉害敌机击毁数;
var wofang_ss=0;
var nandujiebie=1;
//敌机生产速度加快
function shudujiakaui()
{
setInterval(function(){
if(dijizhizao_speed>400)
{
dijizhizao_speed-=10;
};
if(dijizhizao_speed<1300)
{
nandujiebie=3;
return;
}
if(dijizhizao_speed<1700)
{
nandujiebie=2;
return;
}
},2000)
}
//敌机炮弹击中后的爆炸效果；效果类型 x坐标 y坐标
function baozhaxiaoguo_fn(n1,x,y)
{
//炮弹爆炸
/*var img;*/
setTimeout(function(){
if(n1==1)
{
var img1=document.createElement("img");
img1.src="images/baozha_2.gif";
img1.setAttribute("class","img_1");
img1.style.left=x+'px';
img1.style.top=y+'px';
baozhaxiaoguo.appendChild(img1);
setTimeout(function(){
if(img1){
baozhaxiaoguo.removeChild(img1);
}
},1200)
}
else if(n1==2)
{
var img2=document.createElement("img");
img2.src="images/pandan_bz.gif";
img2.setAttribute("class","img_2");
img2.style.left=x+'px';
img2.style.top=y+'px';
baozhaxiaoguo.appendChild(img2);
setTimeout(function(){
if(img2){
baozhaxiaoguo.removeChild(img2);
}
},1200)
}
else if(n1==3)
{
var img3=document.createElement("img");
img3.src="images/pandan_bz.gif";
img3.setAttribute("class","img_3");
img3.style.left=x-30+'px';
img3.style.top=y-30+'px';
baozhaxiaoguo.appendChild(img3);
setTimeout(function(){
if(img3){
baozhaxiaoguo.removeChild(img3);
}
},1200)
}
else if(n1==4)
{
}
},0)
}
function zailaiyici()
{
wofang_ss=1;
chuangjiandiji();
putong_diji=0;
teshu_diji=0;
nandujiebie=1;
dijizhizao_speed=2020;
getObj(".zongjidefen").style.display="none";
wo_xue_div.style.width=150+"px";
wo_xue_div.style.backgroundColor="green";
}
btnstata.onclick=function()
{
beijing.style.opacity=1;
wofang.style.opacity=1;
wofang_ss=1;
shudujiakaui();
btnstata.style.display='none';
chuangjiandiji();
setInterval(function(){
panduan_wofang_zj()
},40);
};
var zongwidth;
var zongheight;
//背景天空
function beijingtiankong()
{ var x=0;
var hei= beijing.offsetHeight;
beijing.style.top=-(hei/2)+'px';
setInterval(function(){
x=x+1;
beijing.style.top=x+'px';
if(x>=0)
{
x=-(hei/2);
beijing.style.top=x+'px';
}
},50)
}
//创建天空飞行物敌机//对象，x轴速度，y轴速度，
function tiankongfeixingwu(obj,xspeed,yspeed,timespeed)
{
obj.timer_2=null;
obj.xspeed=xspeed;
obj.yspeed=yspeed;
obj.timespeed=timespeed;
obj.timer_2 = setInterval(function(){
obj.style.left=obj.offsetLeft+obj.xspeed+'px';
obj.style.top=obj.offsetTop+obj.yspeed+'px';
if(obj.offsetTop>(zongheight+200))
{
clearInterval(obj.timer_2);
obj.timer_2=null;
diji_box.removeChild(obj);
}
},obj.timespeed)
};
//动态创建飞机函数
function chuangjiandiji()
{
clearInterval(dijizhizao_time);
dijizhizao_time = setInterval(function(){
if(wofang_ss!=0)
{
var suiji_1_8=parseInt(Math.random()*(8-0)+0);
var wei_zhi=arr_diji_chuxian_weizhi[suiji_1_8];
if(nandujiebie==2)
{var xspeed=parseInt(Math.random()*(6-(-6))+(-6));}
else if(nandujiebie==3)
{var xspeed=parseInt(Math.random()*(7-(-7))+(-7));}
else
{var xspeed=parseInt(Math.random()*(3-(-3))+(-3));}
if(wei_zhi-(zongwidth/2)>0)
{
xspeed = xspeed<0?xspeed:-xspeed;
}
else
{
xspeed = xspeed<0?-xspeed:xspeed;
};
if(nandujiebie==2)
{
var yspeed=parseInt(Math.random()*(7-3)+3);
var timespeed=parseInt(Math.random()*(45-18)+18);
var x_1=parseInt(Math.random()*(3-1)+1);
}
else if(nandujiebie==3)
{
var yspeed=parseInt(Math.random()*(8-4)+4);
var timespeed=parseInt(Math.random()*(40-10)+10);
var x_1=parseInt(Math.random()*(3-1)+1);
}
else
{
var yspeed=parseInt(Math.random()*(6-2)+2);
var timespeed=parseInt(Math.random()*(50-20)+20);
var x_1=parseInt(Math.random()*(4-1)+1);
};
if(x_1==1)
{
var div = document.createElement("div");
div.setAttribute("class","diji_2");
div.style.left=wei_zhi+'px';
div.style.top=-190+'px';
div.innerHTML='
'+
''+
''+
'';
diji_box.appendChild(div);
tiankongfeixingwu(div,xspeed,yspeed,timespeed);
}
else
{
var div1 = document.createElement("div");
div1.setAttribute("class","diji_1");
div1.style.left=wei_zhi+'px';
div1.style.top=-160+'px';
div1.innerHTML='
'+
''+
''+
'';
diji_box.appendChild(div1);
tiankongfeixingwu(div1,xspeed,yspeed,timespeed);
};
}
},dijizhizao_speed)
};
//炮弹实例//速度 left top 炮弹类型
function Paodan(obj,speed,lei)
{
obj.timer_1=null;
obj.timer_1 = setInterval(function()
{
obj.style.top=obj.offsetTop-speed+'px';
obj.shang=obj.offsetTop;
arr_diji_1=document.getElementsByClassName("diji_1");//getObj(".diji_1");
arr_diji_2=document.getElementsByClassName("diji_2");
arr_diji_zong=diji_box.children;//arr_diji_1.concat(arr_diji_2);
//console.log(arr_diji_zong.length);
//线程
//setTimeout(function(){
for(var i=0;i<arr_diji_zong.length;i++)
{
//线程
if(impact(obj,arr_diji_zong[i]))
{
clearInterval(obj.timer_1);
obj.timer_1=null;
var diji_img=arr_diji_zong[i].getElementsByTagName("img")[0];
baozhaxiaoguo_fn(1,obj.offsetLeft,obj.offsetTop)
zd_quyu.removeChild(obj);
if(arr_diji_zong[i].className=="diji_2")
{
var div_xue=arr_diji_zong[i].getElementsByTagName("div")[0];
div_xue.style.width=div_xue.offsetWidth-10+'px';
var div_width=div_xue.offsetWidth;
if(div_width<=0)
{
baozhaxiaoguo_fn(3,arr_diji_zong[i].offsetLeft,arr_diji_zong[i].offsetTop);
diji_box.removeChild(arr_diji_zong[i]);
teshu_diji++;
return;
}
if(div_width<100)
{
div_xue.style.backgroundColor="red";
return;
}
if(div_width<150)
{
div_xue.style.backgroundColor="yellow";
return;
}
else
{
div_xue.style.backgroundColor="green";
return;
}
}
else if(arr_diji_zong[i].className=="diji_1")
{
var div_xue_1=arr_diji_zong[i].getElementsByTagName("div")[0];
div_xue_1.style.width=div_xue_1.offsetWidth-10+'px';
var div_width=div_xue_1.offsetWidth;
if(div_width<=0)
{
baozhaxiaoguo_fn(2,arr_diji_zong[i].offsetLeft,arr_diji_zong[i].offsetTop);
diji_box.removeChild(arr_diji_zong[i]);
putong_diji++;
return;
}
if(div_width<50)
{
div_xue_1.style.backgroundColor="red";
return;
}
if(div_width<100)
{
div_xue_1.style.backgroundColor="yellow";
return;
}
else
{
div_xue_1.style.backgroundColor="green";
return;
}
}
}
else
{
if(obj.shang<-50)
{
clearInterval(obj.timer_1);
obj.timer_1=null;
if(obj)
{
zd_quyu.removeChild(obj);
}
return;
}
}
}
/*},0)*/
if(obj.shang<(-50))
{
clearInterval(obj.timer_1);
obj.timer_1=null;
if(obj)
{
zd_quyu.removeChild(obj);
}
}
},50)
};
window.onload=function()
{
/*baozhaxiaoguo_fn(1,50,80);
baozhaxiaoguo_fn(1,80,80);
baozhaxiaoguo_fn(1,0,80);
baozhaxiaoguo_fn(3,10,50);
baozhaxiaoguo_fn(1,5,20);
baozhaxiaoguo_fn(2,0,0);*/
beijingtiankong();
zongwidth = zd_quyu.offsetWidth;
zongheight = zd_quyu.offsetHeight;
var weizhi_bili=zongwidth/8;
for(var i=0;i<8;i++)
{
arr_diji_chuxian_weizhi.push(parseInt(i*weizhi_bili));
};
wofang.style.left=zongwidth/2-100+'px';
wofang.style.top=zongheight/2+(zongheight/2-170)+'px';
//禁止右键菜单
document.oncontextmenu = function (){
alert("请尊重下我的劳动成果哈");
return false;
};
};
window.onresize = function(){
location = location;
};
document.onkeydown=function(event)
{
var e = event || window.event || arguments.callee.caller.arguments[0];
//保护源码的措施
//F12
if(e.keyCode == 123){
alert("请尊重下我的劳动成果哈");
return false;
//Ctrl+Shift+I
}else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
alert("请尊重下我的劳动成果哈");
return false;
//Shift+F10
}else if((e.shiftKey) && (e.keyCode == 121)){
alert("请尊重下我的劳动成果哈");
return false;
//Ctrl+U
}else if((e.ctrlKey) && (e.keyCode == 85)){
alert("请尊重下我的劳动成果哈");
return false;
};
//a65 s83 w87 d68
if(wofang_ss==0){return false}
if(e.keyCode==65)
{
clearInterval(wofangtime_left);
wofangtime_left = setInterval(function(){
if(parseInt(wofang.style.left)<-10)
{
wofang.style.left=-20+'px';
clearInterval(wofangtime_left);
return;
};
wofang.style.left=parseInt(wofang.style.left)-wofangtime_speed+'px';
},10);
return;
}
if(e.keyCode==87)
{
clearInterval(wofangtime_top);
wofangtime_top = setInterval(function(){
//panduan_wofang_zj();
if(parseInt(wofang.style.top)<-10)
{
wofang.style.top=-20+'px';
clearInterval(wofangtime_top);
return;
}
wofang.style.top=parseInt(wofang.style.top)-wofangtime_speed+'px';
},10);
return;
}
if(e.keyCode==68)
{
clearInterval(wofangtime_left);
wofangtime_left = setInterval(function(){
//panduan_wofang_zj();
if(parseInt(wofang.style.left)>zongwidth-200+20)
{
wofang.style.left=zongwidth-200+10+'px';
clearInterval(wofangtime_left);
return;
}
wofang.style.left=parseInt(wofang.style.left)+wofangtime_speed+'px';
},10);
return;
}
if(e.keyCode==83)
{
clearInterval(wofangtime_top);
wofangtime_top = setInterval(function(){
//panduan_wofang_zj();
if(parseInt(wofang.style.top)>zongheight-150+20)
{
wofang.style.top=zongheight-150+10+'px';
clearInterval(wofangtime_top);
return;
}
wofang.style.top=parseInt(wofang.style.top)+wofangtime_speed+'px';
},10);
return;
}
if(e.keyCode==13)
{
var fragment;
var div_paodan;
var img_paodan;
var div_paodan2;
var img_paodan2;
clearInterval(wofangtime_paodan);
wofangtime_paodan = setInterval(function(){
fragment=document.createDocumentFragment();
div_paodan = document.createElement("div");
img_paodan = document.createElement("img");
div_paodan.setAttribute("class","paodan");
img_paodan.setAttribute("src","images/paodan.png");
div_paodan.appendChild(img_paodan);
fragment.appendChild(div_paodan);
div_paodan.style.left=wofang.offsetLeft+40+'px';
div_paodan.style.top=wofang.offsetTop-0+'px';
div_paodan2 = document.createElement("div");
img_paodan2 = document.createElement("img");
div_paodan2.setAttribute("class","paodan");
img_paodan2.setAttribute("src","images/paodan.png");
div_paodan2.appendChild(img_paodan2);
fragment.appendChild(div_paodan2);
div_paodan2.style.left=wofang.offsetLeft+120+'px';
div_paodan2.style.top=wofang.offsetTop-0+'px';
Paodan(div_paodan2,30,"images/paodan_b.png");
Paodan(div_paodan,30,"images/paodan_b.png");
zd_quyu.appendChild(fragment);
},200);
fragment=document.createDocumentFragment();
div_paodan = document.createElement("div");
img_paodan = document.createElement("img");
div_paodan.setAttribute("class","paodan");
img_paodan.setAttribute("src","images/paodan.png");
div_paodan.appendChild(img_paodan);
fragment.appendChild(div_paodan);
div_paodan.style.left=wofang.offsetLeft+40+'px';
div_paodan.style.top=wofang.offsetTop-0+'px';
div_paodan2 = document.createElement("div");
img_paodan2 = document.createElement("img");
div_paodan2.setAttribute("class","paodan");
img_paodan2.setAttribute("src","images/paodan.png");
div_paodan2.appendChild(img_paodan2);
fragment.appendChild(div_paodan2);
div_paodan2.style.left=wofang.offsetLeft+120+'px';
div_paodan2.style.top=wofang.offsetTop-0+'px';
zd_quyu.appendChild(fragment);
Paodan(div_paodan2,30,"images/paodan_b.png");
Paodan(div_paodan,30,"images/paodan_b.png");
return;
}
}
document.onkeyup=function(event)
{
var e = event || window.event || arguments.callee.caller.arguments[0];
//a65 s83 w87 d68
if(wofang_ss==0){return false}
if(e.keyCode==65)
{
clearInterval(wofangtime_left);
}
if(e.keyCode==87)
{
clearInterval(wofangtime_top);
}
if(e.keyCode==68)
{
clearInterval(wofangtime_left);
}
if(e.keyCode==83)
{
clearInterval(wofangtime_top);
}
if(e.keyCode==13)
{
clearInterval(wofangtime_paodan);
}
};
document.onmousedown=function()
{
}
//判断敌机是否和我机碰撞
function panduan_wofang_zj()
{
arr_diji_zong=diji_box.children;
//线程
for(var i=0;i<arr_diji_zong.length;i++)
{
if(impact(wofang,arr_diji_zong[i]))
{
var diji_img=arr_diji_zong[i].getElementsByTagName("img")[0];
if(arr_diji_zong[i].className=="diji_2")
{
baozhaxiaoguo_fn(3,arr_diji_zong[i].offsetLeft,arr_diji_zong[i].offsetTop);
diji_box.removeChild(arr_diji_zong[i]);
wo_xue_div.style.width=wo_xue_div.offsetWidth-30+'px';
if(wo_xue_div.offsetWidth<30)
{
wo_xue_div.style.width=0;
}
console.log(wo_xue_div.offsetWidth)
if(wo_xue_div.offsetWidth<=0)
{
gameover();
return;
}
if(wo_xue_div.offsetWidth<=50)
{
wo_xue_div.style.backgroundColor="red";
return;
}
if(wo_xue_div.offsetWidth<=100)
{
wo_xue_div.style.backgroundColor="yellow";
return;
}
else
{
wo_xue_div.style.backgroundColor="green";
return;
}
}
else if(arr_diji_zong[i].className=="diji_1")
{
//diji_img.src="images/diji_2_s.png";
baozhaxiaoguo_fn(2,arr_diji_zong[i].offsetLeft,arr_diji_zong[i].offsetTop);
diji_box.removeChild(arr_diji_zong[i]);
wo_xue_div.style.width=wo_xue_div.offsetWidth-20+'px';
if(wo_xue_div.offsetWidth<20)
{
wo_xue_div.style.width=0;
}
if(wo_xue_div.offsetWidth<=0)
{
gameover();
return;
}
if(wo_xue_div.offsetWidth<=50)
{
wo_xue_div.style.backgroundColor="red";
return;
}
if(wo_xue_div.offsetWidth<=100)
{
wo_xue_div.style.backgroundColor="yellow";
return;
}
else
{
wo_xue_div.style.backgroundColor="green";
return;
}
}
}
}
};
//游戏结束函数
function gameover()
{
//线程
setTimeout(function(){
wofang_ss=0;
clearInterval(dijizhizao_time);
dijizhizao_time=null;
zongfen.innerHTML = putong_diji*100+(teshu_diji*100);
getObj(".zongjidefen").style.display="block";
},0)
}
function getObj(n){//选择器
var oBody=document.getElementsByTagName("body")[0];
if(n.indexOf('#')!==-1){
//针对id
n=n.replace(/[#]/ig,"")
return document.getElementById(n);
}else if(n.indexOf('.')!==-1){
//针对class
n=n.replace(/[.]/ig,"")
var aN = oBody.getElementsByTagName("*");
var aResult=[];
for(var i=0;i<aN.length;i++){
if(aN[i].className==n)
{
aResult.push(aN[i]);
}//if
}
if(aResult.length==1){
return aResult[0];
}else{
return aResult;
}
}else{
//针对标签
var aN = oBody.getElementsByTagName(n)
if(aN.length==1){
return aN[0]
}else{
return aN;
}
}//1级if
}//$();
二：飞机大战
《飞机大战》是一款飞行射击类型的策略单机手游，这款游戏最大的亮点就是没有复杂的操作流程，飞机会自动发射，玩家只要用鼠标控制飞机的方向就可以了
运行效果：
HTML源码：
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>飞机大战title>
<meta http-equiv="content" content="text/html" charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
head>
<body>
<div id="contentdiv">
<div id="startdiv">
<button onclick="begin()">开始游戏button>
div>
<div id="maindiv">
<div id="scorediv">
<label>分数：label>
<label id="label">0label>
div>
<div id="suspenddiv">
<button>继续button><br/>
<button>重新开始button><br/>
<button>回到主页button>
div>
<div id="enddiv">
<p class="plantext">飞机大战分数p>
<p id="planscore">0p>
<div><button onclick="jixu()">继续button>div>
div>
div>
div>
<script type="text/javascript" src="js/main.js">script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center;font:normal 14px/24px 'MicroSoft YaHei';">
div>
body>
html>
CSS源码 - main.css：
*{
margin: 0;
padding: 0;
}
#contentdiv{
position: absolute;
left: 500px;
}
#startdiv{
width: 320px;
height: 568px;
background-image: url(../image/开始背景.png);
}
button{
outline: none;
}
#startdiv button{
position: absolute;
top: 500px;
left: 82px;
width: 150px;
height: 30px;
border: 1px solid black;
border-radius: 30px;
background-color: #c4c9ca;
}
#maindiv{
width: 320px;
height: 568px;
background-image:url(../image/background_1.png) ;
display: none;
}
#maindiv img{
position: absolute;
z-index: 1;
}
#scorediv{
font-size: 16px;
font-weight: bold;
position: absolute;
top: 10px;
left: 10px;
display: none;
}
#scorediv{
font-size: 18px;
font-weight: bold;
}
#suspenddiv{
position: absolute;
top: 210px;
left: 82px;
display: none;
z-index: 2;
}
#suspenddiv button{
width: 150px;
height: 30px;
margin-bottom: 20px;
border: 1px solid black;
border-radius: 30px;
background-color: #c4c9ca;
}
#enddiv{
position: absolute;
top: 210px;
left: 75px;
border: 1px solid gray;
border-radius: 5px;
text-align: center;
background-color:#d7ddde;
display: none;
z-index: 2;
}
.plantext{
width: 160px;
height: 30px;
line-height: 30px;
font-size: 16px;
font-weight: bold;
}
#planscore{
width: 160px;
height: 80px;
line-height: 80px;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
font-size: 16px;
font-weight: bold;
}
#enddiv div{
width: 160px;
height: 50px;
}
#enddiv div button{
margin-top:10px ;
width: 90px;
height: 30px;
border: 1px solid gray;
border-radius: 30px;
}
JS代码：
//获得主界面
var mainDiv=document.getElementById("maindiv");
//获得开始界面
var startdiv=document.getElementById("startdiv");
//获得游戏中分数显示界面
var scorediv=document.getElementById("scorediv");
//获得分数界面
var scorelabel=document.getElementById("label");
//获得暂停界面
var suspenddiv=document.getElementById("suspenddiv");
//获得游戏结束界面
var enddiv=document.getElementById("enddiv");
//获得游戏结束后分数统计界面
var planscore=document.getElementById("planscore");
//初始化分数
var scores=0;
/*
创建飞机类
*/
function plan(hp,X,Y,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
this.planX=X;
this.planY=Y;
this.imagenode=null;
this.planhp=hp;
this.planscore=score;
this.plansizeX=sizeX;
this.plansizeY=sizeY;
this.planboomimage=boomimage;
this.planisdie=false;
this.plandietimes=0;
this.plandietime=dietime;
this.plansudu=sudu;
//行为
/*
移动行为
*/
this.planmove=function(){
if(scores<=50000){
this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px";
}
else if(scores>50000&&scores<=100000){
this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+1+"px";
}
else if(scores>100000&&scores<=150000){
this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+2+"px";
}
else if(scores>150000&&scores<=200000){
this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+3+"px";
}
else if(scores>200000&&scores<=300000){
this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+4+"px";
}
else{
this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+5+"px";
}
}
this.init=function(){
this.imagenode=document.createElement("img");
this.imagenode.style.left=this.planX+"px";
this.imagenode.style.top=this.planY+"px";
this.imagenode.src=imagesrc;
mainDiv.appendChild(this.imagenode);
}
this.init();
}
/*
创建子弹类
*/
function bullet(X,Y,sizeX,sizeY,imagesrc){
this.bulletX=X;
this.bulletY=Y;
this.bulletimage=null;
this.bulletattach=1;
this.bulletsizeX=sizeX;
this.bulletsizeY=sizeY;
//行为
/*
移动行为
*/
this.bulletmove=function(){
this.bulletimage.style.top=this.bulletimage.offsetTop-20+"px";
}
this.init=function(){
this.bulletimage=document.createElement("img");
this.bulletimage.style.left= this.bulletX+"px";
this.bulletimage.style.top= this.bulletY+"px";
this.bulletimage.src=imagesrc;
mainDiv.appendChild(this.bulletimage);
}
this.init();
}
/*
创建单行子弹类
*/
function oddbullet(X,Y){
bullet.call(this,X,Y,6,14,"image/bullet1.png");
}
/*
创建敌机类
*/
function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
plan.call(this,hp,random(a,b),-100,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc);
}
//产生min到max之间的随机数
function random(min,max){
return Math.floor(min+Math.random()*(max-min));
}
/*
创建本方飞机类
*/
function ourplan(X,Y){
var imagesrc="image/我的飞机.gif";
plan.call(this,1,X,Y,66,80,0,660,0,"image/本方飞机爆炸.gif",imagesrc);
this.imagenode.setAttribute('id','ourplan');
}
/*
创建本方飞机
*/
var selfplan=new ourplan(120,485);
//移动事件
var ourPlan=document.getElementById('ourplan');
var yidong=function(){
var oevent=window.event||arguments[0];
var chufa=oevent.srcElement||oevent.target;
var selfplanX=oevent.clientX-500;
var selfplanY=oevent.clientY;
ourPlan.style.left=selfplanX-selfplan.plansizeX/2+"px";
ourPlan.style.top=selfplanY-selfplan.plansizeY/2+"px";
// document.getElementsByTagName('img')[0].style.left=selfplanX-selfplan.plansizeX/2+"px";
// document.getElementsByTagName('img')[0]..style.top=selfplanY-selfplan.plansizeY/2+"px";
}
/*
暂停事件
*/
var number=0;
var zanting=function(){
if(number==0){
suspenddiv.style.display="block";
if(document.removeEventListener){
mainDiv.removeEventListener("mousemove",yidong,true);
bodyobj.removeEventListener("mousemove",bianjie,true);
}
else if(document.detachEvent){
mainDiv.detachEvent("onmousemove",yidong);
bodyobj.detachEvent("onmousemove",bianjie);
}
clearInterval(set);
number=1;
}
else{
suspenddiv.style.display="none";
if(document.addEventListener){
mainDiv.addEventListener("mousemove",yidong,true);
bodyobj.addEventListener("mousemove",bianjie,true);
}
else if(document.attachEvent){
mainDiv.attachEvent("onmousemove",yidong);
bodyobj.attachEvent("onmousemove",bianjie);
}
set=setInterval(start,20);
number=0;
}
}
//判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件
var bianjie=function(){
var oevent=window.event||arguments[0];
var bodyobjX=oevent.clientX;
var bodyobjY=oevent.clientY;
if(bodyobjX<505||bodyobjX>815||bodyobjY<0||bodyobjY>568){
if(document.removeEventListener){
mainDiv.removeEventListener("mousemove",yidong,true);
}
else if(document.detachEvent){
mainDiv.detachEvent("onmousemove",yidong);
}
}
else{
if(document.addEventListener){
mainDiv.addEventListener("mousemove",yidong,true);
}
else if(document.attachEvent){
mainDiv.attachEvent("nomousemove",yidong);
}
}
}
var bodyobj=document.getElementsByTagName("body")[0];
if(document.addEventListener){
//为本方飞机添加移动和暂停
mainDiv.addEventListener("mousemove",yidong,true);
//为本方飞机添加暂停事件
selfplan.imagenode.addEventListener("click",zanting,true);
//为body添加判断本方飞机移出边界事件
bodyobj.addEventListener("mousemove",bianjie,true);
//为暂停界面的继续按钮添加暂停事件
suspenddiv.getElementsByTagName("button")[0].addEventListener("click",zanting,true);
// suspenddiv.getElementsByTagName("button")[1].addEventListener("click",chongxinkaishi,true);
//为暂停界面的返回主页按钮添加事件
suspenddiv.getElementsByTagName("button")[2].addEventListener("click",jixu,true);
}
else if(document.attachEvent){
//为本方飞机添加移动
mainDiv.attachEvent("onmousemove",yidong);
//为本方飞机添加暂停事件
selfplan.imagenode.attachEvent("onclick",zanting);
//为body添加判断本方飞机移出边界事件
bodyobj.attachEvent("onmousemove",bianjie);
//为暂停界面的继续按钮添加暂停事件
suspenddiv.getElementsByTagName("button")[0].attachEvent("onclick",zanting);
// suspenddiv.getElementsByTagName("button")[1].attachEvent("click",chongxinkaishi,true);
//为暂停界面的返回主页按钮添加事件
suspenddiv.getElementsByTagName("button")[2].attachEvent("click",jixu,true);
}
//初始化隐藏本方飞机
selfplan.imagenode.style.display="none";
/*
敌机对象数组
*/
var enemys=[];
/*
子弹对象数组
*/
var bullets=[];
var mark=0;
var mark1=0;
var backgroundPositionY=0;
/*
开始函数
*/
function start(){
mainDiv.style.backgroundPositionY=backgroundPositionY+"px";
backgroundPositionY+=0.5;
if(backgroundPositionY==568){
backgroundPositionY=0;
}
mark++;
/*
创建敌方飞机
*/
if(mark==20){
mark1++;
//中飞机
if(mark1%5==0){
enemys.push(new enemy(6,25,274,46,60,5000,360,random(1,3),"image/中飞机爆炸.gif","image/enemy3_fly_1.png"));
}
//大飞机
if(mark1==20){
enemys.push(new enemy(12,57,210,110,164,30000,540,1,"image/大飞机爆炸.gif","image/enemy2_fly_1.png"));
mark1=0;
}
//小飞机
else{
enemys.push(new enemy(1,19,286,34,24,1000,360,random(1,4),"image/小飞机爆炸.gif","image/enemy1_fly_1.png"));
}
mark=0;
}
/*
移动敌方飞机
*/
var enemyslen=enemys.length;
for(var i=0;i<enemyslen;i++){
if(enemys[i].planisdie!=true){
enemys[i].planmove();
}
/*
如果敌机超出边界,删除敌机
*/
if(enemys[i].imagenode.offsetTop>568){
mainDiv.removeChild(enemys[i].imagenode);
enemys.splice(i,1);
enemyslen--;
}
//当敌机死亡标记为true时，经过一段时间后清除敌机
if(enemys[i].planisdie==true){
enemys[i].plandietimes+=20;
if(enemys[i].plandietimes==enemys[i].plandietime){
mainDiv.removeChild(enemys[i].imagenode);
enemys.splice(i,1);
enemyslen--;
}
}
}
/*
创建子弹
*/
if(mark%5==0){
bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+31,parseInt(selfplan.imagenode.style.top)-10));
}
/*
移动子弹
*/
var bulletslen=bullets.length;
for(var i=0;i<bulletslen;i++){
bullets[i].bulletmove();
/*
如果子弹超出边界,删除子弹
*/
if(bullets[i].bulletimage.offsetTop<0){
mainDiv.removeChild(bullets[i].bulletimage);
bullets.splice(i,1);
bulletslen--;
}
}
/*
碰撞判断
*/
for(var k=0;k<bulletslen;k++){
for(var j=0;j<enemyslen;j++){
//判断碰撞本方飞机
if(enemys[j].planisdie==false){
if(enemys[j].imagenode.offsetLeft+enemys[j].plansizeX>=selfplan.imagenode.offsetLeft&&enemys[j].imagenode.offsetLeft<=selfplan.imagenode.offsetLeft+selfplan.plansizeX){
if(enemys[j].imagenode.offsetTop+enemys[j].plansizeY>=selfplan.imagenode.offsetTop+40&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-20+selfplan.plansizeY){
//碰撞本方飞机，游戏结束，统计分数
selfplan.imagenode.src="image/本方飞机爆炸.gif";
enddiv.style.display="block";
planscore.innerHTML=scores;
if(document.removeEventListener){
mainDiv.removeEventListener("mousemove",yidong,true);
bodyobj.removeEventListener("mousemove",bianjie,true);
}
else if(document.detachEvent){
mainDiv.detachEvent("onmousemove",yidong);
bodyobj.removeEventListener("mousemove",bianjie,true);
}
clearInterval(set);
}
}
//判断子弹与敌机碰撞
if((bullets[k].bulletimage.offsetLeft+bullets[k].bulletsizeX>enemys[j].imagenode.offsetLeft)&&(bullets[k].bulletimage.offsetLeft<enemys[j].imagenode.offsetLeft+enemys[j].plansizeX)){
if(bullets[k].bulletimage.offsetTop<=enemys[j].imagenode.offsetTop+enemys[j].plansizeY&&bullets[k].bulletimage.offsetTop+bullets[k].bulletsizeY>=enemys[j].imagenode.offsetTop){
//敌机血量减子弹攻击力
enemys[j].planhp=enemys[j].planhp-bullets[k].bulletattach;
//敌机血量为0，敌机图片换为爆炸图片，死亡标记为true，计分
if(enemys[j].planhp==0){
scores=scores+enemys[j].planscore;
scorelabel.innerHTML=scores;
enemys[j].imagenode.src=enemys[j].planboomimage;
enemys[j].planisdie=true;
}
//删除子弹
mainDiv.removeChild(bullets[k].bulletimage);
bullets.splice(k,1);
bulletslen--;
break;
}
}
}
}
}
}
/*
开始游戏按钮点击事件
*/
var set;
function begin(){
startdiv.style.display="none";
mainDiv.style.display="block";
selfplan.imagenode.style.display="block";
scorediv.style.display="block";
/*
调用开始函数
*/
set=setInterval(start,20);
}
//游戏结束后点击继续按钮事件
function jixu(){
location.reload(true);
}
注意： 由于文章字数限制，本篇文章只展示了飞机大战的源码及雷霆战机的部分代码，本项目的完整源码及素材关注我获取