<!DOCTYPE html>
<html lang="en">
<head>
<title>一款基础模型的JS打飞机游戏特效代码</title> <style type="text/css">
#show{
margin:auto;
width:300px;
height:500px;
background: black;
position: relative;
}
#fly{
width:10px;
height:10px;
position:absolute;
bottom:0;
left:140px;
background: #0044ff;
}
#sco{
z-index:1;
color:white;
}
.arrow{
width:6px;
height:6px;
background: #ddd;
margin-left: 2px;
margin-top:-10px;
}
.huiji{
width:10px;
height:10px;
background: #eee;
position:absolute;
top:0;
left:0;
}
</style>
</head>
<body>
<div id="show" style="width:300px;height:500px">
<div id="fly">
<div class="arrow" style="margin-top:-10px;">
</div>
</div>
</div>
</body>
</html>
<script>
function $(id){//获得id
return document.getElementById(id);
}
function keydown(e) {//判断键盘事件
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
return currKey;
}
function getClass(obj,attr){//getElementsByClass
var aArray=[];
var i=0;
var aAll = obj.getElementsByTagName('*');
for(i=0;i<aAll.length;i++){
if(aAll[i].className == attr){
aArray.push(aAll[i]);
}
}
return aArray;
}
function fly(){
this.begin=0;
this.arrowSpeed=5;
this.huijiSpeed=7;
this.showArea=$('show');
this.showWidth=this.showArea.style.width;
this.showHeight=this.showArea.style.height;
this.offsetleft='140px';
this.arrow=getClass(document,'arrow');
this.huiji=getClass(document,'huiji');
this.flying=$('fly');
this.scores=0;
}
fly.prototype={
constructor:fly,
version:1.0,
start:function(){
this.begin=1;
},
end:function(){
this.begin=0;
},
leftSet:function(width){
this.flying.style.left=width;
return this.flying.style.left;
},
process:function(){
var that=this;
if(that.begin==0){
return false;
}else if(that.begin==1){
that.leftSet(that.offsetleft);
document.addEventListener('keydown',function(){//判断边界
if(parseInt(that.leftSet())>0&&parseInt(that.leftSet())<(parseInt(that.showWidth)-10)){
if(keydown()==37){
that.leftSet(parseInt(that.flying.style.left)-5+'px');
}else if(keydown()==39){
that.leftSet(parseInt(that.flying.style.left)+5+'px');
}
}else if(parseInt(that.leftSet())==0){
if(keydown()==39){
that.leftSet(parseInt(that.flying.style.left)+5+'px');
}
}else if(parseInt(that.leftSet())==(parseInt(that.showWidth)-10)){
if(keydown()==37){
that.leftSet(parseInt(that.flying.style.left)-5+'px');
}
}
});
setInterval(function(){//子弹
for(var i=0;i<that.arrow.length;i++){
if(Math.abs(parseInt(that.arrow[i].style.marginTop))<parseInt(that.showHeight)-10){
that.arrow[i].style.marginTop=parseInt(that.arrow[i].style.marginTop)-10+'px';
}else if(Math.abs(parseInt(that.arrow[i].style.marginTop))==parseInt(that.showHeight)-10){
that.arrow[i].style.marginTop='-20px';
}
}
},that.arrowSpeed);
}
},
huijiInit:function(){
var that=this,
left=Math.random()*290,
textnode=document.createElement('div');
that.showArea.appendChild(textnode).setAttribute('class','huiji');
textnode.style.left=0;
textnode.style.top=0;
textnode.style.left=left+'px';
setInterval(function(){
if(Math.abs(parseInt(textnode.style.top))<parseInt(that.showHeight)+10){
textnode.style.top=parseInt(textnode.style.top)+1+'px';
for(var i=0;i<that.arrow.length;i++){
if(Math.abs(parseInt(that.arrow[i].style.marginTop))<=Math.abs(parseInt(textnode.style.top))&&Math.abs(parseInt(that.arrow[i].style.marginTop))>=Math.abs(parseInt(textnode.style.top))-20&&parseInt(that.leftSet())>left&&parseInt(that.leftSet())<left+20){
textnode.remove();
that.scores+=1;
}
}
}else if(Math.abs(parseInt(textnode.style.top))==parseInt(that.showHeight)+10){
textnode.remove();
}
},that.huijiSpeed);
},
score:function(){
var textnode=document.createElement('div');
if(!document.getElementById('sco')){
this.showArea.insertBefore(textnode).setAttribute('id','sco').innerHTML=this.scores;
}else{
document.getElementById('sco').innerHTML=this.scores;
}
},
init:function(){
var that=this;
this.start();
this.process();
setInterval(function(){that.huijiInit();that.score();},1000);
}
}
var fl=new fly();
fl.init()
</script>