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

推薦する

Alibaba Cloud OSS によってアップロードされた Nginx プロキシ転送実装コード

序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...

実行後にdocker nginxにアクセスできない問題の解決策

## 1最近、docker デプロイメントを学習しており、当初は nginx を docker 化す...

js メモリ リークのシナリオ、それらを詳細に監視および分析する方法

目次序文どのような状況でメモリリークが発生する可能性がありますか? 1. 偶発的なグローバル変数2....

ページ リファクタリング スキル - Javascript、CSS

JS、CSSについてCS: ...上部のスタイルシートCSS式を避ける外部JS、CSSの使用JSと...

Linux でユーザーを完全に削除する 2 つの方法

Linux 操作実験環境: Centos7 仮想マシンまず、共通ユーザーgubeiqingを作成しま...

ウィンドウ表示効果を実現するJavaScript

この記事では、ウィンドウ表示効果を実現するためのJavaScriptの具体的なコードを参考までに紹介...

Linux tac コマンドの実装例

1. コマンドの紹介tac (cat の逆順) コマンドは、ファイルの内容を行単位で逆順に出力します...

CSS仕様 BEM CSSとOOCSSサンプルコード詳細説明

序文プロジェクト開発中、各人のコーディング習慣が異なるため、記述された CSS コードは十分に構造化...

跳ねるボールを実現するネイティブjs

思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。主...

MySQL の左結合操作における on 条件と where 条件の違いの紹介

優先度両方のケースで同じ条件を設定すると、異なる結果セットが生成される可能性があるのは、優先順位のた...

MySQL 8.0 オンライン DDL クイック列追加の概要

目次問題の説明MySQLオンラインDDLで列を追加する従来の方法01 コピー方法02 インプレースメ...

WindowsはVMwareを使用してLinux仮想マシンを作成し、CentOS7.2オペレーティングシステムをインストールします。

目次1. ウィザードに従って仮想マシンを作成します2. オペレーティングシステムをインストールします...

Linux のハードリンクとソフトリンクの区別

Linux には、2 種類のファイル接続があります。1 つは Windows のショートカットに似て...

ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明

この記事には、細かい点は一切なく、カラーマッチングのテクニックをシェアするだけです。とてもシンプルで...

MySQL でデータの重複挿入を回避する 4 つの方法

最も一般的な方法は、フィールドに主キーまたは一意のインデックスを設定することです。重複データを挿入す...