Table des matières
Avant-propos
Rendu
Mini programme
Idée de développement
Comment dessiner un triangle
Implémenter un style réactif
Système d'animation et système gagnant
最后
Maison Applet WeChat Développement de mini-programmes Implémenter un jeu de roue porte-bonheur dans le mini-programme WeChat

Implémenter un jeu de roue porte-bonheur dans le mini-programme WeChat

Nov 11, 2020 pm 05:34 PM
微信小程序

Tutoriel de développement de programme WeChat MiniLa chronique présente la mise en œuvre du mini-jeu Lucky Spin.

Implémenter un jeu de roue porte-bonheur dans le mini-programme WeChat

Je présente principalement comment développer un jeu de roue porte-bonheur dans l'applet WeChat. Il utilise principalement la syntaxe javascript et css, et vous pouvez facilement implémenter un simple. roue porte-bonheur (prenez 6 zones de prix comme exemple). Bien sûr, si vous disposez d'un meilleur plan de mise en œuvre, veuillez laisser un message dans la zone de commentaires.

Avant-propos

Ce tutoriel vous demande de maîtriser une certaine quantité de connaissances de base de javascript et css, et vous devez avoir une certaine expérience dans le développement de petits programmes Les points de connaissances spécifiques. que vous devez maîtriser sont :

  • position css, transformation, transition, débordement
  • algorithme aléatoire de base javascript
  • syntaxe wxs
  • petit programme construit -in animation api

Rendu

Mini programme

Idée de développement

L'idée de développement a trois parties, la première partie consiste à dessiner la platine avec un arrière-plan CSS, la deuxième partie consiste à utiliser la syntaxe wxs pour implémenter des styles réactifs, et la troisième partie consiste à réaliser la rotation de la platine via l'API d'animation intégrée de le mini programme et le caractère aléatoire de la rotation via js.

Je présente principalement les idées d'écriture, et je commencerai mon explication ci-dessous.

Comment dessiner un triangle

Tout d'abord, vous devez écrire un cadre wxml de base.

<view class="turntable">
  <view class="wrapper">
    <view class="item" >
	  <view class="item-inner">
		<text>10分</text>
	  </view>
	</view>
  </view>
</view>复制代码
Copier après la connexion

J'ai dessiné deux rectangles de même taille. La longueur et la largeur sont respectivement de 300rpx et 600rpx. J'ai utilisé l'attribut css position pour fusionner les deux rectangles ensemble.

.turntable {
  display: block;
  width: 100%;
  height: 600rpx;
}
.turntable .wrapper{
  position: relative;
  transform-origin: center;
  width: 100%;
  height: 600rpx;
}复制代码
Copier après la connexion

Après la fusion, je dois séparer les deux cuboïdes et transformer le cuboïde rouge en demi-cercle. Le cuboïde bleu oscille de 60 degrés dans le sens des aiguilles d'une montre et le cuboïde rouge oscille de 30 degrés dans le sens inverse des aiguilles d'une montre. degrés, pourquoi tourne-t-il comme ça ? Parce que le bleu oscille à l'origine de 30 degrés dans le sens inverse des aiguilles d'une montre avec le rouge, et que l'angle interne d'un triangle est de 60 degrés. Afin de former cet angle de 60 degrés, je dois ensuite déplacer le bleu dans le sens des aiguilles d'une montre. le rouge est placé à 60 degrés, formant ainsi un angle de 60 degrés.

.turntable .wrapper .item {
  position: absolute;
  left: 50%;
  width: 300rpx;
  height: 600rpx;
  border-radius: 0px 300rpx 300rpx 0;
  transform-origin: left center;
  transform: rotate(-30deg);
}
.turntable .wrapper .item .item-inner {
  text-align: center;
  width: 300rpx;
  height: 600rpx;
  transform: translateX(-300rpx) rotate(60deg); 
  transform-origin: right center;
  border-radius: 300rpx 0 0 300rpx;
  font-size: 32rpx;
}复制代码
Copier après la connexion

L'étape clé suivante consiste à ajouter l'attribut item à overflow: hidden, un triangle apparaîtra et à ajuster la position de la police.

.turntable .wrapper .item {
  position: absolute;
  left: 50%;
  width: 300rpx;
  height: 600rpx;
  border-radius: 0px 300rpx 300rpx 0;
  overflow: hidden;
  transform-origin: left center;
}
.turntable .wrapper .item .item-inner text {
  display: block;
  transform-origin: center;
  transform: translateY(100rpx) translateX(43rpx) rotate(-30deg);
}复制代码
Copier après la connexion

Une fois qu'un triangle est dessiné, 6 triangles de taille égale peuvent être assemblés pour former un disque. Il suffit de modifier l'angle de rotation de chaque triangle.

.turntable .wrapper .item:nth-child(1) {
  transform: rotate(-30deg);
}

