微信小程序版翻牌小游戲
本文實例為大家分享了微信小程序翻牌游戲的具體代碼，供大家參考，具體內(nèi)容如下
一、新建一個quick start項目看看結(jié)構(gòu)
在微信開發(fā)工具點擊添加項目，選擇 無appid，勾上"在當(dāng)前目錄中創(chuàng)建quick start 項目"。
可以看到一共有兩個目錄 pages和utils，和根目錄下的3個app文件。pages存放的是小程序的頁面，每個也面都有自己獨立的文件夾。 一個頁面由4文件構(gòu)成，js文件是程序邏輯；wxss是微信定義的樣式文件，語法跟css一樣，支持的樣式要少一些；wxml文件用來定義小程序的界面，作用類似于html，但是只能用微信自定義的一些標(biāo)簽，而且頁面元素不能直接用js操作，只能通過綁定數(shù)據(jù)來修改；json是頁面的配置文件一般用不著。根目錄下的app.js,app.json,app.wxml作用和pages下面的作用類似,只不過pages下面的是頁面級的,根目錄下的是成個應(yīng)用級的>。utils下面定義了一個轉(zhuǎn)換時間格式工具函數(shù)，然后通過module.exports將函數(shù)暴露出去，再在logs.js中通過require引入。
二、改造index頁面
知道了小程序的結(jié)構(gòu)就可以動手開始做了，首先把index頁面改造一下，把用戶頭像上的點擊事件去掉，然后再新增兩個按鈕，用來跳轉(zhuǎn)到游戲主界面和游戲成績界面。
1.界面，bindtap相當(dāng)于html的onclick
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<text class="userinfo-nickname"></text>
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
<text class="userinfo-nickname">你好</text>
</view>
<view class="usermotto" >
<text class="user-motto" bindtap="startGame">{{motto}}</text>
</view>
<view style="margin-top:30rpx; ">
<text class="user-motto" bindtap="viewScore" >查看排名</text>
</view>
</view>
2.index.js 文件的Page中增加兩個處理點擊事件的函數(shù),用wx.navigateTo來跳轉(zhuǎn)的目標(biāo)頁
//index.js
//獲取應(yīng)用實例
var app = getApp()
Page({
data: {
motto: '開始游戲',
userInfo: {},
welcome:'你好'
},
//事件處理函數(shù)
startGame: function() {
wx.navigateTo({
url: '../game/game'
})
},viewScore: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//調(diào)用應(yīng)用實例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)
that.setData({
userInfo:userInfo
})
})
}
})
3.index.wxss中增加游戲背景圖
page{background: url('../images/gamebg.jpg') center top; }
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中的方法調(diào)用詳細(xì)介紹
這篇文章主要介紹了JavaScript中的方法調(diào)用詳細(xì)介紹,JavaScript中,如果function屬于一個對象,那么通過對象來訪問該function的行為稱之為“方法調(diào)用”,需要的朋友可以參考下2014-12-12
在做數(shù)據(jù)交互的時候,我們經(jīng)常需要判斷數(shù)據(jù)或者對象是不是為空,避免當(dāng)接口異常時候前端頁面崩潰,下面這篇文章主要給大家介紹了關(guān)于JS判斷空對象的幾個方法,需要的朋友可以參考下2022-02-02
JavaScript實現(xiàn)將阿拉伯?dāng)?shù)字轉(zhuǎn)換成中文或大寫中文的方法
現(xiàn)在有需求將億元之內(nèi)的阿拉伯?dāng)?shù)字轉(zhuǎn)換成中文,例如：1234轉(zhuǎn)換后變?yōu)橐磺Ф偃脑俎D(zhuǎn)換成壹仟貳佰叁拾肆,所以本文給大家介紹了用JavaScript實現(xiàn)將阿拉伯?dāng)?shù)字轉(zhuǎn)換成中文大寫,感興趣的小伙伴跟著小編一起來看看吧2024-11-11
JavaScript 只有一種數(shù)字類型 Number ，而且在Javascript中所有的數(shù)字都是以IEEE-754標(biāo)準(zhǔn)格式表示的。 浮點數(shù)的精度問題不是JavaScript特有的，因為有些小數(shù)以二進(jìn)制表示位數(shù)是無窮的2013-08-08
這篇文章主要介紹了移動端JS實現(xiàn)拖拽兩種方法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
JS+CSS實現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼
這篇文章主要介紹了JS+CSS實現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼,可實現(xiàn)滑塊彈性振動效果的導(dǎo)航效果,涉及jQuery數(shù)學(xué)運算及頁面元素樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-09-09
UNIAPP實現(xiàn)微信小程序登錄授權(quán)和手機號授權(quán)功能(uniapp做微信小程序)
uniapp開發(fā)小程序,先授權(quán)用戶信息后再出現(xiàn)手機號授權(quán)的頁面進(jìn)行手機號授權(quán),完成后返回上一頁面并把信息存入后臺以及前臺緩存中,方便使用,這篇文章主要介紹了UNIAPP實現(xiàn)微信小程序登錄授權(quán)和手機號授權(quán)（uniapp做微信小程序）,需要的朋友可以參考下2024-08-08
JavaScript 引用類型實例詳解【數(shù)組、對象、嚴(yán)格模式等】
這篇文章主要介紹了JavaScript 引用類型,結(jié)合實例形式詳細(xì)分析了JavaScript 數(shù)組、對象、嚴(yán)格模式引用類型相關(guān)概念、原理及操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了一個獲取第n個元素節(jié)點的js函數(shù),功能還不完善 ，需要的朋友可以參考下2014-09-09
這篇文章主要為大家詳細(xì)介紹了JS組件Bootstrap Select2使用方法，感興趣的小伙伴們可以參考一下2016-05-05