基于小程序制作一个猜拳小游戏

在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小程序游戏吧。

Outline

极限编程

raft

创建小程序

  1. 访问微信公众平台,点击账号注册。

在这里插入图片描述

Colab

  1. 选择小程序,并在表单填写所需的各项信息进行注册。

在这里插入图片描述
在这里插入图片描述

npm

  1. 在开发管理选择开发设置,将AppID及AppSecret复制出来进行存储。

在这里插入图片描述

增删改查

  1. 下载安装微信web开发者工具并创建一个新的项目,填入上图所复制的AppId。

在这里插入图片描述
在这里插入图片描述

YOLOR

功能实现

  1. 准备对应的素材用于界面效果展示。




  1. 在WXML中实现两个image标签,其src值需要动态获取,左侧代表玩家,右侧代表电脑。

在这里插入图片描述

xcode

<view class="content">
    <image class="plarer" src="{{player}}" ></image>
    <view class="tips">{{tips}}</view>
    <image class="computer" src="{{computer}}"></image>
</view>
  1. 在JS中设置定时器,每隔0.1秒切换背景图,达到一个闪烁的效果。

在这里插入图片描述

能源

    var start=0;
    var step=1;
    //存放素材的数组
    const iconArray= ['./image/icon1.png','./image/icon2.png','./image/icon3.png'];
    this.outInter= setInterval(()=>{
      start+=start
      if(start>2){
        start=0
      }
      const computerImg = iconArray[start];  
      this.setData({
        computer:computerImg
      })
    },100)
  1. 给代表玩家的image动态赋值加载中的动画,同时在页面下方实现选择的区域,让用户能够点击。

在这里插入图片描述

Android区间日历

<view class="choice">
    <view bindtap="clickIcon">
      <image src="./image/icon1.png" data-id="0"></image>
      <image src="./image/icon2.png" data-id="1"></image>
      <image src="./image/icon3.png" data-id="2"></image>
    </view>
    <view bindtap="agiln">再来一次</view>
  </view>
  1. 实现图片的点击事件,当点击时修改上方代表玩家图片的src值,同时停止右侧代表电脑的图片的闪烁,并通过下标判断电脑的选择。
let id = e.target.dataset.id;
if(id==0){
	src='/images/icon1.jpg';
}
if(id==1){
	src='/images/icon2.jpg';
}
if(id==2){
	src='/images/icon3.jpg';
}
that.setData({
	player:id
});
  1. 在给玩家图片赋值的同时,停止电脑方图片的闪烁,获取其src,判断哪方获胜并在页面进行显示。
    const player = this.data.player;
    const computer = this.data.computer;
	if ((player === icon1 && computer === icon1 ) || (player === icon2 && computer === icon2) || (player === icon3&& computer === icon3)) {
      this.setData({
        tips: '获胜了',
        sum: this.data.sum+1
      })
    } else if (player === computer) {
      this.setData({
        tips: '平局了'
      })
    } else {
      this.setData({
        tips: '失败了'
      })
    }
    }
  1. 在页面底部实现再来一次按钮,点击时将页面数据进行重置。
<view bindtap="agiln">再来一次</view>

   this.setData({
      player: './image/load.gif',
      tips: '重新开始'
    })

界面优化

  1. 游戏功能实现后,可以增加一个欢迎界面,达到一个缓冲效果,让用户通过这个界面再访问到游戏界面。

在这里插入图片描述

Spring MVC

  1. 这里需要用到一些官方组件来获取用户头像及昵称等信息。
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
  1. 也可以通过获得用户授权的方式来获取。
<button open-type="getUserInfo">授权登录</button>

 // 查看是否授权
    wx.getSetting({
      success (res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权,可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  1. 给进入游戏按钮增加一个点击事件,当点击时则进行页面跳转。
<view class="btn" bindtap="game">进入游戏</view>

wx.navigateTo({
  url: '/pages/index/index',
})

代码块

<view class="content">
  <view >石头剪刀布</view>
  <view>你已经获胜了<text>{{sum}}</text></view>
  <view class="test">
    <image class="player" src="{{player}}" ></image>
    <view class="tips">{{tips}}</view>
    <image class="computer" src="{{computer}}"></image>
  </view>
<view class="choice">
    <view bindtap="clickIcon">
      <image src="./image/icon1.png" data-id="0"></image>
      <image src="./image/icon2.png" data-id="1"></image>
      <image src="./image/icon3.png" data-id="2"></image>
    </view>
    <view bindtap="agiln">再来一次</view>
  </view>
</view>
   var start=0;
    var step=1;
    //存放素材的数组
    const iconArray= ['./image/icon1.png','./image/icon2.png','./image/icon3.png'];
    this.outInter= setInterval(()=>{
      start+=start
      if(start>2){
        start=0
      }
      const computerImg = iconArray[start];  
      this.setData({
        computer:computerImg
      })
    },100)
let id = e.target.dataset.id;
that.setData({
	player:id
});
if ((player === icon1 && computer === icon1 ) || (player === icon2 && computer === icon2) || (player === icon3 && computer === icon3)) {
  this.setData({
    tips: '获胜了',
    sum: this.data.sum+1
  })
} else if (player === computer) {
  this.setData({
    tips: '平局了'
  })
} else {
  this.setData({
    tips: '失败了'
  })
}
.body{
  width: 100vw;
  height: 100vh;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title{
  font-size: 40rpx;
  font-weight: 700;
  margin-top: 30rpx;
}
.content{
  font-size: 35rpx;
  margin-top: 95rpx;
}
.content>text{
  color: red;
}
.playerBox{
  width: 620rpx;
  height: 205rpx;
  display: flex;
  justify-content: space-between;
  margin-top: 30rpx;
}
.playerBox>image,.playerBox>view{
  width: 205rpx;
  height: 205rpx;
}
.player,.computer{
  /* border: 1rpx solid #f1f1f1; */
}
.player{
  font-size: 30rpx;
  padding: 10rpx;
  color: red;
  text-align: center;
}
.box{
  width: 655rpx;
  height: 650rpx;
  /* background-color: #f5eb90; */
  margin-top: 95rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box-text{
  font-size: 40rpx;
  margin-top: 65rpx;
}
.box-click{
  width: 100%;
  height: 205rpx;
  margin-top: 60rpx;
}
.box-click>image{
  width: 205rpx;
  height: 205rpx;
  border-radius: 50%;
  border: 1rpx solid #f1f1f1;
  margin-left: 10rpx;
}
.clickBtn{
  width: 345rpx;
  height: 90rpx;
  color: white;
  background: linear-gradient(to right,#FF1B1B,#FFA11B);
  border-radius: 10rpx;
  margin-top: 55rpx;
  line-height: 90rpx;
  text-align: center;
  font-size: 45rpx;
}


发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注