この記事では、サイコロゲームを実装するための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 サービスをインストールするチュートリアル図
序文CentOS に MySQL をインストールして設定する手順は次のとおりです。文章yumソースか...
具体的なコードは次のとおりです。 <div id="ボックス"> &...
1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...
目次1. ドラッグ効果の例2. CSS実装の原則3. CSS実装の詳細4. CSSレイアウト1. 固...
今週は戦争のように忙しかったです。他人に操られているような気がします。毎日朝早く出勤して夜遅く帰り、...
utf8mb4 エンコーディングは utf8 エンコーディングのスーパーセットであり、utf8 と互...
プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...
1. 現在インストールされているPHPパッケージを確認するyum list installed |...
Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...
目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...
BMP は、ハードウェア デバイスに依存せず、広く使用されている画像ファイル形式です。ビットマップ保...
序文この記事では、Windows で Mysql をバックアップするための簡単な BAT スクリプト...
目次導入配列の作成作成方法詳しい説明方法参加する() push() と pop() shift() ...
この記事では、参考までにMySQLバックアップスクリプトを紹介します。具体的な内容は次のとおりです。...
目次1. データを準備するデータテーブルを作成するデータの挿入2. SQLドリル1. SQL文の強化...