【chatGPT自然语言编程】0编程基础制作舒尔特方格，用AI把ptyhon代码转化为微信小程序-P站就是AI生产力！

接上一篇文章，【chatGPT自然语言编程】0编程基础制作舒尔特方格我们用python实现了可以在电脑上运行的舒尔特方格，现在我们来实现微信小程序版的舒尔特方格

还是用chatGPT配合我们，下面是一些我和chatGPT沟通的截取，希望能大家带来一些思路：

我说：将以下代码改写成uniapp

import tkinter as tk
import random
from tkinter import ttk
import base64
import webbrowser

# 添加新的全局变量
grid_size = 4
s = '6IiS5bCU54m55pa55qC86K6t57uD44CQcHB0dGVyLmNvbeWHuuWTgS1BSeWwseaYr+eUn+S6p+WKm++8geOAkQ=='
title = base64.b64decode(s).decode('utf-8')

def add_time_to_table():
    global elapsed_time, grid_size
    time_text = f"{elapsed_time // 60000:02d}:{(elapsed_time // 1000) % 60:02d}.{elapsed_time % 1000 // 10:02d}"
    required_time = f"{grid_size * grid_size // 60:02d}:{grid_size * grid_size % 60:02d}"
    results_table.insert("", "end", values=(f"{grid_size}x{grid_size}", time_text, required_time))
    update_time_color()

def generate_numbers():
    numbers = list(range(1, grid_size * grid_size + 1))
    random.shuffle(numbers)
    return numbers

def on_cell_click(event, number, cell_number):
    global current_number, timer_started, timer_id, grid_size
    if not timer_started and number == 1:
        timer_started = True
        timer_id = root.after(10, update_timer)
    if number == current_number:
        canvas.itemconfig(cell_number, fill="red")
        current_number += 1
        if current_number > grid_size * grid_size:
            root.after_cancel(timer_id)
            next_level_button.pack()
            add_time_to_table()

