WeChat 미니 프로그램에서 카드 뒤집기 미니 게임을 구현하는 방법

이 글에서는 주로 카드 뒤집기 게임의 WeChat 미니 프로그램 버전을 자세히 소개하며, 관심 있는 친구들이 참고할 수 있습니다.

이 글의 예시는 위챗 미니 프로그램 버전의 구체적인 내용을 알려드립니다. 카드 뒤집기 게임의 코드는 참고용입니다. 구체적인 내용은 다음과 같습니다.

1. 새로운 빠른 시작 프로젝트를 생성하고 구조를 확인하세요.

WeChat 개발 도구에서 프로젝트 추가를 클릭하고 앱 ID 없음을 선택하세요. "현재 디렉터리에 빠른 시작 프로젝트 만들기"를 선택하세요.

루트 디렉터리에는 페이지와 유틸리티라는 두 개의 디렉터리와 3개의 앱 파일이 있는 것을 볼 수 있습니다. 페이지는 미니 프로그램의 페이지를 저장하며 각 페이지에는 자체 독립 폴더가 있습니다. 페이지는 4개의 파일로 구성됩니다. js 파일은 WeChat에서 정의한 스타일 파일입니다. 구문은 css와 동일하지만 wxml 파일은 미니의 인터페이스를 정의하는 데 사용됩니다. 프로그램이며 그 기능은 html과 유사하지만 WeChat에서 사용자 정의한 일부 태그만 사용할 수 있으며, 페이지 요소는 js로 직접 작동할 수 없으며 데이터 바인딩을 통해서만 수정할 수 있습니다. json은 페이지의 구성 파일이며 일반적으로 사용되지 않습니다. 루트 디렉터리에 있는 app.js, app.json, app.wxml의 기능은 페이지 아래에 있는 기능은 페이지 수준에 있는 반면 루트 디렉터리에 있는 기능은 애플리케이션 수준>에 있다는 점을 제외하면 페이지 아래에 있는 기능과 유사합니다. 시간 형식을 변환하는 도구 기능은 아래 utils에 정의되어 있으며, module.exports를 통해 해당 기능이 노출되고, log.js의 require를 통해 소개됩니다.

2. 인덱스 페이지 변환

미니 프로그램의 구조를 알고 나면 먼저 인덱스 페이지를 변환하고 사용자 아바타의 클릭 이벤트를 제거한 다음 점프 버튼 2개를 추가합니다. 게임 메인 인터페이스와 게임 결과 인터페이스.

1. 인터페이스는 HTML의 onclick

<!--index.wxml--> 
<view class="container"> 
 <view class="userinfo"> 
 <text class="userinfo-nickname"></text> 
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> 
 <text class="userinfo-nickname">{{userInfo.nickName}}</text> 
 <text class="userinfo-nickname">你好</text> 
 </view> 
 <view class="usermotto" > 
 <text class="user-motto" bindtap="startGame">{{motto}}</text> 
 </view> 
 <view style="margin-top:30rpx; "> 
 <text class="user-motto" bindtap="viewScore" >查看排名</text> 
 </view> 
</view>

2.index.js 파일과 같습니다. 클릭 이벤트를 처리하는 두 가지 기능을 추가하고 wx.navigateTo를 사용하여 대상 페이지

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
 motto: '开始游戏', 
 userInfo: {}, 
 welcome:'你好' 
 }, 
 //事件处理函数 
 startGame: function() { 
 wx.navigateTo({ 
  url: '../game/game' 
 }) 
 },viewScore: function() { 
 wx.navigateTo({ 
  url: '../logs/logs' 
 }) 
 }, 
 onLoad: function () { 
 console.log('onLoad') 
 var that = this 
 //调用应用实例的方法获取全局数据 
 app.getUserInfo(function(userInfo){ 
  //更新数据 
  that.setData({ 
  userInfo:userInfo 
  }) 
 }) 
 } 
})

3.index로 이동합니다. wxss

page{background: url('../images/gamebg.jpg') center top; }

의 배경 이미지는 제가 모두를 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vux가 풀업 새로 고침 기능을 구현하는 방법

jQuery가 이미지 캐러셀을 구현하는 방법

jQuery 동일한 이벤트가 빠르고 반복적으로 트리거되는 것을 방지하는 방법

위 내용은 WeChat 미니 프로그램에서 카드 뒤집기 미니 게임을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!