Pure javascript imitates WeChat masturbation game_javascript skills

Don’t forget to play games on Chinese Valentine’s Day~ The following editor has prepared a Valentine’s Day gift for everyone, a pure JavaScript imitating WeChat masturbation game to share with lovers all over the world.

First, let me show you the renderings:

View the demo  Source code download

Pure JavaScript imitates the WeChat masturbation game and uses it as a reference for making web mini-games. The interface design is vertically shaped to imitate the mobile phone screen style, and the game effect is smooth. It has score statistics. The JS package class inside includes creating aircraft classes, aircraft movement behavior control, creating bullet classes, generating random numbers between min and max, and judging whether the own aircraft moves out of the boundary. If it moves out of the boundary, cancel the mousemove. event, on the contrary, add the mousemove event, add a pause event for the continue button of the pause interface, create the enemy aircraft class, determine the collision, and complete the initialization of the interface, one for the enemy small aircraft and one for our aircraft.

//Get the main interface

Copy code The code is as follows:

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

//Get the start interface

Copy code The code is as follows:

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

// Obtain in-game score display interface

Copy code The code is as follows:

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

//Get points interface

Copy code The code is as follows:

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

//Get the pause interface

Copy code The code is as follows:

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

//Get the game end interface

Copy code The code is as follows:

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

//Get the score statistics interface after the game ends

Copy code The code is as follows:

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

//Initialize score

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);
 }
 }
}

//Pause interface restart event

//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){

The above code is simple. It uses pure javascript to imitate the WeChat masturbation game. There were many methods at that time. Everyone is welcome to share it.