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

推薦する

CentOS に MySQL 8.0 をインストールして設定するための詳細な手順

序文CentOS に MySQL をインストールして設定する手順は次のとおりです。文章yumソースか...

css n番目から始まるすべての要素を取得する

具体的なコードは次のとおりです。 <div id="ボックス"> &...

CSS 配置レイアウト (位置、配置レイアウト スキル)

1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...

ドラッグ効果を実現するための純粋なCSSコード

目次1. ドラッグ効果の例2. CSS実装の原則3. CSS実装の詳細4. CSSレイアウト1. 固...

大規模なMySQLデータベース用のマスタースレーブシステムを構築するアイデアを共有する

今週は戦争のように忙しかったです。他人に操られているような気がします。毎日朝早く出勤して夜遅く帰り、...

MySQL データベースのエンコーディングを utf8mb4 に変更する方法

utf8mb4 エンコーディングは utf8 エンコーディングのスーパーセットであり、utf8 と互...

CSS を使用してテクスチャ付きグラデーション背景画像を記述するためのサンプル コード

プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...

CentOS 6-7 PHPのyumインストール方法(推奨)

1. 現在インストールされているPHPパッケージを確認するyum list installed |...

CentOS 7 で grub パスワードと単一ユーザー ログインを設定するサンプル コード

Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...

MySQLインデックスの基礎となるデータ構造の詳細

目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...

さまざまなネットワーク画像形式におけるPNGの利点の詳細な説明

BMP は、ハードウェア デバイスに依存せず、広く使用されている画像ファイル形式です。ビットマップ保...

Windows でのシンプルな Mysql バックアップ BAT スクリプトの共有

序文この記事では、Windows で Mysql をバックアップするための簡単な BAT スクリプト...

JavaScript 配列メソッドの詳細な例

目次導入配列の作成作成方法詳しい説明方法参加する() push() と pop() shift() ...

mysql バックアップ スクリプト mysqldump の使い方の詳細な説明

この記事では、参考までにMySQLバックアップスクリプトを紹介します。具体的な内容は次のとおりです。...

MySQLとPythonの相互作用の例

目次1. データを準備するデータテーブルを作成するデータの挿入2. SQLドリル1. SQL文の強化...