.turntable .wrapper .item:nth-child(2) {
  transform: rotate(-90deg);
}

.turntable .wrapper .item:nth-child(3) {
  transform: rotate(-150deg);
}

.turntable .wrapper .item:nth-child(4) {
  transform: rotate(-210deg);
}

.turntable .wrapper .item:nth-child(5) {
  transform: rotate(-270deg);
}

.turntable .wrapper .item:nth-child(6) {
  transform: rotate(-330deg);
}复制代码
Copier après la connexion

Implémenter un style réactif

Afin de mieux m'adapter aux différents besoins de l'entreprise, j'ai changé le style carrousel en style réactif, afin de pouvoir facilement ajuster le style en fonction de la longueur du prix données transmises de l'extérieur Pour définir différents styles, j'ai mis le jugement de cette étape dans le module wxs.

<wxs module="computed">
	var rotate = function (index, length) {
		var inital = - (360 / length / 2)
		var averageRotate = 360 / length
		var deg = inital - averageRotate * index
		return 'transform: rotate(' + deg + 'deg);'
	}
	var inner = function (length) {
		var averageRotate = 360 / length
		return 'transform: translateX(-300rpx) rotate(' + averageRotate + 'deg);'
	}
	var text = function (length) {
		var distance = 0
		var rotate = 0
		switch (length) {
			case 6:
				distance = 43
				rotate = 30
				break
			case 8:
				distance = 72
				rotate = 30
				break
			case 4:
				distance = -20
				rotate = 40
				break
		}
		return 'transform: translateY(100rpx) translateX(' + distance + 'rpx) rotate(-45deg);'
	}
	module.exports = {
		rotate: rotate,
		inner: inner,
		text: text
	}
</wxs>复制代码
Copier après la connexion

Système d'animation et système gagnant

En calculant le taux de gain défini, en utilisant un cercle à 360 degrés, une plage gagnante de 0 à 360 est obtenue, et le résultat obtenu au hasard Utilisez le numéro pour déterminez à quelle valeur d'intervalle il appartient et utilisez la valeur d'intervalle reward pour déterminer l'angle auquel le disque doit tourner. L’idée est à peu près la suivante. Commençons par expliquer les idées principales.

圆盘要转的角度 = reward * 一个圆分成6块的平均值  + 3 * 360复制代码
Copier après la connexion

Tout d'abord, définissez les taux de gain des 6 zones de prix winning Les taux de gain doivent totaliser 1. Combinez les données initialisées dans un tableau à 6 chiffres et transmettez-les au composant depuis l'extérieur du. composant à l’intérieur.

prize: [{
        'name': '1分',
        'winnning': 0.2,
        'count': 1
      },
      {
        'name': '谢谢参与',
        'winnning': 0.5,
        'count': 0
      }, {
        'name': '5分',
        'winnning': 0.05,
        'count': 5
      }, {
        'name': '7分',
        'winnning': 0.05,
        'count': 7
      }, 
      {
        'name': '3分',
        'winnning': 0.1,
        'count': 3
      }, 
      {
        'name': '4分',
        'winnning': 0.1,
        'count': 4
      }
    ],复制代码
Copier après la connexion

Utiliser un cercle à 360 degrés pour calculer la plage de valeurs gagnante de 0 à 360.

getRange(winning) {
   let temp = []
     winning.forEach((item, index) => {
       if (index === 0) {
         temp.push(item['winnning'] * 360)
       } else {
         temp.push(parseInt(temp.slice(-1)) + item['winnning'] * 360)
       }
      })
      return temp
    },复制代码
Copier après la connexion

Générez un entier aléatoire Bien entendu, ce nombre doit être compris entre 0 et 360, sinon il n'aura aucun sens s'il dépasse 360 ​​ou est inférieur à 0.

let random = Math.round(Math.random() * 360)复制代码
Copier après la connexion

Après avoir obtenu le numéro aléatoire, déterminez dans quelle plage de prix il se situe et attribuez la valeur d'intervalle correspondante au numéro de réponse reward .

for (let i in winningRange) {
    let currentwinning = winningRange[i] // 当前取值
       if (random < currentwinning) {
          this.setData({
            reward: i
          })
          break
      } else {
        if (i == 0) {
           continue
        }
        if (random >= winningRange[i - 1] && random <= currentwinning) {
           this.setData({
              reward: i
           })
           break
       }
     }
}复制代码
Copier après la connexion

Placez la fonction principale du clic sur démarrer dans onPoint() Au début de la fonction, il faut déterminer s'il y a encore des opportunités de loterie et empêcher l'exécution de l'animation en cliquant à nouveau sur la fonction. Après le calcul, l'angle requis est transmis. L'API d'animation de l'applet WeChat animation est utilisée pour faire tourner le disque. Une fois l'animation terminée, les informations gagnantes sont déclenchées via le composant personnalisé pour surveiller l'événement en dehors du composant.

