DataWhale AI 冬训营 clock in-CSDN博客

本文链接：https://blog.csdn.net/2402_89140081/article/details/144699533

在体验了一把使用AI辅助编写代码（番茄时钟）之后，我谈一下我的感受：

1、使用平台

使用的平台是豆包MarsCode编程助手，我平常使用过豆包电脑版来编写过代码，在体验过豆包的编程助手以后，我感觉仿佛来到了一个新的天地，豆包MarsCode拥有强大的AI能力：代码补全、单测生成、代码解释、生成注释、错误修复、AI问答等等，当然还有最重要的我体验的辅助编写功能（当然还有很多其他的功能等待我去体验）。平台支持两种主流IDE和云端环境的MarsCode IDE，我主要使用云端环境来体验，后续会在VS code中安装使用。

2、体验过程

冬训营的体验学习任务是使用AI辅助编写一个番茄时钟的代码：使用Prompt让AI为我们编写一个符合我们需求的番茄时钟。

我所使用的Prompt是：请你基于html、tailwind css和javascript，帮我设计一个“番茄时钟”。要求UI简洁美观大方，同时具有呼吸感，点击开始计时、点击暂停计时和重置计时的功能能够完美实现。（主办方提供的）

左图就是输入Prompt以后AI帮助写的带代码

3、生成代码及效果

这是HTML的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄时钟</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="bg-white p-8 rounded shadow-md w-96">
        <h1 class="text-2xl font-semibold mb-4">番茄时钟</h1>
        <div id="timer" class="text-4xl font-bold text-gray-700"></div>
        <div class="flex mt-4">
            <button id="startBtn" class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded mr-2">开始</button>
            <button id="pauseBtn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 px-4 rounded mr-2">暂停</button>
            <button id="resetBtn" class="bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded">重置</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

这是JS JavaScript的代码：

let timerInterval;
let startTime;
let elapsedTime = 0;

const startBtn = document.getElementById('startBtn');
const pauseBtn = document.getElementById('pauseBtn');
const resetBtn = document.getElementById('resetBtn');
const timer = document.getElementById('timer');

function startTimer() {
    startTime = Date.now() - elapsedTime;
    timerInterval = setInterval(() => {
        elapsedTime = Date.now() - startTime;
        const minutes = Math.floor(elapsedTime / 60000);
        const seconds = Math.floor((elapsedTime % 60000) / 1000);
        timer.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }, 1000);
    startBtn.disabled = true;
    pauseBtn.disabled = false;
    resetBtn.disabled = false;
}

function pauseTimer() {
    clearInterval(timerInterval);
    startBtn.disabled = false;
    pauseBtn.disabled = true;
    resetBtn.disabled = false;
}

function resetTimer() {
    clearInterval(timerInterval);
    elapsedTime = 0;
    timer.textContent = '00:00';
    startBtn.disabled = false;
    pauseBtn.disabled = true;
    resetBtn.disabled = true;
}

startBtn.addEventListener('click', startTimer);
pauseBtn.addEventListener('click', pauseTimer);
resetBtn.addEventListener('click', resetTimer);

点击运行效果就是：

4、思考问题

1）Prompt是什么？需要包含什么必须的要素？

“Prompt”通常指给模型的提示语或输入指令，用于引导模型生成特定的输出内容；一般来说，清晰明确的描述、具体的问题或任务指令等可能是较为常见的要素，但是具体取决于使用 Prompt 的具体目的和场景。

2）设计一个番茄时钟，为什么要提到 html、tailwind css和javascript ？

html 可以用于构建网页的结构，tailwind css 可以用于美化网页的样式，javascript 可以用于实现网页的交互功能。在设计番茄时钟时，我们需要使用这些技术来构建一个美观、易用的界面，并实现计时、提醒等功能。

3）为什么特别要求 UI简洁美观大方，同时具有呼吸感？

“UI 简洁美观大方”指用户界面设计要简单明了，不繁杂，给人以美感，整体呈现出大气的视觉效果。“呼吸感”在 UI 设计中通常表示界面有适当的留白、不拥挤，元素之间有足够的空间，就像人呼吸时需要足够的空气一样，给人一种轻松、舒适、不压抑的感觉。

5、作业练习

要求：修改Prompt，制作井字棋。

Prompt：请你基于html、tailwind css和javascript，帮我设计一个“井字棋游戏”。要求UI简洁美观大方，同时具有呼吸感，人类玩家以及电脑玩家放置棋子，游戏胜负平局判定条件能够完美实现。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe Game</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="./script.js" defer></script>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div id="game-board" class="grid grid-cols-3 gap-4">
        <!-- 游戏棋盘的格子 -->
        <div class="bg-white h-20 w-20 cursor-pointer" onclick="makeMove(this)"></div>
        <div class="bg-white h-20 w-20 cursor-pointer" onclick="makeMove(this)"></div>
        <div class="bg-white h-20 w-20 cursor-pointer" onclick="makeMove(this)"></div>
        <div class="bg-white h-20 w-20 cursor-pointer" onclick="makeMove(this)"></div>
        <div class="bg-white h-20 w-20 cursor-pointer" onclick="makeMove(this)"></div>
        <div class="bg-white h-20 w-20 cursor-pointer" onclick="makeMove(this)"></div>
        <div class="bg-white h-20 w-20 cursor-pointer" onclick="makeMove(this)"></div>
        <div class="bg-white h-20 w-20 cursor-pointer" onclick="makeMove(this)"></div>
        <div class="bg-white h-20 w-20 cursor-pointer" onclick="makeMove(this)"></div>
    </div>
    <div id="message" class="mt-4 text-center"></div>
</body>
</html>

let currentPlayer = 'X';
let gameBoard = ['', '', '', '', '', '', '', '', ''];
let gameActive = true;

const winningCombinations = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8],
    [0, 3, 6], [1, 4, 7], [2, 5, 8],
    [0, 4, 8], [2, 4, 6]
];

function makeMove(cell) {
    const cellIndex = Array.from(cell.parentNode.children).indexOf(cell);
    if (gameBoard[cellIndex] === '' && gameActive) {
        gameBoard[cellIndex] = currentPlayer;
        cell.textContent = currentPlayer;
        if (checkWin(currentPlayer)) {
            gameActive = false;
            document.getElementById('message').textContent = `Player ${currentPlayer} wins!`;
        } else if (checkDraw()) {
            gameActive = false;
            document.getElementById('message').textContent = "It's a draw!";
        } else {
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            if (currentPlayer === 'O') {
                setTimeout(makeComputerMove, 1000);
            }
        }
    }
}

function makeComputerMove() {
    const emptyCells = gameBoard.reduce((acc, cell, index) => {
        if (cell === '') acc.push(index);
        return acc;
    }, []);

    if (emptyCells.length > 0) {
        const randomIndex = Math.floor(Math.random() * emptyCells.length);
        const cellIndex = emptyCells[randomIndex];
        const cell = document.querySelectorAll('#game-board div')[cellIndex];
        makeMove(cell);
    }
}

function checkWin(player) {
    return winningCombinations.some(combination => {
        return combination.every(index => {
            return gameBoard[index] === player;
        });
    });
}

function checkDraw() {
    return gameBoard.every(cell => cell !== '');
}

运行效果：