微信小程序之猜数字和猜拳小游戏-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序之猜数字和猜拳小游戏。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图

app.json

一、首页（index3）的代码

wxml代码

wxss代码

二、猜数字页面（index）代码

wxml代码

wxss代码

js代码

三.游戏规则页面（logs）代码

wxml代码

wxss代码

四.猜拳页面（q1）代码

wxml代码

wxss代码

js代码

效果图

猜拳微信小程序,微信小程序,微信小程序,小程序,学习

app.json

猜拳微信小程序,微信小程序,微信小程序,小程序,学习文章来源地址https://www.toymoban.com/news/detail-853248.html

一、首页（index3）的代码

wxml代码

<view class="box2">
    <navigator url="../index/index">
        <button type="default">猜数字</button>
    </navigator>
</view>
<view class="box2">
    <navigator url="../logs/logs">
        <button type="primary">游戏规则</button>
    </navigator>
</view>
<view class="box3">
    <navigator url="../q1/q1">
        <button type="default">猜拳</button>
    </navigator>
</view>

wxss代码

.box2{
  margin-top: 200rpx;
  width: 100%;
  height: 100rpx;
}
.box3{
  margin-top: 240rpx;
  width: 100%;
  height: 100rpx;
}

二、猜数字页面（index）代码

wxml代码

<view class="container">
  <input type="number" placeholder="输入1到100的数字" bindinput="onInputChange"/>
  <button bindtap="makeGuess">猜数字</button>
  <text>{{message}}</text>
  <view>
    <text>猜数字历史：\n</text>
    <block wx:for="{{guesses}}" wx:key="*this">
      <text>第{{index + 1}}次: {{item.num}} - {{item.hint}}\n</text>
    </block>
  </view>
</view>

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代码

<view class="demo-box">
<text>
 1.游戏仅供娱乐
 2.此游戏有很多不足
 3.玩家可以提供您宝贵意见
</text>
</view>

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代码

<view class="container">
  <button bindtap="makeChoice" data-choice="scissors">剪刀</button>
  <button bindtap="makeChoice" data-choice="rock">石头</button>
  <button bindtap="makeChoice" data-choice="paper">布</button>
  <text>玩家胜利次数：{{playerWins}}</text>
  <text>电脑胜利次数：{{computerWins}}</text>
  <text>平局次数:{{draws}}</text>
  <text>{{message}}</text>
</view>

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' 
      });
    }
  }
});

到了这里，关于微信小程序之猜数字和猜拳小游戏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！