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 サービスをインストールするチュートリアル図

推薦する

Mysql マスタースレーブレプリケーションの注意事項の説明

1. マスター'x@xxxx:x'への接続エラー- 再試行時間: 60 再試行回数:...

Vueの子コンポーネントと親コンポーネントの詳細な分析

目次1. 親コンポーネントと子コンポーネント2. テンプレート分離書き込み1. テンプレートタグ2....

Win10システムにMySQL 8.0をインストールするときに発生する問題を解決する

Win10 システムに MySQL 8.0 をインストールする際に発生する問題と解決策は次のとおりで...

Node.jsミドルウェアの仕組みの詳細な説明

目次Express ミドルウェアとは何ですか? Expressミドルウェアを作成するための要件Exp...

Vueのコンポーネントの詳細な説明

目次1. コンポーネントの登録2. コンポーネントの使用3. 父から息子へ4. 息子から父へ5. ス...

MySQL リンクを表示し、異常なリンクを削除する方法

序文:データベースの運用や保守の際には、リンクの総数がいくつあるか、アクティブなリンクがいくつあるか...

Linux で nginx を起動および再起動する方法

Nginx (エンジン x) は、IMAP/POP3/SMTP サービスも提供する高性能 HTTP ...

Vueコンポーネントドキュメント生成ツールライブラリのメソッド

目次.vue ファイルの解析文書情報を抽出するコンポーネント名、説明、プロパティ、メソッド、モデルを...

初心者がHTMLタグを学ぶ(1)

初心者は、いくつかの HTML タグを理解することで HTML を学習できます。この入門書は、初心者...

CentOS 7でsambaを使用してフォルダーを共有するための完全な手順

序文Samba は、サーバー プログラムとクライアント プログラムで構成され、Linux システム上...

Docker を使用して ELK 環境を迅速にデプロイする方法の詳細な説明 (最新バージョン 5.5.1)

Linux サーバーに Docker をインストールした後、関連する公式 Docker イメージを...

Windows 10 で MySQL 8.0.12 の解凍バージョンをインストールして構成する方法 (グラフィック チュートリアル付き)

この記事では、MySQL 8.0.12 の解凍版のインストールと設定方法を記録し、皆様と共有します。...

CentOS 7 での Nginx ログタイミング分割の実装手順の詳細説明

1. 分割スクリプト (splitNginxLog.sh) を作成します。 * この例では、ログ分割...

Vue プロジェクトを実行するときに `--fix` オプションで修正できる可能性のある警告のエラー問題を解決します。

問題: vue-cil3 は、`--fix` オプションで修正できる可能性のある警告とともに実行され...

包括的なウェブサイト評価ソリューション

<br />「XXXのウェブサイトを見てみませんか?」といった質問をされることもあります...