Comment implémenter un mini-jeu de retournement de cartes dans le mini-programme WeChat

Cet article présente principalement en détail la version du mini-programme WeChat du mini-jeu de retournement de cartes, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

L'exemple dans cet article partage avec tout le monde le mini WeChat. version du programme. Le code spécifique du programme flip game est pour votre référence. Le contenu spécifique est le suivant

1. Créez un nouveau projet de démarrage rapide pour voir la structure

<.>Cliquez sur Ajouter un projet dans l'outil de développement WeChat, ne sélectionnez aucun appid et cochez « Créer un projet à démarrage rapide dans le répertoire actuel ».

Vous pouvez voir qu'il y a deux répertoires, pages et utils, et 3 fichiers d'application dans le répertoire racine. Pages stocke les pages du mini programme et chaque page possède son propre dossier indépendant. Une page est composée de 4 fichiers. Le fichier js est la logique du programme ; wxss est un fichier de style défini par WeChat. La syntaxe est la même que celle du css, mais il prend en charge moins de styles ; programme, et sa fonction est similaire au HTML, mais seules certaines balises personnalisées par WeChat peuvent être utilisées, et les éléments de la page ne peuvent pas être directement exploités avec js et ne peuvent être modifiés qu'en liant les données. json est le fichier de configuration de la page et est généralement ; pas utilisé. Les fonctions de app.js, app.json et app.wxml dans le répertoire racine sont similaires à celles sous pages, sauf que celles sous pages sont au niveau de la page, tandis que celles sous le répertoire racine sont au niveau de l'application. Une fonction d'outil pour convertir le format de l'heure est définie ci-dessous dans utils, puis la fonction est exposée via module.exports, puis introduite via require dans logs.js.

2. Transformer la page d'index

Une fois que vous connaissez la structure du mini programme, vous pouvez commencer par transformer la page d'index et modifier l'événement de clic sur. l'avatar de l'utilisateur. Supprimez-le, puis ajoutez deux boutons pour accéder à l'interface principale du jeu et à l'interface des résultats du jeu.

1. Interface, bindtap est équivalent à onclick de 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.Ajoutez deux fonctions pour gérer les événements de clic dans la page du fichier index.js, utilisez wx.navigateTo pour sauter Ajoutez une image d'arrière-plan du jeu à la page cible

//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; }

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde. l'avenir.

Articles connexes :

Comment vux implémente la fonction d'actualisation pull-up

Comment jQuery implémente le carrousel d'images

Comment jQuery empêche le déclenchement rapide et répété du même événement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!