Implementation of WeChat mini program version of card flipping mini game

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

Develop tools in WeChat Click Add 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 add the user avatar. Remove the click event, and then add two buttons to jump to the main game interface and game results interface.

1. Interface, bindtap is equivalent to onclick of html

<!--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.In Page of index.js file Add two functions to handle click events, 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.Add game background to index.wxss Picture

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

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat applet implements the function of selecting cities based on letters

WeChat applet imitates Meituan City Selected implementation

Snake game implemented by WeChat applet [with source code]

##

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