手机版打字软件快速制作-全套源码

本文将带领大家快速制作出一款手机版打字软件，在消磨时间的情况下可以考虑用自己编写的打字软件打字哦，还可以自定想要打字的内容。

体验地址：

制作的教学视频地址：

https://www.bilibili.com/video/BV129tMzxExK

作者制作心得：在制作之前，我们可以先选平台，直接做成网页，手机端访问需要网页部署并提供过审域名，最佳方式，比如在国内，可以直接发到微信公众平台上，在没审核通过之前都有50用户/天的分享额度，认证可以获得分享能力，价格30元。

写软件优先推荐使用deepseek、chatgpt等一气呵成的聊天模型，用这些软件写代码可以保证速度以及软件的完整性，当然这是相对的，一般千行代码内的软件，AI可以制作的非常漂亮，功能流畅。超过千行的软件，AI就会疲于贴出代码，导致我们无法完工。

本篇文章采用Deepseek作为编码工程师，初级提问词是：

可不可以用微信小程序开发平台写一个打字小程序，随机出现单个字母，比如‘a’，或两个字母的组合，‘ab’，最多出现一个单词，或者是汉字‘啊’，最多是一个汉字词组‘哎呀’。然后1分钟为一个级别开始计时，比如第一关是1分钟内打10个字或词，第二关是1分钟打20个字或词，最后统计一共打了多少个字词，看到了第几关，成绩以一共打了多少个字词为准

进阶提问词是：

太厉害了deepseek大哥，请帮忙加上1.难度分级，2.音效反馈，3.历史记录，4.成就系统，5.分享功能

以下是线上版本的全量代码：

增强版微信小程序打字练习应用

下面是为您增强后的打字练习小程序，包含了所有您要求的5个功能扩展。

完整代码实现

1. 页面结构 (index.wxml)

<view class="container">
  <!-- 难度选择 -->
  <view wx:if="{{!gameStarted}}" class="difficulty-selector">
    <text class="section-title">选择难度</text>
    <radio-group bindchange="onDifficultyChange">
      <label wx:for="{{difficulties}}" wx:key="value" class="radio-label">
        <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}
      </label>
    </radio-group>
  </view>

  <!-- 游戏状态显示 -->
  <view class="header">
    <text>关卡: {{level}} | 时间: {{timeLeft}}秒 | 目标: {{targetCount}}</text>
    <text>已完成: {{completedCount}}/{{targetCount}}</text>
  </view>
  
  <!-- 当前字词显示 -->
  <view class="display-area">
    <text class="current-word">{{currentWord}}</text>
  </view>
  
  <!-- 输入框 -->
  <input 
    type="text" 
    value="{{inputText}}" 
    bindinput="onInput" 
    placeholder="请输入上方显示的内容"
    focus
    disabled="{{!gameStarted || gameOver}}"
  />
  
  <!-- 统计信息 -->
  <view class="stats">
    <text>总打字数: {{totalCount}}</text>
    <text>准确率: {{accuracy}}%</text>
    <text>历史最佳: {{bestScore}}字 ({{bestLevel}}关)</text>
    <text>成就: {{achievement}}</text>
  </view>
  
  <!-- 按钮区域 -->
  <view class="button-group">
    <button wx:if="{{!gameStarted}}" bindtap="startGame" type="primary">开始游戏</button>
    <button wx:if="{{gameStarted && !gameOver}}" bindtap="endGame">结束游戏</button>
    <button wx:if="{{gameOver}}" bindtap="restartGame" type="primary">重新开始</button>
    <button wx:if="{{gameOver}}" bindtap="shareResult" open-type="share" class="share-btn">分享成绩</button>
  </view>
  
  <!-- 成就提示弹窗 -->
  <modal wx:if="{{showAchievement}}" title="成就达成！" visible="{{showAchievement}}" bindcancel="hideAchievement">
    <view class="achievement-modal">
      <text>{{newAchievement}}</text>
      <image src="/images/achievement.png" mode="aspectFit"></image>
    </view>
    <button slot="confirm" bindtap="hideAchievement">确定</button>
  </modal>
</view>

2. 样式 (index.wxss)

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.difficulty-selector {
  margin-bottom: 20px;
  width: 80%;
}

.section-title {
  font-weight: bold;
  margin-bottom: 10px;
  display: block;
}

.radio-label {
  margin-right: 20px;
}

