WeChatアプレットはシンプルなサイコロゲームを実装します

WeChatアプレットはシンプルなサイコロゲームを実装します

この記事では、サイコロゲームを実装するためのWeChatアプレットの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

ページコード

<view class='top'>{{txt}}</view>
<ビュークラス='point1'>
 <画像 src='{{one_img}}'></画像>
</ビュー>
<ビュークラス='point2'>
 <画像 src='{{two_img}}'></画像>
 <画像 src='{{three_img}}'></画像>
</ビュー>
<view class='btn' bindtap='enter'>{{msg}}</view>

スタイルコード

。トップ{
  幅: 220ピクセル;
  高さ: 30px;
  フォントサイズ: 25px;
  マージン: 20px 自動;
}
.point1 画像、.point2 画像{
  幅: 150ピクセル;
  高さ: 150px;
}
.point1 画像{
  表示: ブロック;
  マージン:45px 自動;
}
.point2 画像{
   上マージン: -20px;
   左マージン: 25px;
}
.btn{
  幅:100%;
  高さ:60px;
  背景:緑;
  境界線の半径: 10px;
  行の高さ: 60px;
  テキスト配置: 中央;
  フォントサイズ: 30px;
  上マージン: 60px;
}

jsコード

//index.js
//アプリケーションインスタンスを取得する const app = getApp()

ページ({
  データ: {
    one_img:'../../image/6-point.png',
    two_img: '../../image/6-point.png',
    three_img: '../../image/6-point.png',
    フラグ:true、
    タイマー:null、
    メッセージ:「振って」
    合計:0,
    txt:'おめでとうございます、獲得点数: 0',
    //画像素材とレンダリングは下部に掲載されます arr:[
      '../../image/1-point.png',
      '../../image/2-point.png',
      '../../image/3-point.png',
      '../../image/4-point.png',
      '../../image/5-point.png',
      '../../image/6-point.png',
    ]
  },
  入力:関数(イベント){
    obj = this とします。
    if(obj.data.flag==true){
       obj.data.timer = setInterval(関数() {
        1 = Math.floor(Math.random() * 6); とします。
        2をMath.floor(Math.random() * 6)とします。
        three = Math.floor(Math.random() * 6); とします。
        obj.setData({
          one_img: obj.data.arr[one],
          two_img: obj.data.arr[two],
          three_img: obj.data.arr[three],
          フラグ:false、
          メッセージ: '停止',
          合計:1+2+3+3、
         // 合計: 18,
          TXT:''、
        })
      }, 50);
    }それ以外{
      タイマー間隔をクリアします。
      obj.setData({
         //one_img: obj.data.arr[5],
         //2つの画像: obj.data.arr[5],
         //three_img: obj.data.arr[5],
           メッセージ:「振って」
           フラグ:true、
           txt:'おめでとうございます、勝ちました:' + obj.data.total,
      })
    }
   
  },
  
})

画像資料とレンダリング

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットはふるいを振る効果を実現

<<:  VirtualBox を使用して Linux クラスターをシミュレートする方法

>>:  Windows で MySQL インストーラーを使用して MySQL サービスをインストールするチュートリアル図

推薦する

CSS変数を使用してダークモードを実装するためのサンプルコード

最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...

CentOS 7.6 への MySQL 5.7 GA バージョンのインストール チュートリアル図

目次環境の準備環境の準備mariadbをアンインストールする rpm -qa | grep mari...

Win Server 2019 サーバーの IIS 構成と Web サイトの簡単な公開

1.まずサーバーにリモート接続する2. サーバーマネージャーを開く 3役割と機能の追加 4サーバープ...

MySQLパスワードを変更するいくつかの方法

序文:データベースを日常的に使用すると、パスワードが単純すぎて変更する必要がある場合、パスワードの有...

Vue+video.jsはビデオプレイリストを実装します

この記事では、ビデオプレイリストを実装するためのvue + video.jsの具体的なコードを参考ま...

Vue3とElectronを使ったデスクトップアプリケーションの詳しい説明

目次Vue CLIはVueプロジェクトを構築しますVue プロジェクトをマークダウン エディターに変...

jQueryはフェードインとフェードアウト効果を実現します

jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...

VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストール プロセス

目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...

Docker の 4 つのネットワーク タイプの主な例

4 つのネットワーク タイプ:なし: コンテナのネットワーク機能を一切設定しません。--net=no...

React コンポーネントのコンストラクタとスーパーの知識ポイントのまとめ

1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...

CSS のフィルター属性とバックドロップフィルターの適用と違いの詳細な説明

フィルターとバックドロップフィルターにはいくつかの違いがあります。フィルターは現在の要素だけでなく、...

仮想マシンでXshell5をLinuxに接続する方法と障害の解決方法

かなり前に仮想マシンをインストールしましたが、ようやく Linux をインストールしました。マシンの...

FTP、FTPS、SFTPの違いについて簡単に説明します

目次FTP、FTPS、SFTP の概要FTP FTPS FTPサーバーFTPソフトウェアのアクティブ...

CSS テキスト配置実装コード

フォームを作成するときに、名前、携帯電話番号、出生地などの 2 つのフィールドを揃える状況に遭遇する...

テーブル適応とオーバーフローのいくつかの設定の詳細な説明

1. テーブル リセットの 2 つのプロパティ: ①border-collapse: collaps...