순수 자바스크립트는 WeChat 자위 게임_javascript 기술을 모방합니다.

중국 발렌타인데이에는 게임도 잊지 마세요~ 다음 에디터가 전 세계 연인들과 공유할 수 있도록 위챗 자위 게임을 모방한 순수 자바스크립트를 모두를 위한 발렌타인데이 선물을 준비했습니다.

먼저 렌더링을 보여드리겠습니다.

데모 보기  소스 코드 다운로드

순수 자바스크립트는 위챗 자위 게임을 모방하여 웹 미니게임 제작 시 참고용으로 사용합니다. 인터페이스 디자인은 휴대폰 화면 스타일을 모방하기 위해 세로 모양으로 되어 있으며 게임 효과가 부드럽습니다. 내부의 JS 패키지 클래스에는 항공기 클래스 생성, 항공기 이동 동작 제어, 총알 클래스 생성, 최소 및 최대 사이의 난수 생성, 자신의 항공기가 경계 밖으로 이동하는지 여부 판단이 포함됩니다. 경계, mousemove 이벤트 취소, 반대로 mousemove 이벤트 추가, 일시 중지 인터페이스의 계속 버튼에 대한 일시 중지 이벤트 추가, 적 항공기 클래스 생성, 충돌 확인 및 인터페이스 초기화 완료. 적의 소형 항공기와 우리 항공기의 항공기입니다.

//메인 인터페이스 가져오기

코드 복사 코드는 다음과 같습니다.

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

//시작 인터페이스 가져오기

코드 복사 코드는 다음과 같습니다.

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

// 게임 내 점수 표시 인터페이스 획득

코드 복사 코드는 다음과 같습니다.

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

//포인트 가져오기 인터페이스

코드 복사 코드는 다음과 같습니다.

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

//일시 중지 인터페이스 가져오기

코드 복사 코드는 다음과 같습니다.

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

//게임 종료 인터페이스 가져오기

코드 복사 코드는 다음과 같습니다.

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

//게임 종료 후 점수 통계 인터페이스 가져오기

코드 복사 코드는 다음과 같습니다.

varplanscore=document.getElementById("planscore");

//점수 초기화

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

//인터페이스 재시작 이벤트 일시중지

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

위 코드는 순수 자바스크립트를 사용하여 당시 WeChat 자위 게임을 모방한 것입니다. 누구나 공유할 수 있습니다.