def create_grid(canvas):
    global grid_size
    canvas.delete("all")  # 清空画布
    numbers = list(range(1, grid_size * grid_size + 1))
    random.shuffle(numbers)
    index = 0
    cell_size = 768 // grid_size  # 根据 grid_size 调整单元格大小
    for i in range(grid_size):
        for j in range(grid_size):
            cell = canvas.create_rectangle(j * cell_size, i * cell_size, (j+1) * cell_size, (i+1) * cell_size, fill="white", outline="black", width=5)
            number = canvas.create_text(j * cell_size + cell_size // 2, i * cell_size + cell_size // 2, text=str(numbers[index]), font=("Arial", 48))
            canvas.tag_bind(cell, '<Button-1>', lambda event, n=numbers[index], c=number: on_cell_click(event, n, c))
            canvas.tag_bind(number, '<Button-1>', lambda event, n=numbers[index], c=number: on_cell_click(event, n, c))
            index += 1

def update_timer():
    global elapsed_time, timer_id
    elapsed_time += 10
    timer_text = f"{elapsed_time // 60000:02d}:{(elapsed_time // 1000) % 60:02d}.{elapsed_time % 1000 // 10:02d}"
    timer_label.config(text=timer_text)
    timer_id = root.after(10, update_timer)

def restart_game():
    global current_number, timer_started, elapsed_time, timer_id, grid_size
    current_number = 1
    timer_started = False
    elapsed_time = 0
    timer_label.config(text="00:00.00")
    root.after_cancel(timer_id)
    create_grid(canvas)

def update_time_color():
    for row in results_table.get_children():
        row_values = results_table.item(row, "values")
        actual_time = row_values[1]
        required_time = row_values[2]
        if actual_time <= required_time:
            results_table.item(row, tags="green")
        else:
            results_table.item(row, tags="red")

    results_table.tag_configure("green", foreground="green")
    results_table.tag_configure("red", foreground="red")

# 为“下一关”按钮添加一个事件处理函数，使其在点击时增加 grid_size 的值并重新生成方格
def next_level():
    global grid_size
    grid_size += 1
    restart_game()
    next_level_button.pack_forget()

def reset_game():
    global grid_size
    grid_size = 4
    restart_game()

def open_baidu(event):
    webbrowser.open("https://www.pptter.com")

root = tk.Tk()
root.title(title)

style = ttk.Style()
style.configure("HyperlinkLabel.TLabel", foreground="red", font="Arial 10 underline")

frame = tk.Frame(root)
frame.pack()

canvas = tk.Canvas(frame, width=768, height=768, bg="white")
canvas.pack(side=tk.LEFT)

control_frame = tk.Frame(frame)
control_frame.pack(side=tk.RIGHT, padx=10, pady=10)  # 添加边距

baidu_link = ttk.Label(control_frame, text="点击访问PPTTER学习AI知识", style="HyperlinkLabel.TLabel")
baidu_link.bind("<Button-1>", open_baidu)
baidu_link.pack(pady=5)

timer_label = tk.Label(control_frame, text="00:00.00", font=("Arial", 48), bg="white", fg="black")
timer_label.pack(pady=10)  # 添加边距

buttons_frame = tk.Frame(control_frame)
buttons_frame.pack(pady=10)  # 添加边距

restart_button = tk.Button(buttons_frame, text="重新开始当前关卡", command=restart_game)
restart_button.pack(side=tk.LEFT, padx=5)  # 添加边距

reset_button = tk.Button(buttons_frame, text="从头开始", command=reset_game)
reset_button.pack(side=tk.RIGHT, padx=5)  # 添加边距

# 创建“下一关”按钮并默认隐藏
next_level_button = tk.Button(control_frame, text="下一关", command=next_level)

# 在 control_frame 中添加一个表格
results_table = ttk.Treeview(control_frame, columns=("Level", "Time", "RequiredTime"), show="headings")
results_table.heading("Level", text="关卡")
results_table.heading("Time", text="用时")
results_table.heading("RequiredTime", text="要求时间")

# 设置表格的列宽
results_table.column("Level", width=80, anchor='center')
results_table.column("Time", width=100, anchor='center')
results_table.column("RequiredTime", width=100, anchor='center')

results_table.pack(pady=10)

current_number = 1
timer_started = False
elapsed_time = 0

create_grid(canvas)

root.mainloop()

chatGPT回复：

你给出的是用 Python 和 Tkinter 库编写的代码。Tkinter 是用于创建图形用户界面（GUI）的 Python 标准库。这段代码创建了一个简单的游戏，玩家需要按顺序点击数字，数字会随机排列。该代码中包含了计时器，每轮游戏结束后记录用时，而且包含了重新开始，从头开始，以及下一关的功能。

然而，uni-app 是使用 Vue.js 语法进行开发的跨平台应用开发框架，主要用于移动应用开发。它不是 Python，也不能直接运行 Python 代码。

所以，我不能直接将你给出的 Tkinter 代码转化为 uni-app 代码。这需要完全使用不同的语言和框架重写这个应用。我们可以用 Vue.js 的语法来构建类似的功能。但是，请注意，需要的工作量相当大，因为两者的实现方式有很大的区别。

在以下的uni-app代码中，我们模拟了上述游戏的部分功能，实现了一个基本的数字点击游戏：

由此发现，可能是由于uni-app的训练资料过少，导致直接转写，效果很不好，所以我改了一下思路，先改写成vue的版本。

所以我继续和chatGPT沟通：

改写成html+vue

chatGPT 回复

下面是将上述 Python 代码转换为 HTML 和 Vue.js 的版本。这段代码实现了一个简单的数字点击游戏，生成随机的数字网格，然后点击正确的数字。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Number Game</title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      padding: 20px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }

    .cell {
      padding: 20px;
      text-align: center;
      border: 1px solid #000;
    }

    .buttons {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    <div class="grid">
      <button class="cell" v-for="(cell, index) in grid" :key="index" @click="handleClick(index)">{{ cell }}</button>
    </div>
    <div class="buttons">
      <button @click="resetGame">重新开始当前关卡</button>
      <button @click="resetGameAndSize">从头开始</button>
      <button @click="nextLevel">下一关</button>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        gridSize: 4,
        currentNumber: 1,
        grid: []
      },
      methods: {
        generateNumbers() {
          let numbers = [];
          for (let i = 1; i <= this.gridSize * this.gridSize; i++) {
            numbers.push(i);
          }
          return numbers.sort(() => Math.random() - 0.5);
        },
        handleClick(index) {
          if (this.grid[index] === this.currentNumber) {
            this.$set(this.grid, index, '✓');
            this.currentNumber += 1;
            if (this.currentNumber > this.gridSize * this.gridSize) {
              this.nextLevel();
            }
          }
        },
        resetGame() {
          this.currentNumber = 1;
          this.grid = this.generateNumbers();
        },
        resetGameAndSize() {
          this.gridSize = 4;
          this.resetGame();
        },
        nextLevel() {
          this.gridSize += 1;
          this.resetGame();
        }
      },
      created() {
        this.resetGame();
      }
    });
  </script>
</body>
</html>

这次以后就好很多了，后面的工作就是要手动把vue的代码移植到uni-app上

本文章对应的视频，视频更加的详细【chatGPT自然语言编程】0编程基础制作舒尔特方格，用AI把ptyhon代码转化为微信小程序

本文的小程序我已经上传到uniapp的插件市场，大家可以免费下载，直接使用，后面我也会持续更新：【p站发布】自然语言编程-舒尔特方格