小程序猜明星小游戏实现方法

最新推荐文章于 2021-06-25 18:04:02 发布

面壁思过程

最新推荐文章于 2021-06-25 18:04:02 发布

阅读量3.5k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/Candy_mi/article/details/83275191

版权

微信小程序专栏收录该内容

41 篇文章 1 订阅

订阅专栏

如图所示效果：

1.从全部选项中选择文字文字显示在上面（从左到右哪里为空往哪补），选择的文字消失

2.点击上面修改文字时上面文字消失，下面还原之前的位置

3.提示从后往前提示如果前面有错误的文字同时清空

4.重置按钮直接清空选择的文字，底部还原

代码：

<!--pages/bounty/filmstar/filmstar.wxml-->
<view class='page-wrap'>

  <view class='common'>
      <view class='count' bindtap='addCoin'>{{integral}}</view>

    <view class='subject'>
      <image src='http://p5mf8oew1.bkt.clouddn.com/gs_1539402880343' mode='widthFix'></image>
    </view>


      <view class='btn_box flex-s-e'>      
        <button class='s_btn' bindtap='tip' >
          <span class='tip-ico'></span>
          <span>提示</span>
        </button>
        <button class='s_btn' open-type='share' data-id='1'>
          <span class='onshare-ico'></span>
          <span>求助</span>
        </button>
      </view>
  </view>

  <view class='difficult-wrap'>
    <!-- 难度三 -->

      <view class='difficult3'>
        <view class='answer-qu'>
          <view class='text-wrap'>
            <!-- 回答部分 -->
            <block wx:for='{{text}}' wx:key="{{index}}">
              <view class="text {{color=='red'?'animated shake':''}}" bindtap='clear' data-index='{{index}}' data-concent='{{item}}'  style='color:{{color}}'>{{item}}</view>
            </block>

            <view class='reset' bindtap='reset'>
            
              <!-- <image src='../../../img/up.png'></image> -->
            </view>
          </view>
        </view>

        <!-- 选择部分 -->
        <view class='select-wrap'>
          <block wx:for="{{otherAnswers}}" wx:key="{{index}}">
            <view class='select-fu' bindtap='select' data-index='{{index}}' data-concent='{{item}}'>
              <view class='select' wx:if="{{item!=''?true:false}}">{{item}}</view>
            </view>
          </block>
        </view>
      </view>

  </view>


  <!-- 答对弹框 showmodel-->
  <view class="modal-mask {{showmodel==true?'animated fadeInDownBig':''}}" wx:if="{{showmodel}}" bindtap='hidemodel'></view>
  <view class="modal {{showmodel==true?'animated fadeInDownBig':''}}" wx:if="{{showmodel}}">
    <view class='tittle'>答对啦</view>
    <view class='concent'>
      <image class='star-ico' src='http://p5mf8oew1.bkt.clouddn.com/gs_1539402880343'></image>
      <view class='answer-qu'>
        <view class='text-wrap'>
          <block wx:for='{{answer}}' wx:key="{{index}}">
            <view class='text'>{{item}}</view>
          </block>
        </view>
      </view>

     <block wx:if="{{share!=true}}">
      <view class='addcount'>
          
      </view>
      
        <view class='btn-wrap'>
          <button class='button' open-type='share' data-id='2'>考考好友</button>
          <button class='button red' bindtap='next'>下一题</button>
        </view>
      </block>

      <block wx:else>
        <view class='btn-wrap'>
          <button class='button backindex' bindtap='gohome'>回到首页</button>
        </view>
      </block>
    </view>
  </view>


</view>

wxss

image {
  width: 100%;
  height: 100%;
}

.return {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  position: fixed;
  top: 120rpx;
  left: 30rpx;
  background: rgba(0, 0, 0, 0.3);
}

/* 是否选中图标大小 */

.YN {
  width: 30rpx;
  height: 30rpx;
  display: block;
}

