How to implement card flipping mini-game in WeChat mini program

This article mainly introduces the WeChat Mini Program version of the card flipping mini game in detail. It has certain reference value. Interested friends can refer to it.

The example in this article is to share with you the WeChat Mini Program. The specific code of the program flop game is for your reference. The specific content is as follows

1. Create a new quick start project to see the structure

Click on the WeChat development tool to add a project , select no appid, and check "Create a quick start project in the current directory".

You can see that there are two directories, pages and utils, and 3 app files in the root directory. Pages stores the pages of the mini program, and each page has its own independent folder. A page consists of 4 files. The js file is the program logic; wxss is a style file defined by WeChat. The syntax is the same as css, but it supports fewer styles; the wxml file is used to define the interface of the mini program, and its function is similar to html, but only Some tags customized by WeChat can be used, and page elements cannot be directly operated with js and can only be modified by binding data; json is the configuration file of the page and is generally not used. The functions of app.js, app.json, and app.wxml in the root directory are similar to those under pages, except that those under pages are at the page level, while those under the root directory are at the application level>. A tool function for converting time format is defined below in utils, and then the function is exposed through module.exports, and then introduced through require in logs.js.

2. Transform the index page

Once you know the structure of the mini program, you can start. First, transform the index page and change the click event on the user's avatar. Remove it, and then add two buttons to jump to the main game interface and game results interface.

1. Interface, bindtap is equivalent to html's 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.Add two functions to handle click events in the Page of the index.js file, and use wx.navigateTo to jump to the target Page

//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 Add game background image

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How vux implements the pull-up refresh function

How jQuery implements image carousel

How jQuery prevents the same event from being triggered quickly and repeatedly

The above is the detailed content of How to implement card flipping mini-game in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!