Marscode AI辅助编程

直接使用Marscode的云服务来开发，也是很方便的，不用担心配置环境的问题，很适合初步学习，在任何设备都能开发。

番茄钟

请你基于html、tailwind css和javascript，帮我设计一个"番茄时钟"。要求UI简洁美观大方，同时具有呼吸感，点击开始计时、点击暂停计时和重置计时的功能能够完美实现

使用这个提示词就能在网页上运行一个自己的番茄钟

点击各个按钮，看是否都正常运作，确实可以

井字棋

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

没有出现bug，那我们就可以继续加功能了

大家跑出来的功能电脑下棋能力，可能是随机找空位下棋。

我们可以设置电脑玩家的逻辑，比如堵住我们不让我们三连。

新规则

我这里想要更新的玩法

我希望减少平局的消失，场上只会同时存在n个棋子，多余的棋子按时间顺序消失。先输入n的数值，然后开始游戏

发现他用python而不是html了，我们选中代码，右键和ai助手聊天

结果失败了。我决定重新整理提示词再发送一遍。

请你基于html、tailwind css和javascript，帮我设计一个"井字棋游戏"。要求UI简洁美观大方，同时具有呼吸感，人类玩家以及电脑玩家放置棋子，游戏胜负平局判定条件能够完美实现。我希望减少平局的消失，场上只会同时存在n个棋子，多余的棋子按时间顺序消失。先输入n的数值，然后开始游戏

失败了，我设置n=8，八个棋子就不让下了

请你把设置n值解释清楚，然后放在更显目的位置，未设置则是普通模式

出现了错误内容，我们可以把不要的内容点击删除，重新发送即可

我发现目前过长的程序会导致格式错乱

再解决了问题后，又发现了AI理解提示词的问题

这时候要重新强调自己想要做的东西

最终提示词（新规则井字棋）

（marscode目前一次性生成还是有点困难的，大家可以试试看能不能做出来一个完整的游戏哦）

你是一个大厂程序员，请仔细思考后，一步一步帮我完成这个代码，禁止给我不完整的代码。在每个功能后面要写上注释。

# 井字棋游戏

## 游戏设置界面（要求UI简洁美观大方，）
- **输入框**：提供一个输入框让用户输入`n`的数值（5到8），确定棋盘上同时存在的棋子数量。
- **规则说明**：第`n+1`个棋子放下时，第1个棋子会被清除；依次类推，第`n+2`个棋子放下时，第2个棋子会被清除，以此类推。
- **设置说明**：设置成功显示后，刷新游戏重新开始

## 棋盘设计
- **网格系统**：创建一个3x3的棋盘。
- **颜色交替**：棋盘格子应该有交替的颜色，以提高可读性。
- **动画效果**：棋盘应该有动画效果，比如棋子放置时的放大或缩小，以增加呼吸感。

## 棋子设计
- **棋子区分**：设计两种棋子，一种代表人类玩家，另一种代表电脑玩家。
- **按钮样式**：使棋子具有现代感。

## 游戏逻辑
- **JavaScript处理**：使用JavaScript来处理游戏逻辑，包括棋子的放置、消失规则以及胜负平局的判定。
- **自主下棋**：电脑玩家能够根据预设策略自主下棋。

## 交互设计
- **流畅交互**：确保用户和电脑玩家的交互流畅，棋子的放置应该具有呼吸感。
- **电脑策略**：电脑玩家的棋子放置应该有随机性，但也要有一定的策略。

## 胜负平局判定
- **判定函数**：实现一个函数来判断游戏的胜负平局条件。
- **结果通知**：当游戏结束时，显示一个模态框通知用户结果。

参考代码（新规则井字棋）

html

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级井字棋</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 游戏设置区域 -->
    <div class="settings-container">
        <h1>高级井字棋</h1>
        <div class="settings-form">
            <label for="pieceCount">同时存在的棋子数量(5-8):</label>
            <input type="number" id="pieceCount" min="5" max="8" value="5">
            <button id="startGame">开始游戏</button>
        </div>
        <div class="rules">
            <h3>游戏规则：</h3>
            <p>1. 设置N个同时存在的棋子(5-8个)</p>
            <p>2. 放下第N+1个棋子时，第1个棋子会消失</p>
            <p>3. 三子连成一线即可获胜</p>
        </div>
    </div>

    <!-- 游戏主区域 -->
    <div class="game-container" style="display: none;">
        <div class="board">
            <div class="cell" data-index="0"></div>
            <div class="cell" data-index="1"></div>
            <div class="cell" data-index="2"></div>
            <div class="cell" data-index="3"></div>
            <div class="cell" data-index="4"></div>
            <div class="cell" data-index="5"></div>
            <div class="cell" data-index="6"></div>
            <div class="cell" data-index="7"></div>
            <div class="cell" data-index="8"></div>
        </div>
        <button id="resetGame">重新开始</button>
    </div>

    <!-- 游戏结果弹窗 -->
    <div id="gameResult" class="modal">
        <div class="modal-content">
            <h2 id="resultText"></h2>
            <button id="playAgain">再玩一次</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScript

javascript 复制代码

class TicTacToe {
    constructor() {
        // 初始化游戏状态
        this.currentPlayer = 'x'; // x代表玩家，o代表电脑
        this.board = Array(9).fill('');
        this.moveHistory = []; // 记录移动历史
        this.maxPieces = 5; // 默认同时存在的棋子数量
        this.gameActive = false;
        
        // 获取DOM元素
        this.cells = document.querySelectorAll('.cell');
        this.modal = document.getElementById('gameResult');
        this.resultText = document.getElementById('resultText');
        
        // 绑定事件处理器
        this.initializeEventListeners();
    }

