suchen

Heim  >  Artikel  >  Web-Frontend  >  Teilen Sie einen Beispielcode für die Implementierung eines Masturbationsspiels mit JavaScript (imitiert WeChat)

Teilen Sie einen Beispielcode für die Implementierung eines Masturbationsspiels mit JavaScript (imitiert WeChat)

零下一度
零下一度Original
2017-05-08 10:30:593617Durchsuche

In diesem Artikel wird hauptsächlich der relevante Code des JavaScript-Imitationsspiels WeChat im Detail vorgestellt. Er hat einen gewissen Referenzwert.

Zuallererst: Um WeChat zu implementieren Beim Masturbationsspiel werden Sie zuerst sich selbst und den Feind haben. Verwenden Sie LeinwandZeichnung, um sich selbst und den Feind zu generieren.

1. Generieren Sie sich selbst und Sie können sich mit der linken und rechten Taste nach links und rechts bewegen. 

//生成自己，且可以左右移动
//控制飞机向右移动的函数
 function moveRight(event){
 context.clearRect(aligh,100,47,47);
 //防止飞机移除背景外
 if(aligh < 260){
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
  context.drawImage(img, aligh,100);
  }
 aligh += 10 ;
 }

//当飞机即将移出背景外时，让它停在最右端
 if (aligh == 260){
  var img = new Image();
  img.src = "../images/self.png";
  img.onload = function(){
 context.drawImage(img, 260,100);
  }
  }
 }
 //控制飞机向左移动的函数
 function moveLeft(event){
 context.clearRect(aligh,100,47,47);

//防止飞机移出最左边的边界
 if(aligh > 0){
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img, aligh,100);
  }
 aligh -= 10 ;
 }

//使其控制在最左侧
 if (aligh == 0){
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img, 0,100);
  }
 }

}
//判断按下的是哪个键，然后控制飞机左右移动
 document.onkeydown = function(event){
 if(event.keyCode == 37){
  moveLeft();
  }
 if(event.keyCode == 39){
  moveRight(); 
  }
 }

2. Erzeuge feindliche Flugzeuge. Feindliche Flugzeuge sind zufällig generierte Bilder im Hintergrund. Lassen Sie es jede Sekunde von oben fallen. 

var createId = setInterval(function(){
 var top = 0+&#39;px&#39;; 
 var enemy = document.createElement("img");
 enemy.src = "../images/enemy.png";

 //生成随机的位置
 var randomleft = Math.floor(Math.random() * 300) ;
 //如果生成的位置出现在背景外，则就取260
left = randomleft > 260 ? 260 + &#39;px&#39;: randomleft + &#39;px&#39;;

 leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算
 arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除

 main.appendChild(enemy);
 enemy.style.paddingLeft = left ;
 enemy.style.paddingTop = top;
 var spandom = $("#main>img:last-child");//这儿利用jquery找到最后一个img

//让最后一个img动起来。则就相当于为每一个img都绑定了动画
spandom.animate({"paddingTop":420},6000,function(){
 //当下落到底部时移除元素
 this.remove();
 arrPic.splice(0,1); //从数组中移除图片
 leftArr.splice(0,1); //从数组中移除距离
 fallCount ++; //检测下落了多少个飞机，超过十个没被打中，游戏就结束
 });

 //如果落下的飞机数超过十个没有被打中，则游戏结束
 if(fallCount > 10){
  clearInterval(createId);
  clearInterval(crashId);
  alert("当前得分 ："+count+" , 很遗憾，游戏结束!")
  }
 },1000);

3. Jetzt geht es hauptsächlich um die Kollisionserkennung. Alle 2,2 Sekunden wird ein Test durchgeführt, den Sie durch langes Drücken der linken oder rechten Taste direkt ausschalten können. Es macht keinen Sinn 

function checkCrash(){

 crashId = setInterval(function(){

 //由于每次自由落下的飞机在上面函数中都被移除了。所以leftArr数组中保存的就是当前页面存在的飞机的左距离数组。
 for(var i = 0; i < leftArr.length; i++)
 {

 //首先将两种都转换成int型进行比较
 var tempL = parseInt(leftArr[i]);
 var tempA = parseInt(aligh); //表示自己距左侧的位置

 //当自己的中心距离处于敌机的左右两侧范围内，则表示被击中
 if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){
 arrPic[i].remove(); //碰撞检测，移除敌机的图片
 arrPic.splice(i,1); //从图片数组中移除图片
 leftArr.splice(i,1); //从记录敌机左侧距离数组中移除该敌机的距离
 count++;
 score.innerHTML = "当前得分 "+count;   
 break; //检测到之后直接跳出循环，进行下一个2.2秒的碰撞检测
 } 
 } 
 },2200);

 }
 checkCrash();

Das Spiel ist noch nicht fertig, es werden keine Kugeln generiert. Die meisten Funktionen wurden implementiert.

4. Das Rendering ist wie folgt:

Teilen Sie einen Beispielcode für die Implementierung eines Masturbationsspiels mit JavaScript (imitiert WeChat)

