Javascript tulen meniru kemahiran game_javascript melancap WeChat

Jangan lupa bermain permainan pada Hari Valentine Cina~ Editor berikut telah menyediakan hadiah Hari Valentine untuk semua orang, JavaScript tulen yang meniru permainan melancap WeChat untuk dikongsi dengan pencinta di seluruh dunia.

Pertama, izinkan saya menunjukkan kepada anda rendering:

Lihat demo  Muat turun kod sumber

JavaScript tulen meniru permainan melancap WeChat dan menggunakannya sebagai rujukan untuk membuat permainan mini web Reka bentuk antara muka berbentuk menegak untuk meniru gaya skrin telefon mudah alih, dan kesan permainan adalah lancar. Ia mempunyai statistik skor Kelas pakej JS di dalam termasuk mencipta kelas pesawat, kawalan tingkah laku pesawat, mencipta kelas peluru, menjana nombor rawak antara min dan maks, dan menilai sama ada pesawat sendiri bergerak keluar dari sempadan sempadan, batalkan acara mousemove, sebaliknya, tambahkan acara mousemove, tambahkan acara jeda untuk butang teruskan antara muka jeda, buat kelas pesawat musuh, tentukan perlanggaran, dan lengkapkan permulaan antara muka, satu untuk. pesawat kecil musuh dan satu untuk pesawat kami.

//Dapatkan antara muka utama

Salin kod Kod adalah seperti berikut:

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

//Dapatkan antara muka permulaan

Salin kod Kod adalah seperti berikut:

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

// Dapatkan antara muka paparan skor dalam permainan

Salin kod Kod adalah seperti berikut:

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

//Dapatkan antara muka mata

Salin kod Kod adalah seperti berikut:

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

//Dapatkan antara muka jeda

Salin kod Kod adalah seperti berikut:

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

//Dapatkan antara muka akhir permainan

Salin kod Kod adalah seperti berikut:

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

//Dapatkan antara muka statistik skor selepas permainan tamat

Salin kod Kod adalah seperti berikut:

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

//Mulakan skor

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

//Jeda acara mulakan semula antara muka

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

Kod di atas adalah mudah. ​​Ia menggunakan javascript tulen untuk meniru permainan melancap WeChat. Terdapat banyak kaedah pada masa itu.