집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript를 사용하여 자위 게임을 구현하기 위한 예제 코드 공유(WeChat 모방)

JavaScript를 사용하여 자위 게임을 구현하기 위한 예제 코드 공유(WeChat 모방)

零下一度원래의: 2017-05-08 10:30:593657검색

이 글은 JavaScript 모방 위챗 자위 게임의 관련 코드를 중심으로 소개하고 있으며, 관심 있는 친구들은 참고할 만한 가치가 있습니다.

우선 위챗을 구현해 보세요. 자위 게임에서는 먼저 자신과 적을 갖게 됩니다. 캔버스 그림을 사용하여 자신과 적을 생성하세요.

1. 자신을 생성하고 좌우키로 좌우로 움직일 수 있습니다.

아아아아

2. 적 항공기를 생성합니다. 적 항공기의 배경에는 무작위로 사진이 생성됩니다. 매초마다 위에서 떨어지게 만드세요.

//生成自己，且可以左右移动
//控制飞机向右移动的函数
 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(); 
  }
 }

3. 이제 주로 충돌 감지에 관한 것입니다. 2.2초마다 테스트가 진행되는데, 테스트 플랫폼이 빈번한 경우 왼쪽 또는 오른쪽 키를 길게 눌러 직접 제거할 수 있기 때문입니다. 말도 안 돼요

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

게임이 아직 완료되지 않았고 총알도 생성되지 않습니다. 대부분의 기능이 구현되었습니다.

4. 렌더링은 다음과 같습니다.

JavaScript를 사용하여 자위 게임을 구현하기 위한 예제 코드 공유(WeChat 모방)

마지막으로 소스코드를 첨부합니다.

html&css

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

JavaScript

<!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>

[관련 추천]

무료 js 온라인 동영상 튜토리얼

2. JavaScript 중국어 참조 매뉴얼

3. php.cn Dugu Jiujian (3) - JavaScript 동영상 튜토리얼

위 내용은 JavaScript를 사용하여 자위 게임을 구현하기 위한 예제 코드 공유(WeChat 모방)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：js 구현(내 부의 모방) 디지털 증분 특수 효과 코드 공유다음 기사：js 구현(내 부의 모방) 디지털 증분 특수 효과 코드 공유