一玩就上瘾的Wordle双简版，小程序开发轻松get！

前端

2024-02-03 02:14:34

Wordle是一款风靡全球的文字游戏，凭借简单而令人上瘾的游戏机制，吸引了众多玩家。现在，您可以使用uniapp + uniCloud轻松开发一个双简版的Wordle游戏，让用户在小程序中体验文字游戏的乐趣。

一、准备工作

在开始开发之前，您需要准备以下内容：

uniCloud云开发环境
uniapp开发工具
Node.js环境

二、创建项目

打开uniapp开发工具，创建一个新的项目。
选择项目模板为“空白项目”。
项目名称和路径根据个人喜好设置。

三、安装依赖

npm install --save uni-cloud-http

四、初始化云开发环境

uniCloud init

按照提示完成云开发环境的初始化。

五、创建云函数

在项目根目录下，新建一个名为“cloudfunction”的文件夹。
在“cloudfunction”文件夹下，创建一个名为“wordle.js”的文件。
在“wordle.js”文件中，编写以下代码：

const cloud = require('uni-cloud-http')

exports.main = async (event, context) => {
  // 获取请求参数
  const { word } = event

  // 校验请求参数
  if (!word) {
    return {
      code: 400,
      msg: '缺少参数word'
    }
  }

  // 调用云函数查询单词是否正确
  const res = await cloud.post('/checkWord', {
    data: {
      word
    }
  })

  // 处理查询结果
  if (res.data.code === 200) {
    return {
      code: 200,
      msg: '单词正确'
    }
  } else {
    return {
      code: 400,
      msg: '单词错误'
    }
  }
}

六、创建页面

在项目根目录下，新建一个名为“pages”的文件夹。
在“pages”文件夹下，创建一个名为“wordle”的文件。
在“wordle.vue”文件中，编写以下代码：

<template>
  <view class="wordle-container">
    <view class="wordle-board">
      <!-- Wordle网格 -->
      <view v-for="row in board" :key="row">
        <view v-for="cell in row" :key="cell" class="wordle-cell">
          <!-- 单词字母 -->
          <view v-if="cell">{{ cell }}</view>
        </view>
      </view>
    </view>
    <view class="wordle-input">
      <!-- 单词输入框 -->
      <input type="text" v-model="word" @input="checkWord" />
      <!-- 提交按钮 -->
      <button @click="checkWord">提交</button>
    </view>
  </view>
</template>

<script>
import { onMounted, ref } from 'vue'
import { cloud } from 'uni-cloud-http'

export default {
  setup() {
    // Wordle游戏板
    const board = ref([
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', ''],
      ['', '', '', '', '']
    ])

    // Wordle单词
    const word = ref('')

    // 检查单词是否正确
    const checkWord = async () => {
      // 调用云函数查询单词是否正确
      const res = await cloud.post('/checkWord', {
        data: {
          word: word.value
        }
      })

      // 处理查询结果
      if (res.data.code === 200) {
        // 单词正确，更新游戏板
        updateBoard(word.value)
      } else {
        // 单词错误，提示错误信息
        alert('单词错误')
      }
    }

    // 更新游戏板
    const updateBoard = (word) => {
      // 将单词填入游戏板
      for (let i = 0; i < word.length; i++) {
        board.value[i] = [word[i]]
      }
    }

    onMounted(() => {
      // 初始化游戏板
      updateBoard('hello')
    })

    return {
      board,
      word,
      checkWord
    }
  }
}
</script>

<style>
.wordle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wordle-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  margin-bottom: 20px;
}

.wordle-cell {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.wordle-input {
  display: flex;
  align-items: center;
}

input {
  width: 200px;
  height: 30px;
  margin-right: 10px;
  padding: 0 10px;
  border: 1px solid #000;
}

button {
  width: 80px;
  height: 30px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
}
</style>