Teilen Sie einen Beispielcode für die Implementierung eines Masturbationsspiels mit JavaScript (imitiert WeChat)

Abschließend ist der Quellcode beigefügt:

HTML&CSS

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/ >
 <title></title>
 <script type="text/javascript" src = "./fightFlight.js"></script>
 <script src = "../jQuery/jquery-3.2.0.min.js"></script>
 <style type="text/css">
 *{
 margin: 0px;
 padding: 0px;
 }
 #main{
 width: 300px;
 height: 500px;
 border:1px solid red;
 margin: 0 auto;
 }
 #my{

 position: absolute;
 z-index: 2;
 top:350px;
 }
 #background{
 position: absolute;
 z-index: 1;
 width: 300px;
 height:500px;
 border: 1px solid green;
 background-image: url(../images/background.jpg);
 }
 img{
 position: absolute;
 z-index: 2;
 }
 #enmey{
 width: 50px;
 height: 50px;
 }

 #score{
 position: absolute;
 margin-left: 50%;
 left: 150px;
 top:100px;
 width: 160px;
 font-size: 20px;
 font-family: "微软雅黑";
 font-weight: bold;
 line-height: 70px;
 text-align: center;
 }
 </style>
</head>

<body>
<p id = "main">
<canvas id = "background"></canvas>
<canvas id = "my"></canvas>
<p id = "score">当前得分：0</p>
</p>

</body>
</html>

JavaScript

 var main = document.getElementById(&#39;main&#39;);
 var my = document.getElementById(&#39;my&#39;);
 var score = document.getElementById("score");
 var context = my.getContext(&#39;2d&#39;);
 var crashId;
 var fallCount = 0; //记录没被打中的飞机数，如果超过10，游戏结束
 var aligh = 0 ;
 var count = 0; //记录打中的飞机数，即当前得分
 var leftArr = [];
 var arrPic = [];
 var left;
 var img = new Image();
 img.src = "../images/self.png";
 img.onload = function(){
 context.drawImage(img,aligh,100);
 }

 //生成自己，且可以左右移动
  function move(event){

  event = EventUtil.getEvent(event);
  context.clearRect(aligh,100,47,47);

  if(event.keyCode == 39 && aligh < 260 ){

  var img = new Image();
  img.src = "../images/self.png";
  img.onload = function(){
   context.drawImage(img, aligh,100);
   }
   aligh += 10 ;
  }

 if (aligh == 260){
   var img = new Image();
   img.src = "../images/self.png";
   img.onload = function(){
   context.drawImage(img, 260,100);
   }
  }

  }
 document.onkeypress = move;


 //随机生成敌机

 (function(){
  var createId = setInterval(function(){
  var top = 0+&#39;px&#39;; 
  var enemy = document.createElement("img");
  enemy.src = "../images/enemy.png";
  var randomleft = Math.floor(Math.random() * 300) ;
  left = randomleft > 260 ? 260 + &#39;px&#39;: randomleft + &#39;px&#39;;

  leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算
  arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除

  main.appendChild(enemy);
  enemy.style.paddingLeft = left ;
  enemy.style.paddingTop = top;
  var spandom = $("#main>img:last-child");//找到最后一个span
  spandom.animate({"paddingTop":420},6000,function(){
  //移除元素
  this.remove();
  arrPic.splice(0,1); //移除图片
  leftArr.splice(0,1); //从数组中移除距离
  fallCount ++;
  });

  //如果落下的飞机数超过十个没有被打中，则游戏结束
  if(fallCount >= 10){
  clearInterval(createId);
  clearInterval(crashId);
  alert("当前得分 ："+count+" , 很遗憾，游戏结束!")
  }

  },1000);
 })();

 //碰撞检测
 function checkCrash(){

 crashId = setInterval(function(){

  for(var i = 0; i < leftArr.length; i++)
  {
  var tempL = parseInt(leftArr[i]);
  var tempA = parseInt(aligh);
  if(tempL <= (tempA + 20) && (tempA + 20) <= (tempL + 40)){

   arrPic[i].remove(); //碰撞检测，移除敌机的图片
   count++;
   score.innerHTML = "当前得分 "+count;
   continue;
  }

  }
  console.log(count);

 },2200);

 }
 checkCrash();
}

[Verwandte Empfehlungen]

1. Kostenloses JS-Online-Video-Tutorial

2. JavaScript-Referenzhandbuch für Chinesisch

3. php.cn Dugu Jiujian (3) - JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie einen Beispielcode für die Implementierung eines Masturbationsspiels mit JavaScript (imitiert WeChat). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Teilen Sie die js-Implementierung (Nachahmung meines Reichtums) mit dem Code für digitale Inkrement-SpezialeffekteNächster Artikel：Teilen Sie die js-Implementierung (Nachahmung meines Reichtums) mit dem Code für digitale Inkrement-Spezialeffekte

In Verbindung stehende Artikel

Mehr sehen