效果图：
源码：
index.wxml:
<view>
<view class="content" style=" background-image: url('{{bg}}');">
<view class="bg-box">
<image bindtap="musicStop" class="music" mode="widthFix" src="../../images/jump/music-on.png" wx:if="{{musicOn}}"></image>
<image bindtap="musicPlay" class="music" mode="widthFix" src="../../images/jump/music-off.png" wx:else="{{!musicOn}}"></image>
<block wx:for="{{fd}}" wx:key="id">
<image class="fd" mode="widthFix" style="{{'top: ' + item.top + '; left: ' + item.left+';'}}" src="{{item.src}}"></image>
</block>
<image class="rabit" mode="widthFix" style="{{'top:' + rabitStyle.top + ';left:' + rabitStyle.left + ';'}}" src="../../images/jump/rabit.png"></image>
<image wx:if="{{gameStatus > 1}}" class="dice" style="background-image: '/jump/dice-bg.png';" mode="widthFix" src="../../images/jump/6.png" bindtap="jump"></image>
<view wx:if="{{gameStatus > 1}}" class="play-btn" bindtap="jump">掷骰子</view>
</view>
<!-- 投骰子 -->
<view wx:if="{{diceShow}}" class="dice_bg">
<image class="dice_gif" src="../../images/jump/dice.gif" mode="widthFix"></image>
</view>
<view wx:if="{{diceShow1}}" class="dice_bg1" style="{{'background-image:url('+diceBg[num].background + ');background-repeat:' + diceBg[num].background-repeat+';background-size:'+diceBg[num].background-size+';'}}"></view>
<!-- 爆炸 -->
<view wx:if="{{pengShow}}" class="peng">
<image class="peng-img" src="../../images/jump/peng.png" mode="widthFix"></image>
</view>
<!-- 遮罩 -->
<view wx:if="{{maskShow}}" class="mask"></view>
<view wx:if="{{gameStatus === 1}}">
<image class="icon" src="../../images/jump/6.png" mode="widthFix"></image>
<view class="start" bindtap="start">开始游戏</view>
<view class="clear" bindtap="clear">清除缓存</view>
</view>
</view>
</view>index.wxss:
[v-cloak] {
display: none !important;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #000;
opacity: 0.5;
z-index: 8;
}
.icon {
position: absolute;
top: 30%;
left: 25%;
width: 50%;
z-index: 8;
}
.start {
position: absolute;
top: 62%;
left: 25%;
width: 50%;
height: 6vh;
line-height: 6vh;
text-align: center;
border-radius: 50rpx;
background-color: #ffaa00;
z-index: 9;
color: #fff;
}
.clear {
position: absolute;
top: 70%;
left: 25%;
width: 50%;
height: 6vh;
line-height: 6vh;
text-align: center;
border-radius: 50rpx;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9;
color: #fff;
}
.music {
width: 50rpx;
position: absolute;
top: 2%;
right: 3%
}
.rabit {
width: 100rpx;
position: absolute;
}
.fd {
width: 60rpx;
position: absolute;
}
.dice {
width: 180rpx;
position: absolute;
top: 80%;
left: 38%;
}
.play-btn {
width: 180rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
background-color: #fdba5e;
border-radius: 30rpx;
position: absolute;
top: 95%;
left: 38%;
color: #fff;
}
.draw {
width: 180rpx;
position: absolute;
top: 90%;
right: 10%;
}
.bg-box {
width: 100%;
height: 100%;
}
.dice_bg {
z-index: 999999;
top: 15%;
left: 12%;
position: fixed;
width: 80%;
height: 867rpx;
/*line-height: 1250rpx;*/
padding-top: 52%;
background: url('https://i.hd-r.cn/c2cbe63192de7484039c4cbcbd31cc5e.png');
background-repeat: no-repeat;
background-size: 100%;
text-align: center;
}
.dice_gif {
width: 38%;
}
.dice_bg1 {
z-index: 999999;
top: 15%;
left: 12%;
position: fixed;
width: 80%;
height: 867rpx;
line-height: 1250rpx;
background-repeat: no-repeat;
background-size: 100%;
text-align: center;
}
.peng {
position: absolute;
top: 30%;
left: 25%;
width: 50%;
animation: peng 6s forwards;
}
.peng-img {
width: 100%;
}
.content {
width: 100%;
height: 100vh;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
@keyframes peng {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(2);
opacity: 0;
}
100% {
transform: scale(0);
opacity: 0;
}
}index.js:
// pages/game/index.js
Page({
/**
* 页面的初始数据
*/
data: {
// 游戏状态
gameStatus: 1,
num:0,
maskShow: true,
//骰子图片
diceSrc: '',
bg: 'https://i.hd-r.cn/bbc01b213a2032d8ecee63b5e1977d67.png',
//骰子动画展示
diceShow: false,
//骰子静止展示
diceShow1: false,
//音乐播放状态
musicOn: false,
//音频对象
innerAudioContext: null,
//是否可以点击骰子
playStatus: true,
diceBg: [{
'background': 'https://i.hd-r.cn/6e8ee5550b74f660b92f7241bc9ff46e.png',
'background-repeat': 'no-repeat',
'background-size': '100%'
},
{
'background': 'https://i.hd-r.cn/d6db92b586c0f9e2031c55e9cc3c12ba.png',
'background-repeat': 'no-repeat',
'background-size': '100%'
},
{
'background': 'https://i.hd-r.cn/8038df8d811b52644e370e4ec158539d.png',
'background-repeat': 'no-repeat',
'background-size': '100%'
},
{
'background': 'https://i.hd-r.cn/4be976adc597eb0fc0707cb14da9f2c2.png',
'background-repeat': 'no-repeat',
'background-size': '100%'
},
{
'background': 'https://i.hd-r.cn/b9e68e4e15d79d5fbbf93a73de30a28c.png',
'background-repeat': 'no-repeat',
'background-size': '100%'
},
{
'background': 'https://i.hd-r.cn/68adffcaf9c5ccb6efe217b8de76199e.png',
'background-repeat': 'no-repeat',
'background-size': '100%'
}],
// 爆炸状态
pengShow: false,
//当前位置
now: 0,
// 主角样式
rabitStyle: {},
//奖励惩罚位置
fd: [{
id:0,
top: '69%',
left: '47%',
src: 'https://i.hd-r.cn/d85959330d68e88bbe9d736220b9c2df.png'
},
{
id:1,
top: '67%',
left: '57%',
src: 'https://i.hd-r.cn/b5e7757f209980049d41c9e1e16f9de3.png'
},
{
id:2,
top: '61.5%',
left: '74%',
src: 'https://i.hd-r.cn/fb9fc93ec45d23ca153417e6e36bdcb6.png'
}, {
id:3,
top: '56%',
left: '57%',
src: 'https://i.hd-r.cn/b5e7757f209980049d41c9e1e16f9de3.png'
}, {
id:4,
top: '50%',
left: '38%',
src: 'https://i.hd-r.cn/d85959330d68e88bbe9d736220b9c2df.png'
}, {
id:5,
top: '42%',
left: '47%',
src: 'https://i.hd-r.cn/fb9fc93ec45d23ca153417e6e36bdcb6.png'
}, {
id:6,
top: '36%',
left: '29%',
src: 'https://i.hd-r.cn/b5e7757f209980049d41c9e1e16f9de3.png'
}, {
id:7,
top: '23%',
left: '57%',
src: 'https://i.hd-r.cn/d85959330d68e88bbe9d736220b9c2df.png'
}
],
// 格子坐标
xy: [{
top: "66%",
left: "6%"
},
{
top: "64%",
left: "17%"
},
{
top: "61%",
left: "26%"
},
{
top: "64%",
left: "35%"
},
{
top: "66.5%",
left: "44%"
},
{
top: "63.5%",
left: "53%"
},
{
top: "61%",
left: "62%"
},
{
top: "58.5%",
left: "71%"
},
{
top: "55.5%",
left: "62%"
},
{
top: "53%",
left: "53%"
},
{
top: "49.5%",
left: "44%"
},
{
top: "47.5%",
left: "35%"
},
{
top: "44%",
left: "44%"
},
{
top: "41%",
left: "53%"
},
{
top: "39%",
left: "44%"
},
{
top: "36%",
left: "35%"
},
{
top: "33.5%",
left: "26%"
},
{
top: "30%",
left: "35%"
},
{
top: "27%",
left: "44%"
},
{
top: "20.5%",
left: "54%"
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 初始化主角位置
let now = wx.getStorageSync('now');
if (now) {
this.setData({
now: now
})
}
console.log("now=="+this.data.now);
this.setData({
rabitStyle: this.data.xy[this.data.now]
})
console.log("rabitStyle=="+this.data.rabitStyle.top);
// 初始化音效
this.innerAudioContext = wx.createInnerAudioContext();
console.log("inner=="+this.innerAudioContext);
this.innerAudioContext.loop = true;
setTimeout(() => {
console.log("innerloop==" + this.innerAudioContext.loop);
}, 1000); // 延迟1秒打印，看看属性值是否已更新
this.innerAudioContext.src = 'cloud://cloud1-6g7f3wc76ec2a972.636c-cloud1-6g7f3wc76ec2a972-1327092960/jump/bgm.mp3';
},
//普通函数
start() {
this.setData({
gameStatus: 2,
maskShow: false
})
this.musicPlay();
},
clear() {
wx.clearStorage('now');
this.now = 0;
this.rabitStyle = this.xy[this.now];
wx.showToast({
icon: 'success',
title: '缓存清理成功'
})
},
musicPlay() {
this.setData({
musicOn:true
})
this.innerAudioContext.play();
},
musicStop() {
this.musicOn = false;
this.innerAudioContext.pause();
},
closeAll() {
this.diceShow = false; //骰子动画展示
this.diceShow1 = false; //骰子静止展示
},
jump() {
if (this.data.playStatus) {
this.playStatus = false;
var that = this;
// 骰子点数
var num = Math.ceil(Math.random() * 6);
console.log("num=="+num);
this.setData({
num:num
})
// 开启遮罩
this.setData({
maskShow:true,
diceShow:true
})
setTimeout(function () {
that.setData({
diceShow:false,
diceShow1:true
});
}, 1500)
console.log(that.data.diceBg[num]);
var max = 0;
setTimeout(function () {
that.setData({
maskShow:false,
diceShow1:false
});
var t = setInterval(function () {
max++;
if (max > num) {
wx.setStorageSync('now', that.data.now);
that.setData({
playStatus:true
})
that.check();
clearInterval(t);
} else {
let now = that.data.now + 1;
console.log(now);
if (now > 19) {
now = 0;
}
that.setData({
now:now,
rabitStyle:that.data.xy[now]
})
}
}, 600)
}, 3500)
}
},
check() {
if (this.data.now == 4 || this.data.now == 11 || this.data.now == 19) {
wx.showToast({
icon: 'none',
duration: 2500,
title: '恭喜您获得1个福袋礼包'
})
} else if (this.data.now == 5 || this.data.now == 9 || this.data.now == 16) {
wx.showToast({
icon: 'none',
duration: 2000,
title: '卧槽,炸弹...'
})
this.setData({
pengShow:true,
now:0,
rabitStyle:this.data.xy[this.data.now]
})
wx.setStorageSync('now', this.data.now);
const that = this;
setTimeout(function () {
that.setData({
pengShow:false
})
}, 3000)
} else if (this.data.now == 7 || this.data.now == 14) {
wx.showToast({
icon: 'none',
duration: 2000,
title: '不好意思,后退1步'
})
let now = this.data.now - 1
this.setData({
rabitStyle:this.data.xy[now]
})
wx.setStorageSync('now', this.now);
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
this.musicStop()
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
this.musicStop()
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})index.json:
{
"usingComponents": {}
}能看懂代码的兄弟直接拿走就好，不过要注意的一点是你看到这篇文章的时候，里面的网络图片的链接可能会失效，大家可以点击跳一跳 - DCloud 插件市场，这里有h5的实现，里面找到对应的图片，然后通过图床转换成网络图片即可，不过用这种小程序的方式直接去实现的小游戏都是简单些小游戏，复杂些的建议去学习小游戏或者其他的游戏语言和框架，代码的实现的大致逻辑如下：
首先，默认状态 gameStatus: 1，当我们点击开始游戏的时候 gameStatus会改变成2，然后点击掷骰子按钮，这是就会开启遮罩生成随机数字，在设置的时间内一步步的跳到对应的位置上，若是跳到特殊位置也会触发对应的函数，最后，给出对应的奖惩。
这其实是一个游戏逻辑，具体实现会比较繁琐，大家通过这个游戏的逻辑去梳理就好。
希望对你有所帮助，如果对你有用的话，可以点赞收藏起来，方便下次查阅呦
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
