この記事では、サイコロゲームを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VirtualBox を使用して Linux クラスターをシミュレートする方法
>>: Windows で MySQL インストーラーを使用して MySQL サービスをインストールするチュートリアル図
序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...
## 1最近、docker デプロイメントを学習しており、当初は nginx を docker 化す...
目次序文どのような状況でメモリリークが発生する可能性がありますか? 1. 偶発的なグローバル変数2....
JS、CSSについてCS: ...上部のスタイルシートCSS式を避ける外部JS、CSSの使用JSと...
Linux 操作実験環境: Centos7 仮想マシンまず、共通ユーザーgubeiqingを作成しま...
この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...
1. コマンドの紹介tac (cat の逆順) コマンドは、ファイルの内容を行単位で逆順に出力します...
序文プロジェクト開発中、各人のコーディング習慣が異なるため、記述された CSS コードは十分に構造化...
思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。主...
優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...
目次問題の説明MySQLオンラインDDLで列を追加する従来の方法01 コピー方法02 インプレースメ...
目次1. ウィザードに従って仮想マシンを作成します2. オペレーティングシステムをインストールします...
Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...
この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...
最も一般的な方法は、フィールドに主キーまたは一意のインデックスを設定することです。重複データを挿入す...