帮忙用微信小程序语言写一个羊了个羊小游戏
时间: 2023-10-22 22:08:39 浏览: 67
好的,这里给您提供一个简单的羊了个羊小游戏的示例代码。在微信小程序中,可以使用wxml、wxss、js和json四种文件来进行开发。
wxml文件
```html
<view class="container">
<view class="header">剩余时间: {{time}}s</view>
<view class="content">
<image class="sheep" src="{{sheepImg}}" bindtap="clickSheep"></image>
</view>
<view class="footer">得分: {{score}}</view>
<view class="button" bindtap="startGame">开始游戏</view>
</view>
```
wxss文件
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-color: #fff;
}
.header {
font-size: 32rpx;
margin-bottom: 20rpx;
}
.content {
display: flex;
justify-content: center;
align-items: center;
height: 600rpx;
}
.sheep {
width: 300rpx;
height: 300rpx;
}
.footer {
font-size: 28rpx;
margin-top: 20rpx;
}
.button {
width: 200rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
background-color: #4caf50;
color: #fff;
font-size: 28rpx;
border-radius: 10rpx;
margin-top: 20rpx;
}
```
js文件
```javascript
Page({
data: {
time: 30, // 剩余时间
score: 0, // 得分
sheepImg: '' // 羊的图片路径
},
onLoad: function () {
this.setData({sheepImg: '/images/sheep.png'}); // 设置羊的图片路径
},
startGame: function () {
this.setData({time: 30, score: 0}); // 初始化剩余时间和得分
this.startTimer(); // 开始计时器
},
startTimer: function () {
let that = this;
let timer = setInterval(function () {
let time = that.data.time - 1;
if (time < 0) {
clearInterval(timer);
wx.showModal({
title: '游戏结束',
content: '得分:' + that.data.score,
showCancel: false
});
} else {
that.setData({time: time});
}
}, 1000);
},
clickSheep: function () {
let score = this.data.score + 1;
this.setData({score: score});
}
})
```
json文件
```json
{
"navigationBarTitleText": "羊了个羊"
}
```
这个游戏比较简单,有一个计时器和一个羊的图片,玩家需要在30秒内点击尽可能多的羊,每点一只羊得分加1。当时间到达后,弹出得分提示框。