微信小程序之猜数字和猜拳小游戏
目录
效果图
app.json
一、首页（index3）的代码
wxml代码
wxss代码
二、猜数字页面（index）代码
wxml代码
wxss代码
js代码
三.游戏规则页面（logs）代码
wxml代码
wxss代码
四.猜拳页面（q1）代码
wxml代码
wxss代码
js代码
效果图
app.json
一、首页（index3）的代码
wxml代码
wxss代码
.box2{
margin-top: 200rpx;
width: 100%;
height: 100rpx;
}
.box3{
margin-top: 240rpx;
width: 100%;
height: 100rpx;
}二、猜数字页面（index）代码
wxml代码
{{message}}
猜数字历史：\n
第{{index + 1}}次: {{item.num}} - {{item.hint}}\n
wxss代码
.container {
padding: 20px;
}
input {
width: 100%;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
button {
width: 100%;
background-color: #1aad19;
color: white;
padding: 10px;
border: none;
}
.history {
margin-top: 20px;
}
.history text {
display: block;
}
js代码
Page({
data: {
numberToGuess: null,
guesses: [],
guessCount: 0,
inputNumber: '',
message: '',
hint: ''
},
onLoad: function() {
this.startNewGame();
},
startNewGame: function() {
const randomNum = Math.round(Math.random() * 100) + 1;
this.setData({
numberToGuess: randomNum,
guesses: [],
guessCount: 0,
message: '开始猜数字吧！',
hint: ''
});
},
onInputChange: function(e) {
this.setData({
inputNumber: e.detail.value
});
},
makeGuess: function() {
const guess = parseInt(this.data.inputNumber, 10);
if (isNaN(guess) || guess < 1 || guess > 100) {
this.setData({ message: '请输入1到100之间的数字。' });
return;
}
let newHint = '';
if (guess === this.data.numberToGuess) {
newHint = '猜对了！';
this.setData({
message: '恭喜你猜对了！游戏即将重新开始。',
hint: newHint
});
setTimeout(() => {
this.startNewGame();
}, 2000);
} else {
newHint = guess < this.data.numberToGuess ? '猜小了！' : '猜大了！';
this.setData({
message: '继续猜...',
hint: newHint
});
}
const count = this.data.guessCount + 1;
const guesses = this.data.guesses.concat({ num: guess, hint: newHint });
this.setData({
guessCount: count,
guesses: guesses
});
if (count >= 5) {
this.setData({
message: '游戏结束，即将跳转...'
});
setTimeout(() => {
wx.navigateTo({
url: '/pages/index3/index3'
});
}, 2000);
}
}
});
三.游戏规则页面（logs）代码
wxml代码
1.游戏仅供娱乐
2.此游戏有很多不足
3.玩家可以提供您宝贵意见
wxss代码
.demo-box{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 100vh;
}
text{
margin: 0 50rpx;
line-height: 100rpx;
}四.猜拳页面（q1）代码
wxml代码
玩家胜利次数：{{playerWins}}
电脑胜利次数：{{computerWins}}
平局次数:{{draws}}
{{message}}
wxss代码
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
button {
margin: 10px;
}
js代码
Page({
data: {
playerWins: 0,
computerWins: 0,
draws: 0,
message: ''
},
makeChoice: function(event) {
const playerChoice = event.currentTarget.dataset.choice;
const choices = ['scissors', 'rock', 'paper'];
const computerChoice = choices[Math.round(Math.random() * choices.length)];
const result = this.judge(playerChoice, computerChoice);
if (result === 'win') {
this.setData({
playerWins: this.data.playerWins + 1,
message: '你赢了这一轮！'
});
} else if (result === 'lose') {
this.setData({
computerWins: this.data.computerWins + 1,
message: '电脑赢了这一轮！'
});
} else {
this.setData({
draws: this.data.draws + 1,
message: '这一轮是平局！'
});
}
this.checkGameEnd();
},
judge: function(player, computer) {
if (player === computer) {
return 'draw';
}
if (
(player === 'scissors' && computer === 'paper') ||
(player === 'rock' && computer === 'scissors') ||
(player === 'paper' && computer === 'rock')
) {
return 'win';
}
return 'lose';
},
checkGameEnd: function() {
if (this.data.playerWins === 2 || this.data.computerWins === 2) {
wx.navigateTo({
url: '/pages/index3/index3'
});
}
}
});