onPoint() {
      // 平均值
      const averageRotate = 360 / this.properties.prize.length
      // 是否有抽奖机会
      if (this.properties.chance === 0) {
        this.triggerEvent('none')
        return
      }
      // 防止转动时点击开始按钮
      if (!this.data.onRotation) {
        this.setData({
          onRotation: true
        })
        this.getReward()
        let deg = this.data.reward * averageRotate + 3 * 360  // 至少3圈以上
        this.animate('.wrapper', [{
            rotate: 0,
            ease: 'ease-in-out'
          },
          {
            rotate: deg,
            ease: 'ease-in-out'
          }
        ], 5000, function () {
          this.setData({
            onRotation: false
          })
          // 发送自己的抽奖信息
          this.triggerEvent('onResult', this.properties.prize[this.data.reward])
        }.bind(this))
      }
    },复制代码
Copier après la connexion

Enfin, n'oubliez pas d'effectuer l'action de réinitialisation de l'animation avant chaque exécution de l'animation pour vous assurer que l'animation passe au bon angle la prochaine fois. Bien sûr, je l'ai mis dans une fonction pour qu'il puisse être utilisé en dehors du composant.

onClear(){
   this.clearAnimation('.wrapper')
}复制代码
Copier après la connexion

最后

整个思路就这些,怎么样,是不是很简单呢?实现关键一步是绘制圆盘,只要这一步搞好了,其他就会简单很多,因为动画实现那部分,微信小程序已经帮我们全部弄好了。最后,如果有更好的方法,欢迎在评论讨论一下。

相关免费学习推荐:微信小程序开发教程

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Le mini-programme Xianyu WeChat est officiellement lancé Le mini-programme Xianyu WeChat est officiellement lancé Feb 10, 2024 pm 10:39 PM

Le mini programme WeChat officiel de Xianyu a été lancé discrètement. Dans le mini programme, vous pouvez publier des messages privés pour communiquer avec les acheteurs/vendeurs, afficher les informations personnelles et les commandes, rechercher des articles, etc. Si vous êtes curieux, qu'est-ce que le mini Xianyu WeChat. programme appelé ? Jetons un coup d'oeil. Quel est le nom de l'applet Xianyu WeChat ? Réponse : Xianyu, transactions inutilisées, ventes d'occasion, valorisations et recyclage. 1. Dans le mini programme, vous pouvez publier des messages inactifs, communiquer avec des acheteurs/vendeurs via des messages privés, afficher des informations personnelles et des commandes, rechercher des articles spécifiés, etc. 2. Sur la page du mini programme, il y a une page d'accueil, à proximité, publier des messages inactifs et les miens 5 fonctions ; 3. Si vous souhaitez l'utiliser, vous devez activer le paiement WeChat avant d'acheter ;

L'applet WeChat implémente la fonction de téléchargement d'images L'applet WeChat implémente la fonction de téléchargement d'images Nov 21, 2023 am 09:08 AM

L'applet WeChat implémente la fonction de téléchargement d'images Avec le développement de l'Internet mobile, l'applet WeChat est devenue un élément indispensable dans la vie des gens. Les mini-programmes WeChat fournissent non seulement une multitude de scénarios d'application, mais prennent également en charge les fonctions définies par les développeurs, notamment les fonctions de téléchargement d'images. Cet article présentera comment implémenter la fonction de téléchargement d'images dans l'applet WeChat et fournira des exemples de code spécifiques. 1. Travaux préparatoires Avant de commencer à écrire du code, nous devons télécharger et installer les outils de développement WeChat et nous inscrire en tant que développeur WeChat. En même temps, vous devez également comprendre WeChat

Quel est le nom de l'applet Xianyu WeChat ? Quel est le nom de l'applet Xianyu WeChat ? Feb 27, 2024 pm 01:11 PM

Le mini-programme officiel WeChat de Xianyu a été lancé discrètement. Il offre aux utilisateurs une plate-forme pratique qui vous permet de publier et d'échanger facilement des objets inutilisés. Dans le mini programme, vous pouvez communiquer avec des acheteurs ou des vendeurs via des messages privés, afficher des informations personnelles et des commandes et rechercher les articles que vous souhaitez. Alors, comment s'appelle exactement Xianyu dans le mini-programme WeChat ? Ce guide didacticiel vous le présentera en détail. Les utilisateurs qui souhaitent savoir, veuillez suivre cet article et continuer à lire ! Quel est le nom de l'applet Xianyu WeChat ? Réponse : Xianyu, transactions inutilisées, ventes d'occasion, valorisations et recyclage. 1. Dans le mini programme, vous pouvez publier des messages inactifs, communiquer avec des acheteurs/vendeurs via des messages privés, afficher des informations personnelles et des commandes, rechercher des articles spécifiés, etc. 2. Sur la page du mini programme, il y a une page d'accueil, à proximité, publier des messages inactifs et les miens 5 fonctions ;

