Reines Javascript imitiert WeChat-Masturbationsspiel_Javascript-Fähigkeiten

Vergessen Sie nicht, am chinesischen Valentinstag Spiele zu spielen ~ Der folgende Herausgeber hat ein Valentinstagsgeschenk für alle vorbereitet, ein reines JavaScript, das WeChat-Masturbationsspiel imitiert, das Sie mit Liebhabern auf der ganzen Welt teilen können.

Lassen Sie mich zunächst die Renderings zeigen:

Demo ansehen  Quellcode herunterladen

Reines JavaScript imitiert das WeChat-Masturbationsspiel und verwendet es als Referenz für die Erstellung von Web-Minispielen. Das Interface-Design ist vertikal geformt, um den Bildschirmstil eines Mobiltelefons zu imitieren, und der Spieleffekt ist flüssig. Die darin enthaltene JS-Paketklasse umfasst die Erstellung von Flugzeugklassen, die Steuerung des Flugzeugbewegungsverhaltens, die Erstellung von Zufallszahlen zwischen Min und Max sowie die Beurteilung, ob sich das eigene Flugzeug aus der Grenze herausbewegt Grenze, brechen Sie das Mousemove-Ereignis ab, fügen Sie im Gegenteil das Mousemove-Ereignis hinzu, fügen Sie ein Pause-Ereignis für die Schaltfläche „Weiter“ der Pause-Schnittstelle hinzu, erstellen Sie die feindliche Flugzeugklasse, bestimmen Sie die Kollision und schließen Sie die Initialisierung der Schnittstelle ab, eine für das feindliche Kleinflugzeug und eines für unsere Flugzeuge.

//Holen Sie sich die Hauptschnittstelle

Code kopieren Der Code lautet wie folgt:

var mainDiv=document.getElementById("maindiv");

//Holen Sie sich die Startoberfläche

Code kopieren Der Code lautet wie folgt:

var startdiv=document.getElementById("startdiv");

// Erhalten Sie eine Schnittstelle zur Punkteanzeige im Spiel

Code kopieren Der Code lautet wie folgt:

var scoreiv=document.getElementById("scorediv");

//Punkte-Schnittstelle

Code kopieren Der Code lautet wie folgt:

var scorelabel=document.getElementById("label");

//Holen Sie sich die Pause-Schnittstelle

Code kopieren Der Code lautet wie folgt:

var suspenddiv=document.getElementById("suspenddiv");

//Holen Sie sich die Schnittstelle zum Spielende

Code kopieren Der Code lautet wie folgt:

var enddiv=document.getElementById("enddiv");

//Rufen Sie die Benutzeroberfläche für Punktestatistiken nach Spielende ab

Code kopieren Der Code lautet wie folgt:

var planscore=document.getElementById("planscore");

//Score initialisieren

var scores=;
<span style="color: #0000ff">/*
 创建飞机类
 */
</span>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=;
 this.plandietime=dietime;
 this.plansudu=sudu;

<span style="color: #0000ff">//行为

/*
移动行为
 */
