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

推薦する

H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...

HTMLはa要素hrefのURLリンクを自動的に更新したり新しいウィンドウを開いたりする機能を実装する

場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...

Linux での一般的なシェル スクリプト コマンドと関連知識

目次1. 覚えておくべき知識1. 変数タイプ2. シェル変数の説明3. シングルクォート、ダブルクォ...

Vue の基本 MVVM、テンプレート構文、データバインディング

目次1. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...

WeChatミニプログラムビデオ集中砲火位置ランダム

この記事では、WeChatミニプログラムのビデオ弾幕の位置をランダム化するための具体的なコードを紹介...

MySQL フラッシュリストとダーティページフラッシュメカニズム

1. レビューMySQL の起動後にバッファ プールが初期化されます。バッファ プールは N 個の空...

Vueのコンポーネント値の転送から始まるオブザーバーモードの詳細な説明

目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...

HTMLがHikvisionカメラのリアルタイム監視機能を実現

最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...

Linux でコマンドまたはプロセスの実行時間を調べる方法

Unix ライクなシステムでは、コマンドまたはプロセスの実行がいつ開始されたか、またプロセスがどのく...

Centos7 に mysql と mysqlclient をインストールする際に遭遇する落とし穴の概要

1. MySQL Yumリポジトリを追加するMySQL公式サイト>ダウンロード>MySQ...

HTML コマンドラインインターフェースの実装

HTML部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> &l...

HTML ページにミュージック ビデオを追加する例

1. ビデオタグFirefoxでは自動再生をサポートしますが、GoogleとIEではサポートしません...

Alibaba Cloud Centos6.X でメールを送信する際に発生するさまざまな問題

序文: Webサービスを提供するために、Alibabaクラウドホストを新しくインストールしました。す...

NginxとLuaによるグレースケールリリースの実装

memcachedをインストールする yum インストール -y memcached #memcac...