この記事では、サイコロゲームを実装するための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 サービスをインストールするチュートリアル図
目次1. クロスドメインフィルタ CorsFilter 1.1 設定例1.2 パラメータの説明2. ...
目次概要データ URL の使用を開始するデータURL構文複数言語の文字列のBase64エンコードとデ...
MySQL公式サイトのダウンロードアドレス: https://dev.mysql.com/downl...
プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...
1. 構成デフォルトでは、最初の 2 つはチェックされていないので、チェックする必要があります。 (...
ヒント:配列変更メソッドによりv-forが更新され、ページが更新されます。配列を変更しないメソッド:...
目次1. JavaScript オブジェクト1).配列オブジェクト2).ブールオブジェクト3).日付...
マウスをある領域の上に置くと、その領域に点線の境界線と線のアニメーションが表示されるというクールな効...
大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...
目次要件:実装手順:この記事では主に以下について説明します: カスタムツリーコントロール<el...
目次1. Dockerのセキュリティ問題2. Dockerアーキテクチャの欠陥とセキュリティメカニズ...
NetEase Blog でコードを使用する方法: まずブログにログインし、ブログのホームページの左...
<br />関連記事: innerHTML HTML DOM insertRow() メ...
序文日常業務では、すべての jpg ファイルを bnp に変更したり、名前の 1 を one に変更...
序文私たちの日常の開発プロセスでは、ソートが頻繁に使用され、そのような要求がある場合もあります。たと...