Implémentez l'effet de menu déroulant dans l'applet WeChat Implémentez l'effet de menu déroulant dans l'applet WeChat Nov 21, 2023 pm 03:03 PM

Pour implémenter l'effet de menu déroulant dans les mini-programmes WeChat, des exemples de code spécifiques sont nécessaires. Avec la popularité de l'Internet mobile, les mini-programmes WeChat sont devenus une partie importante du développement d'Internet, et de plus en plus de gens ont commencé à y prêter attention et à y prêter attention. utilisez les mini-programmes WeChat. Le développement de mini-programmes WeChat est plus simple et plus rapide que le développement d'applications traditionnelles, mais il nécessite également la maîtrise de certaines compétences en développement. Dans le développement des mini-programmes WeChat, les menus déroulants sont un composant courant de l'interface utilisateur, permettant une meilleure expérience utilisateur. Cet article présentera en détail comment implémenter l'effet de menu déroulant dans l'applet WeChat et fournira des informations pratiques.

Comment utiliser PHP pour développer la fonction de transaction d'occasion de l'applet WeChat ? Comment utiliser PHP pour développer la fonction de transaction d'occasion de l'applet WeChat ? Oct 27, 2023 pm 05:15 PM

Comment utiliser PHP pour développer la fonction de transaction d'occasion de l'applet WeChat ? En tant que plate-forme de développement d'applications mobiles populaire, l'applet WeChat est utilisée par de plus en plus de développeurs. Dans les mini-programmes WeChat, les transactions de seconde main constituent une exigence fonctionnelle courante. Cet article expliquera comment utiliser PHP pour développer la fonction de transaction secondaire de l'applet WeChat et fournira des exemples de code spécifiques. 1. Travail de préparation Avant de commencer le développement, vous devez vous assurer que les conditions suivantes sont remplies : l'environnement de développement de l'applet WeChat a été configuré, y compris l'enregistrement de l'AppID de l'applet et sa configuration en arrière-plan de l'applet.

Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel Utilisez l'applet WeChat pour obtenir un effet de changement de carrousel Nov 21, 2023 pm 05:59 PM

Utilisez l'applet WeChat pour obtenir un effet de commutation de carrousel. L'applet WeChat est une application légère avec des caractéristiques de développement et d'utilisation simples et efficaces. Dans les mini-programmes WeChat, il est courant d'obtenir des effets de commutation de carrousel. Cet article explique comment utiliser l'applet WeChat pour obtenir l'effet de changement de carrousel et donne des exemples de code spécifiques. Tout d’abord, ajoutez un composant carrousel au fichier d’échange de l’applet WeChat. Par exemple, vous pouvez utiliser la balise &lt;swiper&gt; pour obtenir l'effet de commutation du carrousel. Dans ce composant, vous pouvez passer b

Implémenter des effets de filtre d'image dans les mini-programmes WeChat Implémenter des effets de filtre d'image dans les mini-programmes WeChat Nov 21, 2023 pm 06:22 PM

Implémentation d'effets de filtre d'image dans les mini-programmes WeChat Avec la popularité des applications de médias sociaux, les gens aiment de plus en plus appliquer des effets de filtre aux photos pour améliorer l'effet artistique et l'attractivité des photos. Les effets de filtre d'image peuvent également être implémentés dans les mini-programmes WeChat, offrant aux utilisateurs des fonctions de retouche photo plus intéressantes et créatives. Cet article expliquera comment implémenter des effets de filtre d'image dans les mini-programmes WeChat et fournira des exemples de code spécifiques. Tout d’abord, nous devons utiliser le composant canevas dans l’applet WeChat pour charger et modifier des images. Le composant canevas peut être utilisé sur la page

Implémenter l'effet de rotation d'image dans l'applet WeChat Implémenter l'effet de rotation d'image dans l'applet WeChat Nov 21, 2023 am 08:26 AM

Pour implémenter l'effet de rotation d'image dans WeChat Mini Program, des exemples de code spécifiques sont nécessaires. WeChat Mini Program est une application légère qui offre aux utilisateurs des fonctions riches et une bonne expérience utilisateur. Dans les mini-programmes, les développeurs peuvent utiliser divers composants et API pour obtenir divers effets. Parmi eux, l'effet de rotation d'image est un effet d'animation courant qui peut ajouter de l'intérêt et des effets visuels au mini-programme. Pour obtenir des effets de rotation d'image dans les mini-programmes WeChat, vous devez utiliser l'API d'animation fournie par le mini-programme. Ce qui suit est un exemple de code spécifique qui montre comment

See all articles