zoukankan      html  css  js  c++  java
  • 小程序—摘星星吧(记单词游戏

    没有找到免费的API,就只写进去了几个单词意思一下。

    最后效果是这样的:

     https://blog-static.cnblogs.com/files/mingnai/1590826523345.gif

     答案正确时会有那个“叮”的一声。

    第一遍写完之后,勉强能运行,但是冗余太高了,就重新整理了一遍。还写了一篇文档理思路,捂脸.png

    尽管改了之后代码还是不好,但是我会继续学习的!

    整体的思路是这样的:

    碰到了很多的问题,

    比如:

    1.只要选择单词定了,后面的步骤包括根据这个单词选随机数,选图片,都是一样的代码。

    我最开始也是把它们封装好了的,不过放在页面的js文件里。但是后面发现了utils这个工具文件,就把他们丢到那里面去了。第一次用这个,碰到的问题等下把它单独记下来。

    2.如何判断这个图片是被点击的,还是没有被点击?又如何根据这个判断结果换样式?

    样式判断脑子一拍就决定了要用三元式,然后就瓜了。

    后面学会了data-的使用,也学会了在this.setdata({  })中怎么给键名使用变量。用这两个方法就可以解决这个问题了:

    给图片设置变量:

    如果点击了,把对应的num[num]赋值为num,那么它的样式自然就变了。点击过了,再点一遍就是取消,那么

     

     这就有点击图片来回切换样式的效果。

    3.还有在微信小程序里,数组转字符串,字符串转数组。

    比如,在给单词挖空的时候,我产生的随机数是数字(比如单词ruler,随机数:2,4),不过单词是一个字符串,不是数组。我一开始只能想到:把单词转换为数组,然后用.replace来替换。结果.replace是字符串方法,凉凉。

    (就算使用.replace也还有一个问题:它的参数是:要替换的字符,替换成什么字符。当面对一个单词有相同的字母时(多常见的情况啊),它匹配第一个。

    比如:ruler里面,我的随机数是:2,4,用word.replace(word[2], '_' ) , word.replace(word[4], '_' ) ,它替换的结果是:_u_ler  , 而我需要的结果是:ru_e_。这个问题对我还是很严重的,尽管字母抠出来是一样的,但是回答的顺序就错了,那么这就是个永远答不对的问题了。)

    怎么办呢?

    最后是这样解决的:(哎,我只能想到这个方法了,见笑了)

    还是转换:把单词转换成数组。直接用数组下标来替换" _ " ,不过这个时候是不能直接渲染到页面的,会变成这样 r , u , _ , e , _  。就因为它是一个数组,多丑啊。 

    要让它把逗号删了,还是得把数组转换成字符串,

    1.用toString()方法,这时逗号还是跟随着的。要消除逗号,再用.replace把全部的逗号替换掉。这样就能按期望显示了 : r u _ e _ 

    2.用.join方法,可以规定分隔的符号,输入""就好了。

    转换的方法就是:字符串转数组: .split ( ' ' )

    数组转字符串: . toString( )  和  . join(  )

    4.生成n个0~m的互不相等的随机数:

    function noEqualOther(n, m) {
      let arr = [];
      while (arr.length < n) {
        let num = parseInt(Math.random() * m)
        if (arr.indexOf(num) == -1) {
          // this.arr.indexOf(num)若等于-1则证明arr这个数组里没有num这个随机数,因此可以放进这个数组里
          arr.push(num);
        }
      }
      arr.sort(function (a, b) { return a - b }); 
      return arr;
    }

    5.还有forEach()这个方法是没有返回值的,.every只能返回布尔值。

    判断两个数组是不是完全一样的时候,用every比较方便:

      if (Array1.length == Array2.length) {
          if (Array1.every(function (value, index)
             { return value == Array2[index] }      )) 
        

    6.在回答正确时,播放音频。因为是第一次插入音频,很懵逼。使用.playvoice一直不成功,根本不执行。最后知道,.playvoice是要先录音的。

    7.还弄了一个分享的功能,很简单。写在page里面的:

    onShareAppMessage:function(){
    return{
    title:'摘星星吧',
    desc:'一个简单的记单词小游戏',
    path:'/pages/index/index'
    }

    就可以分享了。

  • 相关阅读:
    kafka集群搭建
    数据导入 xls --》mysql
    Spark --RDD算子
    Spark集群搭建
    【已解决】 IDEA运行spark程序报错:GC overhead limit exceeded?
    Spring Boot 配置 ---02
    Spring Boot 入门 ---01
    Nginx 推流 拉流 --- 点播直播
    【转】JS内置对象方法
    MapReduce 简单数据统计
  • 原文地址:https://www.cnblogs.com/mingnai/p/12993160.html
Copyright © 2011-2022 走看看