.header {
  margin-bottom: 20px;
  text-align: center;
}

.display-area {
  margin: 30px 0;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  min-height: 60px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
}

.current-word {
  font-size: 24px;
  font-weight: bold;
}

input {
  width: 80%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
  margin-bottom: 20px;
  font-size: 16px;
}

.stats {
  margin-top: 20px;
  text-align: center;
  line-height: 1.6;
}

.button-group {
  display: flex;
  flex-direction: column;
  width: 80%;
}

.button-group button {
  margin-top: 10px;
}

.share-btn {
  background-color: #07C160;
  color: white;
}

.achievement-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.achievement-modal image {
  width: 100px;
  height: 100px;
  margin-top: 10px;
}

/* 正确/错误状态 */
.correct {
  color: #07C160;
}

.wrong {
  color: #FF4D4F;
}

3. 逻辑代码 (index.js)

// 音效路径
const innerAudioContext = wx.createInnerAudioContext();
innerAudioContext.autoplay = false;

Page({
  data: {
    // 游戏状态
    gameStarted: false,
    gameOver: false,
    level: 1,
    timeLeft: 60,
    targetCount: 10,
    completedCount: 0,
    totalCount: 0,
    currentWord: '',
    inputText: '',
    accuracy: 100,
    correctCount: 0,
    timer: null,
    
    // 难度设置
    difficulty: 1, // 1:初级 2:中级 3:高级
    difficulties: [
      { name: '初级(字母)', value: 1, checked: true },
      { name: '中级(字母+单词)', value: 2 },
      { name: '高级(字母+单词+汉字)', value: 3 }
    ],
    
    // 字词库
    wordLists: {
      1: [ // 初级 - 只有字母
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 
        'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        'ab', 'cd', 'ef', 'gh', 'ij', 'kl', 'mn', 'op', 'qr', 'st', 'uv', 'wx', 'yz'
      ],
      2: [ // 中级 - 字母和简单单词
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 
        'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        'ab', 'cd', 'ef', 'gh', 'ij', 'kl', 'mn', 'op', 'qr', 'st', 'uv', 'wx', 'yz',
        'the', 'and', 'for', 'are', 'but', 'not', 'you', 'all', 'any', 'can', 'her', 'was', 'one', 'our'
      ],
      3: [ // 高级 - 字母、单词和汉字
        'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 
        'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
        'ab', 'cd', 'ef', 'gh', 'ij', 'kl', 'mn', 'op', 'qr', 'st', 'uv', 'wx', 'yz',
        'the', 'and', 'for', 'are', 'but', 'not', 'you', 'all', 'any', 'can', 'her', 'was', 'one', 'our',
        '啊', '哦', '嗯', '好', '是', '不', '我', '你', '他', '她', '它', '这', '那', '的', '了',
        '哎呀', '好吧', '是的', '不是', '我们', '你们', '他们', '这个', '那个', '好的'
      ]
    },
    
    // 历史记录
    bestScore: 0,
    bestLevel: 0,
    
    // 成就系统
    achievements: [
      { id: 1, name: '打字新手', condition: 100, description: '累计打字100个' },
      { id: 2, name: '打字达人', condition: 500, description: '累计打字500个' },
      { id: 3, name: '打字高手', condition: 1000, description: '累计打字1000个' },
      { id: 4, name: '键盘侠', condition: 5000, description: '累计打字5000个' },
      { id: 5, name: '初级通关', condition: 0, description: '通过初级难度第5关' },
      { id: 6, name: '中级通关', condition: 0, description: '通过中级难度第10关' },
      { id: 7, name: '高级通关', condition: 0, description: '通过高级难度第15关' }
    ],
    achievement: '暂无',
    unlockedAchievements: [],
    showAchievement: false,
    newAchievement: '',
    
    // 音效
    soundEffects: {
      correct: '/sounds/correct.mp3',
      wrong: '/sounds/wrong.mp3',
      levelUp: '/sounds/level-up.mp3',
      gameOver: '/sounds/game-over.mp3'
    }
  },

  onLoad: function() {
    // 加载历史记录
    this.loadHistory();
    
    // 预加载音效
    this.preloadSounds();
  },

  // 预加载音效
  preloadSounds: function() {
    for (let key in this.data.soundEffects) {
      innerAudioContext.src = this.data.soundEffects[key];
      innerAudioContext.onCanplay(() => {});
    }
  },

  // 播放音效
  playSound: function(type) {
    if (this.data.soundEffects[type]) {
      innerAudioContext.src = this.data.soundEffects[type];
      innerAudioContext.play();
    }
  },

  // 加载历史记录
  loadHistory: function() {
    const bestScore = wx.getStorageSync('bestScore') || 0;
    const bestLevel = wx.getStorageSync('bestLevel') || 0;
    const unlockedAchievements = wx.getStorageSync('unlockedAchievements') || [];
    
    // 获取当前最高成就
    let highestAchievement = '暂无';
    if (unlockedAchievements.length > 0) {
      const lastAchievement = unlockedAchievements[unlockedAchievements.length - 1];
      highestAchievement = lastAchievement.name;
    }
    
    this.setData({
      bestScore: bestScore,
      bestLevel: bestLevel,
      unlockedAchievements: unlockedAchievements,
      achievement: highestAchievement
    });
  },

  // 保存历史记录
  saveHistory: function() {
    wx.setStorageSync('bestScore', this.data.bestScore);
    wx.setStorageSync('bestLevel', this.data.bestLevel);
    wx.setStorageSync('unlockedAchievements', this.data.unlockedAchievements);
  },

  // 难度选择
  onDifficultyChange: function(e) {
    this.setData({
      difficulty: parseInt(e.detail.value)
    });
  },

  // 生成随机字词
  generateRandomWord: function() {
    const wordList = this.data.wordLists[this.data.difficulty];
    const index = Math.floor(Math.random() * wordList.length);
    return wordList[index];
  },

  // 开始游戏
  startGame: function() {
    this.setData({
      gameStarted: true,
      gameOver: false,
      level: 1,
      timeLeft: 60,
      targetCount: 10,
      completedCount: 0,
      totalCount: 0,
      correctCount: 0,
      accuracy: 100,
      currentWord: this.generateRandomWord(),
      inputText: ''
    });
    
    // 开始计时器
    this.startTimer();
  },

  // 开始计时
  startTimer: function() {
    clearInterval(this.data.timer);
    
    this.data.timer = setInterval(() => {
      let timeLeft = this.data.timeLeft - 1;
      let level = this.data.level;
      let targetCount = this.data.targetCount;
      let completedCount = this.data.completedCount;
      
      if (timeLeft <= 0) {
        if (completedCount >= targetCount) {
          // 过关
          this.playSound('levelUp');
          level++;
          targetCount = level * 10;
          timeLeft = 60;
          completedCount = 0;
          
          // 检查通关成就
          this.checkLevelAchievement(level);
        } else {
          // 游戏结束
          this.playSound('gameOver');
          clearInterval(this.data.timer);
          this.setData({
            gameOver: true
          });
          
          // 更新历史记录
          this.updateHistory();
          return;
        }
      }
      
      this.setData({
        timeLeft: timeLeft,
        level: level,
        targetCount: targetCount,
        completedCount: completedCount
      });
    }, 1000);
  },

  // 检查成就
  checkAchievements: function(totalCount) {
    const achievements = this.data.achievements;
    const unlocked = this.data.unlockedAchievements;
    const newAchievements = [];
    
    // 检查打字数量成就
    for (let i = 0; i < achievements.length; i++) {
      const ach = achievements[i];
      
      // 已经解锁的跳过
      if (unlocked.some(a => a.id === ach.id)) continue;
      
      // 检查条件
      if ((ach.condition > 0 && totalCount >= ach.condition) || 
          (ach.id === 5 && this.data.difficulty === 1 && this.data.level > 5) ||
          (ach.id === 6 && this.data.difficulty === 2 && this.data.level > 10) ||
          (ach.id === 7 && this.data.difficulty === 3 && this.data.level > 15)) {
        
        newAchievements.push(ach);
        unlocked.push(ach);
      }
    }
    
    if (newAchievements.length > 0) {
      // 显示最新成就
      const latest = newAchievements[newAchievements.length - 1];
      this.setData({
        unlockedAchievements: unlocked,
        achievement: latest.name,
        showAchievement: true,
        newAchievement: latest.description
      });
      
      // 保存历史记录
      this.saveHistory();
    }
  },

  // 检查关卡成就
  checkLevelAchievement: function(level) {
    // 根据难度检查通关成就
    if ((this.data.difficulty === 1 && level > 5) ||
        (this.data.difficulty === 2 && level > 10) ||
        (this.data.difficulty === 3 && level > 15)) {
      this.checkAchievements(this.data.totalCount);
    }
  },

  // 更新历史记录
  updateHistory: function() {
    const totalCount = this.data.totalCount;
    const level = this.data.level;
    
    if (totalCount > this.data.bestScore) {
      this.setData({
        bestScore: totalCount,
        bestLevel: level
      });
      
      // 保存历史记录
      this.saveHistory();
    }
    
    // 检查成就
    this.checkAchievements(totalCount);
  },

  // 输入处理
  onInput: function(e) {
    const input = e.detail.value;
    const currentWord = this.data.currentWord;
    
    if (input === currentWord) {
      // 输入正确
      this.playSound('correct');
      
      const completedCount = this.data.completedCount + 1;
      const totalCount = this.data.totalCount + 1;
      const correctCount = this.data.correctCount + 1;
      const accuracy = Math.round((correctCount / totalCount) * 100);
      
      this.setData({
        completedCount: completedCount,
        totalCount: totalCount,
        correctCount: correctCount,
        accuracy: accuracy,
        currentWord: this.generateRandomWord(),
        inputText: ''
      });
      
      // 检查是否完成当前关卡目标
      if (completedCount >= this.data.targetCount) {
        this.setData({
          timeLeft: 60,
          completedCount: 0
        });
      }
    } else if (currentWord.startsWith(input)) {
      // 部分匹配，只更新输入框
      this.setData({
        inputText: input
      });
    } else {
      // 输入错误
      this.playSound('wrong');
      
      const totalCount = this.data.totalCount + 1;
      const accuracy = Math.round((this.data.correctCount / totalCount) * 100);
      
      this.setData({
        totalCount: totalCount,
        accuracy: accuracy,
        inputText: input
      });
    }
  },

  // 结束游戏
  endGame: function() {
    clearInterval(this.data.timer);
    this.playSound('gameOver');
    this.setData({
      gameOver: true
    });
    
    // 更新历史记录
    this.updateHistory();
  },

  // 重新开始
  restartGame: function() {
    this.startGame();
  },

  // 隐藏成就提示
  hideAchievement: function() {
    this.setData({
      showAchievement: false
    });
  },

  // 分享功能
  onShareAppMessage: function() {
    return {
      title: '我在打字练习中达到了' + this.data.totalCount + '字，闯到第' + this.data.level + '关！',
      path: '/pages/index/index',
      imageUrl: '/images/share.png'
    }
  },
  
  // 用户点击右上角分享
  onShareTimeline: function() {
    return {
      title: '我在打字练习中达到了' + this.data.totalCount + '字，闯到第' + this.data.level + '关！',
      query: 'from=share'
    }
  }
});