</span> this.planmove=function(){
 if(scores<=){
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu+"px";
 }
 else if(scores>&&scores<=){
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px";
 }
 else if(scores>&&scores<=){
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px";
 }
 else if(scores>&&scores<=){
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px";
 }
 else if(scores>&&scores<=){
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px";
 }
 else{
 this.imagenode.style.top=this.imagenode.offsetTop+this.plansudu++"px";
 }
 }
 this.init=function(){
 this.imagenode=document.Element("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();
}
<span style="color: #0000ff">/*
创建子弹类
 */
</span>function bullet(X,Y,sizeX,sizeY,imagesrc){
 this.bulletX=X;
 this.bulletY=Y;
 this.bulletimage=null;
 this.bulletattach=;
 this.bulletsizeX=sizeX;
 this.bulletsizeY=sizeY;


<span style="color: #0000ff">//行为
/*
 移动行为
 */
</span> this.bulletmove=function(){
 this.bulletimage.style.top=this.bulletimage.offsetTop-+"px";
 }
 this.init=function(){
 this.bulletimage=document.Element("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();
}
<span style="color: #0000ff">/*
 创建单行子弹类
 */
</span>function oddbullet(X,Y){
 bullet.call(this,X,Y,,,"image/bullet.png");
}


<span style="color: #0000ff">/*
创建敌机类
 */
</span>

function enemy(hp,a,b,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc){
 plan.call(this,hp,random(a,b),-,sizeX,sizeY,score,dietime,sudu,boomimage,imagesrc);
}


<span style="color: #0000ff">//产生min到max之间的随机数
</span>

function random(min,max){
 return Math.floor(min+Math.random()*(max-min));
}


<span style="color: #0000ff">/*
创建本方飞机类
 */
</span>

function ourplan(X,Y){
 var imagesrc="image/我的飞机.gif";
 plan.call(this,,X,Y,,,,,,"image/本方飞机爆炸.gif",imagesrc);
 this.imagenode.setAttribute('id','ourplan');
}


<span style="color: #0000ff">/*
 创建本方飞机
 */
</span>

var selfplan=new ourplan(,);


<span style="color: #0000ff">//移动事件
</span>

var ourPlan=document.getElementById('ourplan');
var yidong=function(){
 var oevent=window.event||arguments[];
 var chufa=oevent.srcElement||oevent.target;
 var selfplanX=oevent.clientX-;
 var selfplanY=oevent.clientY;
 ourPlan.style.left=selfplanX-selfplan.plansizeX/+"px";
 ourPlan.style.top=selfplanY-selfplan.plansizeY/+"px";


// document.getElementsByTagName('img')[].style.left=selfplanX-selfplan.plansizeX/+"px";


// document.getElementsByTagName('img')[]..style.top=selfplanY-selfplan.plansizeY/+"px";


}


<span style="color: #0000ff">/*
暂停事件
 */
</span>var number=;
var zanting=function(){
 if(number==){
 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=;
 }
 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,);
 number=;
 }
}
<span style="color: #0000ff">//判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemove事件
</span>var bianjie=function(){
 var oevent=window.event||arguments[];
 var bodyobjX=oevent.clientX;
 var bodyobjY=oevent.clientY;
 if(bodyobjX<||bodyobjX>||bodyobjY<||bodyobjY>){
 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);
 }
 }
}

//Interface-Neustartereignis anhalten

//function chongxinkaishi(){
// location.reload(true);
// startdiv.style.display="none";
// maindiv.style.display="block";
//}

var bodyobj=document.getElementsByTagName("body")[];
if(document.addEventListener){
 <span style="color: #0000ff">//为本方飞机添加移动和暂停
</span> mainDiv.addEventListener("mousemove",yidong,true);
 <span style="color: #0000ff">//为本方飞机添加暂停事件
</span> selfplan.imagenode.addEventListener("click",zanting,true);
 <span style="color: #0000ff">//为body添加判断本方飞机移出边界事件
</span> bodyobj.addEventListener("mousemove",bianjie,true);
 <span style="color: #0000ff">//为暂停界面的继续按钮添加暂停事件
</span> suspenddiv.getElementsByTagName("button")[].addEventListener("click",zanting,true);
// suspenddiv.getElementsByTagName("button")[].addEventListener("click",chongxinkaishi,true);
 <span style="color: #0000ff">//为暂停界面的返回主页按钮添加事件
</span> suspenddiv.getElementsByTagName("button")[].addEventListener("click",jixu,true);
}
else if(document.attachEvent){
 <span style="color: #0000ff">//为本方飞机添加移动
</span> mainDiv.attachEvent("onmousemove",yidong);
 <span style="color: #0000ff">//为本方飞机添加暂停事件
</span> selfplan.imagenode.attachEvent("onclick",zanting);
 <span style="color: #0000ff"> //为body添加判断本方飞机移出边界事件
</span> bodyobj.attachEvent("onmousemove",bianjie);
 <span style="color: #0000ff">//为暂停界面的继续按钮添加暂停事件
</span> suspenddiv.getElementsByTagName("button")[].attachEvent("onclick",zanting);
// suspenddiv.getElementsByTagName("button")[].attachEvent("click",chongxinkaishi,true);
 <span style="color: #0000ff">//为暂停界面的返回主页按钮添加事件</span>
 suspenddiv.getElementsByTagName("button")[].attachEvent("click",jixu,true);
}
<span style="color: #0000ff">//初始化隐藏本方飞机
</span>selfplan.imagenode.style.display="none";
<span style="color: #0000ff">/*
敌机对象数组
 */