    // 初始化事件监听器
    initializeEventListeners() {
        // 开始游戏按钮
        document.getElementById('startGame').addEventListener('click', () => {
            const pieceCount = document.getElementById('pieceCount').value;
            this.startGame(parseInt(pieceCount));
        });

        // 棋盘点击事件
        this.cells.forEach(cell => {
            cell.addEventListener('click', () => {
                if (this.gameActive) {
                    this.handleCellClick(cell);
                }
            });
        });

        // 重新开始按钮
        document.getElementById('resetGame').addEventListener('click', () => {
            this.resetGame();
        });

        // 再玩一次按钮
        document.getElementById('playAgain').addEventListener('click', () => {
            this.modal.style.display = 'none';
            this.resetGame();
        });
    }

    // 开始新游戏
    startGame(pieceCount) {
        if (pieceCount >= 5 && pieceCount <= 8) {
            this.maxPieces = pieceCount;
            this.gameActive = true;
            document.querySelector('.settings-container').style.display = 'none';
            document.querySelector('.game-container').style.display = 'block';
            this.resetGame();
        } else {
            alert('请输入5-8之间的数字！');
        }
    }

    // 处理玩家点击棋格
    handleCellClick(cell) {
        const index = cell.dataset.index;
        if (this.board[index] === '' && this.currentPlayer === 'x') {
            this.makeMove(index);
            
            // 检查游戏状态
            if (this.checkWinner()) {
                this.endGame('恭喜你赢了！');
                return;
            }
            
            // 电脑回合
            setTimeout(() => {
                if (this.gameActive) {
                    this.computerMove();
                }
            }, 500);
        }
    }

    // 执行移动
    makeMove(index) {
        this.board[index] = this.currentPlayer;
        this.cells[index].classList.add(this.currentPlayer);
        this.moveHistory.push(index);
        
        // 检查是否需要移除最早的棋子
        if (this.moveHistory.length > this.maxPieces) {
            const removeIndex = this.moveHistory.shift();
            this.board[removeIndex] = '';
            this.cells[removeIndex].classList.remove('x', 'o');
        }
        
        this.currentPlayer = this.currentPlayer === 'x' ? 'o' : 'x';
    }

    // 电脑移动策略
    computerMove() {
        // 寻找最佳移动位置
        const bestMove = this.findBestMove();
        if (bestMove !== -1) {
            this.makeMove(bestMove);
            if (this.checkWinner()) {
                this.endGame('电脑赢了！');
                return;
            }
        }
    }

    // 查找最佳移动位置
    findBestMove() {
        // 首先检查是否能赢
        for (let i = 0; i < 9; i++) {
            if (this.board[i] === '') {
                this.board[i] = 'o';
                if (this.checkWinner()) {
                    this.board[i] = '';
                    return i;
                }
                this.board[i] = '';
            }
        }

        // 检查是否需要阻止玩家赢
        for (let i = 0; i < 9; i++) {
            if (this.board[i] === '') {
                this.board[i] = 'x';
                if (this.checkWinner()) {
                    this.board[i] = '';
                    return i;
                }
                this.board[i] = '';
            }
        }

        // 随机选择一个空位
        const emptyPositions = this.board
            .map((cell, index) => cell === '' ? index : -1)
            .filter(index => index !== -1);
            
        if (emptyPositions.length > 0) {
            return emptyPositions[Math.floor(Math.random() * emptyPositions.length)];
        }
        
        return -1;
    }

    // 检查获胜条件
    checkWinner() {
        const winPatterns = [
            [0, 1, 2], [3, 4, 5], [6, 7, 8], // 横向
            [0, 3, 6], [1, 4, 7], [2, 5, 8], // 纵向
            [0, 4, 8], [2, 4, 6] // 对角线
        ];

        return winPatterns.some(pattern => {
            const [a, b, c] = pattern;
            return this.board[a] && 
                   this.board[a] === this.board[b] && 
                   this.board[a] === this.board[c];
        });
    }

    // 结束游戏
    endGame(message) {
        this.gameActive = false;
        this.resultText.textContent = message;
        this.modal.style.display = 'flex';
    }

    // 重置游戏
    resetGame() {
        this.board = Array(9).fill('');
        this.moveHistory = [];
        this.currentPlayer = 'x';
        this.gameActive = true;
        this.cells.forEach(cell => {
            cell.classList.remove('x', 'o', 'win');
        });
    }
}

// 初始化游戏
document.addEventListener('DOMContentLoaded', () => {
    new TicTacToe();
});

css

html 复制代码

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    padding: 20px;
}

/* 设置区域样式 */
.settings-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    text-align: center;
}

.settings-form {
    margin: 20px 0;
}

input[type="number"] {
    padding: 8px;
    margin: 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #45a049;
}

/* 游戏棋盘样式 */
.game-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    background-color: #34495e;
    padding: 10px;
    border-radius: 10px;
}

.cell {
    width: 100px;
    height: 100px;
    background-color: white;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    transition: all 0.3s ease;
}

.cell:hover {
    background-color: #f5f5f5;
}

/* 棋子样式 */
.cell.x::before {
    content: "×";
    color: #e74c3c;
}

.cell.o::before {
    content: "○";
    color: #3498db;
}

/* 胜利时的动画效果 */
.cell.win {
    background-color: #2ecc71;
    color: white;
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

/* 动画效果 */
@keyframes place-piece {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.cell.x::before,
.cell.o::before {
    animation: place-piece 0.3s ease-out;
}

总结

用AI编程，做些有意思的小项目真是又简单又快捷，只需要做好提示词工程就可以了！

课程来源：Datawhale冬令营

Datawhale-AI活动