4. 项目结构

/miniprogram
  /pages
    /index
      index.wxml
      index.wxss
      index.js
      index.json
  /sounds
    correct.mp3
    wrong.mp3
    level-up.mp3
    game-over.mp3
  /images
    achievement.png
    share.png
  app.js
  app.json
  app.wxss

功能说明

1. 难度分级：

   • 初级：只包含字母和字母组合
   • 中级：包含字母、字母组合和简单单词
   • 高级：包含字母、字母组合、单词和汉字/词组

2. 音效反馈：

   • 输入正确时播放"correct.mp3"
   • 输入错误时播放"wrong.mp3"
   • 过关时播放"level-up.mp3"
   • 游戏结束时播放"game-over.mp3"

3. 历史记录：

   • 使用微信小程序的Storage API保存最佳成绩
   • 记录最高打字数量和最高关卡

4. 成就系统：

   • 打字数量成就：打字新手(100字)、打字达人(500字)等
   • 通关成就：初级通关(5关)、中级通关(10关)等
   • 成就解锁时有弹窗提示

5. 分享功能：

   • 可以分享成绩到微信好友和朋友圈
   • 分享内容包括打字数量和关卡信息

部署注意事项

1. 确保在app.json中配置了所需的权限：

{
  "requiredBackgroundModes": ["audio"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

2. 音效文件需要放在sounds目录下，图片资源放在images目录下

3. 如果需要更丰富的音效，可以考虑使用第三方音效库

这个增强版打字练习小程序现在具备了完整的游戏化元素，能够提供更好的用户体验和更长的用户留存时间。

作者制作后反馈，这个游戏玩的时候会起一点点心理鸡皮疙瘩，大伙不妨一试，或者自己制作后进行尝试。