</span>var enemys=[];
<span style="color: #0000ff">/*
子弹对象数组
 */
</span>var bullets=[];
var mark=;
var mark=;
var backgroundPositionY=;
<span style="color: #0000ff">/*
开始函数
 */
</span>function start(){
 mainDiv.style.backgroundPositionY=backgroundPositionY+"px";
 backgroundPositionY+=.;
 if(backgroundPositionY==){
 backgroundPositionY=;
 }
 mark++;
 <span style="color: #0000ff">/*
 创建敌方飞机
 */
</span> if(mark==){
 mark++;
 <span style="color: #0000ff"> //中飞机
</span> if(mark%==){
 enemys.push(new enemy(,,,,,,,random(,),"image/中飞机爆炸.gif","image/enemy_fly_.png"));
 }
 <span style="color: #0000ff"> //大飞机
</span> if(mark==){
 enemys.push(new enemy(,,,,,,,,"image/大飞机爆炸.gif","image/enemy_fly_.png"));
 mark=;
 }
 <span style="color: #0000ff">//小飞机
</span> else{
 enemys.push(new enemy(,,,,,,,random(,),"image/小飞机爆炸.gif","image/enemy_fly_.png"));
 }
 mark=;
 }
<span style="color: #0000ff">/*
移动敌方飞机
 */
</span> var enemyslen=enemys.length;
 for(var i=;i<enemyslen;i++){
 if(enemys[i].planisdie!=true){
 enemys[i].planmove();
 }
<span style="color: #0000ff">/*
 如果敌机超出边界,删除敌机
 */
</span> if(enemys[i].imagenode.offsetTop>){
 mainDiv.removeChild(enemys[i].imagenode);
 enemys.splice(i,);
 enemyslen--;
 }
 <span style="color: #0000ff">//当敌机死亡标记为true时，经过一段时间后清除敌机
</span> if(enemys[i].planisdie==true){
 enemys[i].plandietimes+=;
 if(enemys[i].plandietimes==enemys[i].plandietime){
 mainDiv.removeChild(enemys[i].imagenode);
 enemys.splice(i,);
 enemyslen--;
 }
 }
 }
<span style="color: #0000ff">/*
创建子弹
*/
</span> if(mark%==){
 bullets.push(new oddbullet(parseInt(selfplan.imagenode.style.left)+,parseInt(selfplan.imagenode.style.top)-));
 }
<span style="color: #0000ff">/*
移动子弹
*/
</span> var bulletslen=bullets.length;
 for(var i=;i<bulletslen;i++){
 bullets[i].bulletmove();
<span style="color: #0000ff">/*
如果子弹超出边界,删除子弹
*/
</span> if(bullets[i].bulletimage.offsetTop<){
 mainDiv.removeChild(bullets[i].bulletimage);
 bullets.splice(i,);
 bulletslen--;
 }
 }
<span style="color: #0000ff">/*
碰撞判断
*/
</span> for(var k=;k<bulletslen;k++){
 for(var j=;j<enemyslen;j++){
 <span style="color: #0000ff">//判断碰撞本方飞机</span>
 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+&&enemys[j].imagenode.offsetTop<=selfplan.imagenode.offsetTop-+selfplan.plansizeY){
  <span style="color: #0000ff">//碰撞本方飞机，游戏结束，统计分数</span>
  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){

Der obige Code ist einfach, um das WeChat-Masturbationsspiel zu imitieren. Jeder kann ihn gerne teilen.