page {
  background: -webkit-linear-gradient(#67078c, #5a67f4); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(#67078c, #5a67f4); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#67078c, #5a67f4); /* Firefox 3.6 - 15 */
  background: linear-gradient(#67078c, #5a67f4); /* 标准的语法 */
}

/* 题目图片 */

.subject {
  width: 450rpx;
  height: 450rpx;
  border-radius: 20rpx;
  margin: 0 auto;
  border: 10rpx solid #fff;
  margin-top: 110rpx;
  box-sizing: content-box;
  overflow: hidden;
}

/* 提示求助按钮 */

.btn_box {
  width: 445rpx;
  margin: 0 auto;
  margin-top: 57rpx;
  position: relative;
}

/* 减少积分 */

.reduce {
  position: absolute;
  top: -50rpx;
  left: 67rpx;
  color: #fbf45b;
  font-size: 27rpx;
}

.reduce-ico {
  width: 20rpx;
  height: 20rpx;
  background: #fbf45b;
  border-radius: 50%;
}

.s_btn {
  width: 182rpx;
  height: 58rpx;
  line-height: 58rpx;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 58rpx;
  display: flex;
  flex-wrap: nowrap;
  padding: 0 40rpx;
  align-items: center;
  margin: 0;
}

/* 提示求助按钮小图标 */

.tip-ico, .onshare-ico {
  display: block;
  margin-right: 10rpx;
}

.tip-ico {
  width: 22rpx;
  height: 29rpx;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAdCAYAAACuc5z4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCNzlDRENDNUMxRjkxMUU4Qjc0NUZDNzk2QjkxMzM5OCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCNzlDRENDNkMxRjkxMUU4Qjc0NUZDNzk2QjkxMzM5OCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI3OUNEQ0MzQzFGOTExRThCNzQ1RkM3OTZCOTEzMzk4IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkI3OUNEQ0M0QzFGOTExRThCNzQ1RkM3OTZCOTEzMzk4Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+989bPAAAAdtJREFUeNqclksoRGEUx2dGeeRVXkUeSTLFxsqgrKbIygJlYYO110aNlFjYWLKW/SwtTFYKSWpSnhshCRMyHguZrv+pe6fj9N3vPk796s55/Pue55ugYRgBGysCfWAYhEGZ6X8F5yAOtsGnspqEFSyDlOFslDOv0pCOBnBoeLcDUMe1gmwp6kGSTZnbFXimCYJy0KrISYE2M+/fiM8VI9kALYqpNoJVRf6ZXIopRdKEzfpzIuBR1E1bwnkgLYKDLkQtasAXq/0mTQr0CNEtD6IWI0JjiJxLwtnlQ5h4YBqbIexfhO3sL7gM+LME+64j4QrmuDNvlh97Y9/5JPzOHAUB/9bAvjMkfMwc1SLBi0X56El4RyRM+hAdBSXs9x7tZqF59rjVezgNTeIck9VawTkRuAbFLkSrwIuoXZfd7V4kXIBcjWgOuBU1dL1DUrhD0S9ONcL7ivywXT8eVyQvKkRnRE4G9OoaPdGvEG9n8Sj4YbE4aHZ6QSw6bZZF9uwnu6XS7fiaiycpZlcf1LzSldlnxt5KQVoV0AmTDYBu863L1pgkFLfWtbBvcxKmPyyzol9/mF3wBCzYVjpc2Zhm4250tSGHGR1pYivaSheNhm7jrvmSE0kw5lT3J8AAeNgq7NCWlbAAAAAASUVORK5CYII=') no-repeat;
  background-size: 22rpx 29rpx;
}

.onshare-ico {
  width: 30rpx;
  height: 24rpx;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYCAYAAADtaU2/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCOTg1OUM5QkMxRjkxMUU4QTJDNUYwQUQxQkMwOTUxQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCOTg1OUM5Q0MxRjkxMUU4QTJDNUYwQUQxQkMwOTUxQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkI5ODU5Qzk5QzFGOTExRThBMkM1RjBBRDFCQzA5NTFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkI5ODU5QzlBQzFGOTExRThBMkM1RjBBRDFCQzA5NTFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+XWcLcAAAAgtJREFUeNq0lk0oRFEUx98wzcrHRDJZ2SALaYqIBaVMysJCKaJsR1JK7BBlISzsSGIlURYKK0XCTBQpUZOPfIQy+Saj53915XR6M++9eePUr5l7zzn3vPfuueceRVVVxQL14AQMmfW1EjQOPKt/sgKcRv3jlOhF+L6RcSU4BEVGnaMVfC/lQ/7/lL8usAXq/jPwFwjJ/wHQSnQzoC/yY0e/x25wJ/c3KOfywQvZ90WQZDW5XKAZTMhM5pIo7XLBDZkPgOxoAou3mAQfanjZBPHEJx3sE/07qDETeFgjyCdYBoOgF7SBBA1fO1hlvl16gTPBLnNaAg0gw2QuTLF1pkUN0DLMY4XhGHgsVrhOcE/W9HGDNPBKDBbY3llhh742V/pYUCVGLPBto8p2otiLUcAUsMGCjgid7SfDFMUJgqSuiPEDG5cAtyyLYpwMHLJs9gM/q01ZYB2kk7laME8rVw95oiY5Vwb6wTZ4UiPLEbCRNy0Ej0QvCkqJ1jm+lAanoFbj/OnJM1m0munWQKpW5SomRo9hFj4Hs/LC98qvUQCuyZETazUyv4FIjUB7mGBXYBRUsc9IOZO2ftDN/L16HcgccwiBDuDQyVhxvi80HvgWlBppfQ7YXuUYPCp2Vo1+L4s0oz0XvcLKTfZcNPCY2WaPJpDZAuGRl32LWV+RNKI/qgDjGkXg3+RbgAEAqV59S7nANmQAAAAASUVORK5CYII=') no-repeat;
  background-size: 30rpx 24rpx;
}

/* 底部答题区域 底部答题区域 底部答题区域 底部答题区域*/

/* 难度包裹框 */

.difficult-wrap {
  font-size: 30rpx;
}

/* 难度1，难度2共用选择按钮 */

.select {
  width: 540rpx;
  background: #fff;
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
}

.select .center {
  position: relative;
  /* width: 130rpx;
  height: 100%;
  text-align: center; */
}

/* 难度1 */

.difficult1 {
  margin-top: 158rpx;
}

.difficult1 .select {
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 88rpx;
  margin-bottom: 30rpx;
  align-items: center;
  justify-content: center;
}

/* 难度2 */

.difficult2 {
  margin-top: 65rpx;
}

.difficult2 .select {
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 80rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

/* 难度3 */

.difficult3 {
}

/* 回答区域 */

.answer-qu {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 52rpx;
}

/* 文字包裹 */

.text-wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 0 auto;
  position: relative;
}

/* 文字里的每个文字 */

.text-wrap .text {
  width: 80rpx;
  height: 80rpx;
  background: #e4e1ff;
  border-radius: 10rpx;
  border-bottom: 10rpx solid #b9b6ef;
  text-align: center;
  line-height: 80rpx;
  margin-right: 10rpx;
}

.reset {
  position: absolute;
  right: -40rpx;
  top: 0;
  bottom: 0;
  margin: auto;
}

.answer-qu .reset {
  width: 39rpx;
  height: 33rpx;
  background: #fff;
}

.select-wrap {
  width: 650rpx;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  margin: 0 auto;
  margin-top: 40rpx;
}

.select-fu {
  width: 80rpx;
  height: 80rpx;
  margin-right: 15rpx;
  margin-bottom: 15rpx;
  border-radius: 15rpx;
  overflow: hidden;
}

.select-wrap .select {
  width: 80rpx;
  height: 80rpx;
  background: #e4e1ff;
  border: 1px solid #b9b6ef;
  border-radius: 15rpx;
  text-align: center;
  line-height: 80rpx;
  display: flex;
  justify-content: center;
}

.select-wrap .select-fu:nth-of-type(7n) {
  margin-right: 0rpx;
}

/* 模态框 */

.modal {
  width: 640rpx;
  height: 680rpx;
  border-radius: 30rpx;
  background: #a19cf6;
  position: absolute;
  z-index: 100;
  top: 230rpx;
  left: 0;
  right: 0;
  margin: auto;
}

/* 标题 */

.tittle {
  width: 370rpx;
  height: 112rpx;
  line-height: 90rpx;
  font-weight: bold;
  text-align: center;
  font-size: 40rpx;
  letter-spacing: 10rpx;
  color: #fff;
  position: absolute;
  top: -55rpx;
  left: 0;
  right: 0;
  margin: auto;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAW0AAABuCAYAAADs4kI4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4QjZGOENDQkMxRkExMUU4ODBENkRGOTRBQzU2NTQ5QSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4QjZGOENDQ0MxRkExMUU4ODBENkRGOTRBQzU2NTQ5QSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhCNkY4Q0M5QzFGQTExRTg4MEQ2REY5NEFDNTY1NDlBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhCNkY4Q0NBQzFGQTExRTg4MEQ2REY5NEFDNTY1NDlBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Ob0d/AAACbhJREFUeNrs3XuopVUZ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') no-repeat;
  background-size: 370rpx 112rpx;
}

/* 内容 */

.concent {
  width: 640rpx;
  height: 680rpx;
}

.star-ico {
  width: 232rpx;
  height: 232rpx;
  display: block;
  margin: 0 auto;
  border-radius: 40rpx;
  background: red;
  margin-top: 95rpx;
  margin-bottom: 40rpx;
}

.addcount {
  width: 110rpx;
  height: 50rpx;
  margin: 35rpx auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.addcount .gold {
  width: 40rpx;
  height: 40rpx;
}

.addcount span {
  display: block;
  font-size: 35rpx;
  color: #fff;
}

.btn-wrap {
  width: 444rpx;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.button {
  width: 195rpx;
  height: 70rpx;
  background: #fca025;
  font-size: 30rpx;
  border-radius: 70rpx;
  border-bottom: 5rpx solid #ef8e0c;
}

.button.red {
  background: #e65e5e;
  border-bottom: 5rpx solid #e44041;
}

.error {
  background: #ff4c4d;
  color: #fff;
}

.correct {
  background: #3ccc1f;
  color: #fff;
}

.error .center::before {
  position: absolute;
  left: -45rpx;
  top: 50%;
  margin-top: -10.5rpx;
  content: "";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MENDMjlDMUMyM0IxMUU4QjQ4Qzk5RTgwNjcwMDgwRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MENDMjlDMkMyM0IxMUU4QjQ4Qzk5RTgwNjcwMDgwRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwQ0MyOUJGQzIzQjExRThCNDhDOTlFODA2NzAwODBGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQwQ0MyOUMwQzIzQjExRThCNDhDOTlFODA2NzAwODBGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GM4KAAAAAU1JREFUeNpi+P//PwMQFwBxKpRNLSwGxD1AzAnilP1HAD8qWcAOxLegZt5gYmBg4GZAgI1AHMxAGWAH4gtArArl/4XZXPwfFZDrIzYgvohkzikgZkJWkINmUSiJFvAC8SUk/QeAmBEkh66wAM2iYCIt4EPzwUFkeWwa0C3yISKSryKpP4GuBpdGYuOIG80HR4CYmVhLsMWRHxYfXEeSP4TLLEJhnY1mURBUnAXNggP4zCEmUtGDLgmId6IlUwZKLcEWdDCwH5ZMqWEJCJejWXCZWL1MRBYVrEBsjSYmAsR2ROkmwiXoyfQOqUUQMaUptmQaRYpFpFhwAC2Ss4ktgkgpTckuGUgqTYlM3qGELMFbmuLBeEtvkkpTEi3yQbeEqNKUjCLID2aJLLGlKZlFUCgDtPwhqjQlAaMkb5CAARC/IqUsIqGs+wDEVQABBgDqhlMTD1nzYgAAAABJRU5ErkJggg==);
  width: 25rpx;
  height: 25rpx;
  background-size: 100% 100%;
}

.correct .center::before {
  position: absolute;
  left: -45rpx;
  top: 50%;
  margin-top: -10rpx;
  content: "";
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAWCAYAAAA8VJfMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MjNCRjlGMUMyM0IxMUU4QjQwOUE2NTFDQjk5QjNERiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MjNCRjlGMkMyM0IxMUU4QjQwOUE2NTFDQjk5QjNERiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQyM0JGOUVGQzIzQjExRThCNDA5QTY1MUNCOTlCM0RGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQyM0JGOUYwQzIzQjExRThCNDA5QTY1MUNCOTlCM0RGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+X8QT1gAAARFJREFUeNpi/P//PwOdwDIgXgfEaxjpZOkWIPaGsoPoYelmIPZB4p9lAFlKQ7z1Pyq4AMQitLRwC5qFV4CYHRyyNLJwG5qFJ4GYEyZPCwt3YglSVmQ11LZwE5qFZ5B9SAtL0X14FoiZsKmlVRyeB2IWXOqROQZkWrgZzcLjsFRKyNI5UA2xJFq4G0uQEtQHIhagaQwlM+OfQ0+l+Cwt+I8Jokm08BQQMxIbQjBGIBaLw4lMpaBswUxKtCBzQrFYHEYglZ4i1UJsWcYHi8WeOHx4DFc+JNVSEA5AM/wPtOxET6XM5OZrXBJB/3GDo4TyIbmWgrAvFgtPUqMEI6TAHy3RMNHDUhBOAeJ91LIQhAECDACwNe5J8PBYbAAAAABJRU5ErkJggg==);
  width: 29rpx;
  height: 22rpx;
  background-size: 100% 100%;
}

.tipmodel {
  width: 490rpx;
  height: 470rpx;
  background: #fff;
  position: absolute;
  z-index: 100;
  top: 250rpx;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 20rpx;
  overflow: hidden;
}

.tipmodel .top {
  height: 228rpx;
  width: 100%;
  background: url('https://bnlnimg.bnln100.com/tipbg.png') no-repeat;
  background-size: 100% 228rpx;
}

.tipmodel .center {
  height: 130rpx;
  line-height: 130rpx;
  width: 100%;
  text-align: center;
}

/* 分享弹框样式  分享弹框样式   分享弹框样式 */

.gift-cover .close {
  width: 100%;
  height: 100%;
}

.gift-cover .get-gift {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 691rpx;
  height: 600rpx;
  background: url(http://pfp4iyx72.bkt.clouddn.com//index/getGift.png) 0 0 no-repeat;
  background-size: cover;
  padding: 125rpx 0 0 0;
  text-align: center;
}

.gift-cover .get-gift .get-gift-title {
  position: absolute;
  font-size: 36rpx;
  top: 50rpx;
  left: 180rpx;
  color: #fff;
}

.gift-cover .get-gift .tip {
  font-size: 36rpx;
  color: #3e7baa;
  margin-top: 30rpx;
}

.gift-cover .get-gift  .head-img {
  width: 126rpx;
  height: 126rpx;
  border-radius: 20rpx;
  margin: 30rpx auto;
}

.gift-cover .get-gift  .head-img image {
  width: 100%;
}

.gift-cover .get-gift .coin {
  color: #e9ab38;
  font-size: 40rpx;
}

.gift-share {
  width: 268rpx;
  height: 90rpx;
  background: url(http://pfp4iyx72.bkt.clouddn.com//index/giftShare.png) 0 0 no-repeat;
  background-size: cover;
  margin: 0 auto;
  color: #fff;
  font-size: 36rpx;
  line-height: 82rpx;
  margin-top: 20rpx;
}

.gift-share::after {
  border: none;
}

.upgrade {
  width: 600rpx;
  height: 648rpx;
  background: #fff;
  position: absolute;
  top: 170rpx;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 200;
  border-radius: 20rpx;
}

.tittletext {
  height: 55rpx;
  line-height: 55rpx;
  text-align: center;
  font-size: 40rpx;
  font-weight: bold;
  margin-top: 45rpx;
  position: relative;
  margin-bottom: 38rpx;
  letter-spacing: 5rpx;
}

.close {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
  position: absolute;
  right: 20rpx;
  top: 0;
}

.ico {
  width: 167rpx;
  height: 218rpx;
  margin: 0 auto;
}

.text_wrap {
  height: 180rpx;
  overflow: hidden;
}

.uptext {
  text-align: center;
  font-size: 35rpx;
  margin-top: 35rpx;
  margin-bottom: 20rpx;
}

.uptext2 {
  margin-top: 66rpx;
}

.lv {
  color: #9739ff;
  font-weight: bold;
}

.dif {
  text-align: center;
  font-size: 35rpx;
}

.yes_btn {
  width: 355rpx;
  height: 82rpx;
  margin: 0 auto;
}

// pages/bounty/difficulty/difficulty.js

var select_index; //选择对应的数组  根据答案长度判断

Page({
  data: {
    tipclick: true, //提示是否可点
    showmodel: false, //答对了弹框
    color: '#333', //控制答案正确错误的字体颜色
    integral: 0, //积分数字
    topiclist: [], //所有题目信息 
    answer: '孙艺洲', //正确答案
    text: '', //难度三答题框
    otherAnswers: ["宇", "均", "春", "那", "杨", "威", "长", "王", "艺", "双", "刘", "孙", "斌", "洲", "绘", "耀", "力", "皓", "弘", "嘉", "立"], //可选文字21位数字

    copy: ["宇", "均", "春", "那", "杨", "威", "长", "王", "艺", "双", "刘", "孙", "斌", "洲", "绘", "耀", "力", "皓", "弘", "嘉", "立"],

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    var text = [];
    for (var i = 0; i < that.data.answer.length; i++) {
      text[i] = '';
    }
    select_index = text;

    console.log(text);
    console.log(select_index);

    that.setData({
      text: text,
    })
  },


  // 难度三----------------------------------------------------------------------------
  //难度三选择文字并在上面显示
  select: function(e) {
    var that = this;
    let currNum = 0;   //判断是否停止点击

    var value = e.currentTarget.dataset.concent;  //本次点击选择的值
    var click = e.currentTarget.dataset.index;    //点击的索引

    //判断那几个空格为空  哪个个为空就插入哪一个
    for (var i = 0; i < that.data.text.length; i++) {
      if (that.data.text[i] == '') {
        that.data.text[i] = value;  //文字插入到text
        select_index[i] = click;    //记录对应的索引
        break;
      }

      //判断text里的每一项是否都为空   全都不为空的时候不能点击选择文字
      if (that.data.text[i] != '') {
        currNum++;
      }
      if (currNum == that.data.answer.length) {
        return;
      }
    }

    console.log(select_index);
    that.data.otherAnswers[click] = '';  //把文字对应隐藏
    that.setData({
      text: that.data.text,
      otherAnswers: that.data.otherAnswers,
      color: '#333',
    })

    //判断正误
    that.dif3judge();

  },

  //难度三弹框下一题按钮事件
  next: function() {
    var that = this;
    that.hidemodel(); //隐藏并重置
  },



  // 提示
  tip: function(e) {
    var that = this;
    if (that.data.tipclick == false) {
      console.log('不可点击');
      return;
    }

    console.log('你点击了提示')
 
      let currNum = 0;
      //清空错误文字并补全其他答案里面的文字 从前往后看
      for (var j = 0; j < that.data.text.length; j++) {
        if (that.data.text[j] != '' && that.data.text[j] != that.data.answer[j]) {
          var cur = select_index[j]; //要清除文字之前在其他答案里的下标
          console.log(cur);
          that.data.otherAnswers[cur] = that.data.text[j];
          that.data.text[j] = '';
          select_index[j] = '';
        }
      }

      //从后往前提示
      for (var i = that.data.text.length - 1; i >= 0; i--) {
        if (that.data.text[i] == '') {
          that.data.text[i] = that.data.answer[i]; //提示文字后放
          var index = that.data.otherAnswers.indexOf(that.data.answer[i]); //提示文字在其他选项里的下标
          select_index[i] = index; //更新下标的记录
          that.data.otherAnswers[index] = '' //隐藏其他选项中的文字
          break;
        }
        //判断text里的每一项是否都为空   
        if (that.data.text[i] != '') {
          currNum++;
        }
        if (currNum == that.data.answer.length) {
          return;
        }
      }

      console.log(select_index);
      that.setData({      
        text: that.data.text,
        otherAnswers: that.data.otherAnswers,
        color: '#333',
      })

    that.dif3judge();    
  },


  //难度三移除单个
  clear: function(e) {
    var that = this;
    var value = e.currentTarget.dataset.concent;  //本次点击选择的值
    var index = e.currentTarget.dataset.index;
    console.log(value);
    console.log(index);

    that.data.text[index] = ''; //把选中的移除
    that.data.otherAnswers[select_index[index]] = value; //其他选项里的文字还原
    select_index[index] = ''; //然后把slect_index中的清为''
    that.setData({
      text: that.data.text,
      otherAnswers: that.data.otherAnswers,
      color: '#333',
    })

    console.log(select_index);
  },



  //隐藏答对模态框并进行下一题
  hidemodel: function() {
    var that = this;
      that.setData({
        showmodel: false,
      })
      that.reset();    
  },

  //难度三重置文字
  reset: function() {
    var that = this;
    for (var i = 0; i < that.data.answer.length; i++) {
      that.data.text[i] = '';
      select_index[i] = '';
    }
    console.log(select_index);

    that.setData({
      text: that.data.text,
      otherAnswers: that.data.copy
    })

  },

  //难度三判断正误正确显示弹框   错误减分动画
  dif3judge: function() {
    var that = this;
    var shownum = 0
    for (var i = 0; i < that.data.text.length; i++) {
      //判断text里的每一项是否都为空   
      if (that.data.text[i] != '') {
        shownum++;
      }
    }
    if (shownum == that.data.answer.length) {
      var huidastr = that.data.text.toString().replace(/,/g, "");

      //如果答对了
      if (that.data.answer.toString() == huidastr) {

        that.setData({
          showmodel: true,
        })

      } else {
        wx.vibrateLong();
        that.setData({
          color: 'red',
        })
        console.log('答错了扣分');

      }

    }

  
},



})

面壁思过程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小程序猜明星小游戏实现方法

如图所示效果：1.从全部选项中选择文字文字显示在上面（从左到右哪里为空往哪补），选择的文字消失2.点击上面修改文字时上面文字消失，下面还原之前的位置3.提示从后往前提示如果前面有错误的文字同时清空4.重置按钮直接清空选择的文字，底部还原代码：&lt;!--pages/bounty/filmstar/filmstar.wxml--&gt;&lt;view...
复制链接

扫一扫

专栏目录