- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

如何用 AI 快速开发一个中国风飞花令游戏？附完整代码

超梦发表于 2025/05/28 10:19:17 2025/05/28

【摘要】我最初的想法是开发一个具有中国风界面的端午诗词飞花令游戏，用户可以在游戏中输入包含特定关键字的诗句，程序能判断其正确性，并且还能提供提示和切换关键字的功能。我将这个需求详细地告知了AI，它很快理解了我的意图，并开始提供一些基础的思路。以下是最终呈现效果与实际操作中的开发界面(文末附完整代码)：在这个过程中，我与AI展开了深度对话，逐步完成了整个项目。下面我将详细分享这个过程。界面设计阶段 ...

我最初的想法是开发一个具有中国风界面的端午诗词飞花令游戏，用户可以在游戏中输入包含特定关键字的诗句，程序能判断其正确性，并且还能提供提示和切换关键字的功能。我将这个需求详细地告知了AI，它很快理解了我的意图，并开始提供一些基础的思路。

以下是最终呈现效果与实际操作中的开发界面(文末附完整代码)：

在这个过程中，我与AI展开了深度对话，逐步完成了整个项目。下面我将详细分享这个过程。

界面设计阶段

样式重置与整体布局

在界面设计方面，我首先询问AI如何进行基础样式的重置，以确保不同浏览器下页面显示的一致性。AI给出了如下代码：

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

接着，我希望整体页面有一个中国风的背景，AI建议使用渐变背景来营造氛围：

body {
    font-family: 'SimSun', '宋体', serif;
    background: linear-gradient(135deg, #0a5c36, #1a3a1e);
    color: #f8f3e0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

容器与装饰元素

对于游戏的主要容器，AI帮助我设计了样式，使其具有圆角和阴影效果：

.container {
    width: 90%;
    max-width: 800px;
    height: 90vh;
    max-height: 600px;
    background-color: rgba(10, 40, 20, 0.7);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

为了增加中国风元素，AI还提供了使用SVG背景作为装饰的方法：

.container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="none" stroke="%23f8d64e" stroke-width="2" d="M10,50 Q25,30 40,50 Q55,70 70,50 Q85,30 90,50" stroke-linecap="round"/><path fill="%23f8d64e" d="M40,50 L45,45 L50,50 L45,55 Z"/><path fill="%23f8d64e" d="M70,50 L75,45 L80,50 L75,55 Z"/></svg>');
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
}

功能实现阶段

数据准备

在功能实现上，我需要准备端午相关的关键字和包含这些关键字的诗句库。AI帮我定义了数组和对象来存储这些数据：

// 端午相关关键字
const keywords = [
    '端', '午', '粽', '龙', '舟',
    '屈', '原', '艾', '蒲', '香',
    '五', '月', '节', '日', '纪'
];

// 包含关键字的诗句库
const poetryDatabase = {
    '端': [
        '端午临中夏，时清日复长',
        '端阳采撷玉粽香，五色新丝缠角粽',
        '端阳竞渡楚江滨，士女喧阗尽醉人'
    ],
    // 其他关键字的诗句库...
};

事件处理与逻辑判断

对于游戏的核心功能，如随机选择关键字、检查诗句的正确性和显示提示等，AI为我编写了相应的函数：

// 随机选择关键字
function selectRandomKeyword() {
    const randomIndex = Math.floor(Math.random() * keywords.length);
    currentKeyword = keywords[randomIndex];
    keywordElement.textContent = currentKeyword;
    keywordDisplay.textContent = currentKeyword;
    poetryDisplay.innerHTML = `<p>请说出包含"<span id="keyword-display">${currentKeyword}</span>"字的诗句</p>`;
    poetryInput.value = '';
    poetryInput.focus();
}

// 检查诗句
function checkPoetry() {
    const userInput = poetryInput.value.trim();
    
    if (!userInput) {
        poetryDisplay.innerHTML = '<p>请输入诗句</p>';
        return;
    }
    
    if (!userInput.includes(currentKeyword)) {
        poetryDisplay.innerHTML = `
            <p>诗句中没有包含"${currentKeyword}"字</p>
            <p>请再试一次</p>
        `;
        return;
    }
    
    // 检查是否是已知诗句
    const knownPoetry = poetryDatabase[currentKeyword] || [];
    const isKnown = knownPoetry.some(poem => poem.includes(userInput));
    
    if (isKnown) {
        poetryDisplay.innerHTML = `
            <p>正确！这是一首关于端午的诗句：</p>
            <p>"${userInput}"</p>
        `;
    } else {
        poetryDisplay.innerHTML = `
            <p>虽然这不是我们收录的诗句，</p>
            <p>但"${userInput}"确实包含"${currentKeyword}"字</p>
            <p>很棒！</p>
        `;
    }
}

总结与思考

在与AI的交流中，我不断地思考和优化代码，加深了对前端开发的理解。当然，AI只是辅助工具，最终的决策和代码的优化还需要程序员自己的判断和经验。未来，我相信AI将在更多的开发场景中发挥重要作用，而我们程序员也需要不断学习和适应这种新的开发模式。

这个端午诗词飞花令游戏的开发过程，不仅是一次技术的实践，更是一次与AI协同工作的探索。希望我的分享能给其他开发者带来一些启发，让我们一起在数字化的浪潮中不断前行。

附：

index.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="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>端午诗词飞花令</h1>
            <div class="dragon-icon">🐉</div>
        </header>
        
        <main>
            <div class="game-area">
                <div class="prompt">
                    <p>今日飞花令关键字：<span id="keyword">端</span></p>
                </div>
                
                <div class="poetry-display" id="poetryDisplay">
                    <p>请说出包含"<span id="keyword-display">端</span>"字的诗句</p>
                </div>
                
                <div class="input-area">
                    <input type="text" id="poetryInput" placeholder="输入包含关键字的诗句...">
                    <button id="submitBtn">提交</button>
                    <button id="hintBtn">提示</button>
                    <button id="nextBtn">下一题</button>
                </div>
            </div>
        </main>
    </div>

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

style.css

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'SimSun', '宋体', serif;
    background: linear-gradient(135deg, #0a5c36, #1a3a1e);
    color: #f8f3e0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.container {
    width: 90%;
    max-width: 800px;
    height: 90vh;
    max-height: 600px;
    background-color: rgba(10, 40, 20, 0.7);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    padding: 20px;
    display: flex;
    flex-direction: column;
}

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

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.dragon-icon {
    font-size: 2rem;
}

/* 中国风装饰元素 */
.container::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="none" stroke="%23f8d64e" stroke-width="2" d="M10,50 Q25,30 40,50 Q55,70 70,50 Q85,30 90,50" stroke-linecap="round"/><path fill="%23f8d64e" d="M40,50 L45,45 L50,50 L45,55 Z"/><path fill="%23f8d64e" d="M70,50 L75,45 L80,50 L75,55 Z"/></svg>');
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
}

.game-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prompt {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.prompt #keyword {
    color: #f8d64e;
    font-size: 2rem;
    font-weight: bold;
}

.poetry-display {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #f8d64e;
    border-radius: 8px;
    padding: 20px;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.poetry-display p {
    line-height: 1.6;
}

#keyword-display {
    color: #f8d64e;
    font-weight: bold;
}

.input-area {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.input-area input {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    background-color: rgba(255, 255, 255, 0.9);
}

.input-area button {
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

#submitBtn, #nextBtn {
    background-color: #f8d64e;
    color: #1a3a1e;
}

#hintBtn {
    background-color: #4a8fe7;
    color: white;
}

.input-area button:hover {
    transform: translateY(-2px);
}

#submitBtn:hover, #nextBtn:hover {
    background-color: #e6c042;
}

#hintBtn:hover {
    background-color: #3a7bd5;
}

script.js

// 端午相关关键字
const keywords = [
    '端', '午', '粽', '龙', '舟',
    '屈', '原', '艾', '蒲', '香',
    '五', '月', '节', '日', '纪'
];

// 包含关键字的诗句库
const poetryDatabase = {
    '端': [
        '端午临中夏，时清日复长',
        '端阳采撷玉粽香，五色新丝缠角粽',
        '端阳竞渡楚江滨，士女喧阗尽醉人'
    ],
    '午': [
        '端午临中夏，时清日复长',
        '午日观竞渡，独醒无一人',
        '午日处州禁竞渡'
    ],
    '粽': [
        '粽包分两髻，艾束著危冠',
        '端阳采撷玉粽香，五色新丝缠角粽',
        '粽叶香飘十里，对酒携樽俎'
    ],
    '龙': [
        '鼓声三下红旗开，两龙跃出浮水来',
        '龙舟争渡，助威呐喊，凭吊祭江诵君赋',
        '龙舟竞渡，百舸争流'
    ],
    '舟': [
        '龙舟争渡，助威呐喊，凭吊祭江诵君赋',
        '鼓声三下红旗开，两龙跃出浮水来',
        '轻汗微微透碧纨，明朝端午浴芳兰'
    ],
    '屈': [
        '屈子冤魂终古在，楚乡遗俗至今留',
        '节分端午自谁言，万古传闻为屈原',
        '屈子当年赋楚骚，手中握有杀人刀'
    ],
    '原': [
        '节分端午自谁言，万古传闻为屈原',
        '屈子当年赋楚骚，手中握有杀人刀',
        '屈子冤魂终古在，楚乡遗俗至今留'
    ],
    '艾': [
        '粽包分两髻，艾束著危冠',
        '不效艾符趋习俗，但祈蒲酒话升平',
        '艾叶黄酒可驱邪，骑父稚子香囊佩'
    ],
    '蒲': [
        '不效艾符趋习俗，但祈蒲酒话升平',
        '菖蒲酒美清尊共，叶里黄鹂时一弄',
        '蒲剑斩千邪，艾旗招百福'
    ],
    '香': [
        '端阳采撷玉粽香，五色新丝缠角粽',
        '粽叶香飘十里，对酒携樽俎',
        '香囊高挂，菖蒲泛酒，端午又逢重午'
    ]
};

// DOM元素
const keywordElement = document.getElementById('keyword');
const keywordDisplay = document.getElementById('keyword-display');
const poetryDisplay = document.getElementById('poetryDisplay');
const poetryInput = document.getElementById('poetryInput');
const submitBtn = document.getElementById('submitBtn');
const hintBtn = document.getElementById('hintBtn');
const nextBtn = document.getElementById('nextBtn');

// 当前关键字
let currentKeyword = '';

// 初始化
function init() {
    // 随机选择一个关键字
    selectRandomKeyword();
    
    // 事件监听
    submitBtn.addEventListener('click', checkPoetry);
    hintBtn.addEventListener('click', showHint);
    nextBtn.addEventListener('click', selectRandomKeyword);
    poetryInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            checkPoetry();
        }
    });
}

// 随机选择关键字
function selectRandomKeyword() {
    const randomIndex = Math.floor(Math.random() * keywords.length);
    currentKeyword = keywords[randomIndex];
    keywordElement.textContent = currentKeyword;
    keywordDisplay.textContent = currentKeyword;
    poetryDisplay.innerHTML = `<p>请说出包含"<span id="keyword-display">${currentKeyword}</span>"字的诗句</p>`;
    poetryInput.value = '';
    poetryInput.focus();
}

// 检查诗句
function checkPoetry() {
    const userInput = poetryInput.value.trim();
    
    if (!userInput) {
        poetryDisplay.innerHTML = '<p>请输入诗句</p>';
        return;
    }
    
    if (!userInput.includes(currentKeyword)) {
        poetryDisplay.innerHTML = `
            <p>诗句中没有包含"${currentKeyword}"字</p>
            <p>请再试一次</p>
        `;
        return;
    }
    
    // 检查是否是已知诗句
    const knownPoetry = poetryDatabase[currentKeyword] || [];
    const isKnown = knownPoetry.some(poem => poem.includes(userInput));
    
    if (isKnown) {
        poetryDisplay.innerHTML = `
            <p>正确！这是一首关于端午的诗句：</p>
            <p>"${userInput}"</p>
        `;
    } else {
        poetryDisplay.innerHTML = `
            <p>虽然这不是我们收录的诗句，</p>
            <p>但"${userInput}"确实包含"${currentKeyword}"字</p>
            <p>很棒！</p>
        `;
    }
}

// 启动应用
init();

// 显示提示
function showHint() {
    console.log('提示按钮被点击');
    const poems = poetryDatabase[currentKeyword];
    if (poems && poems.length > 0) {
        const randomPoem = poems[Math.floor(Math.random() * poems.length)];
        const originalContent = poetryDisplay.innerHTML;
        
        poetryDisplay.innerHTML = `
            <p>示例诗句：</p>
            <p>"${randomPoem}"</p>
            <p style="font-size: 1rem; margin-top: 10px;">8秒后自动消失...</p>
        `;
        
        setTimeout(() => {
            poetryDisplay.innerHTML = originalContent;
        }, 8000);
    } else {
        poetryDisplay.innerHTML = `
            <p>暂无提示诗句</p>
            <p>请尝试其他关键字</p>
        `;
    }
}

// 随机选择关键字
function selectRandomKeyword() {
    console.log('下一题按钮被点击');
    const randomIndex = Math.floor(Math.random() * keywords.length);
    currentKeyword = keywords[randomIndex];
    keywordElement.textContent = currentKeyword;
    keywordDisplay.textContent = currentKeyword;
    poetryDisplay.innerHTML = `<p>请说出包含"<span id="keyword-display">${currentKeyword}</span>"字的诗句</p>`;
    poetryInput.value = '';
    poetryInput.focus();
}

🌟 让技术经验流动起来

▌▍▎▏ 你的每个互动都在为技术社区蓄能 ▏▎▍▌
✅ 点赞 → 让优质经验被更多人看见
📥 收藏 → 构建你的专属知识库
🔄 转发 → 与技术伙伴共享避坑指南

点赞 ➕ 收藏 ➕ 转发，助力更多小伙伴一起成长！💪

💌 深度连接：
点击「头像」→「+关注」
每周解锁：
🔥 一线架构实录｜ 💡 故障排查手册｜ 🚀 效能提升秘籍

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

如何用 AI 快速开发一个中国风飞花令游戏？附完整代码

界面设计阶段

样式重置与整体布局

容器与装饰元素

功能实现阶段

数据准备

事件处理与逻辑判断

总结与思考

附：

index.html

style.css

script.js

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

如何用 AI 快速开发一个中国风飞花令游戏？附完整代码

界面设计阶段

样式重置与整体布局

容器与装饰元素

功能实现阶段

数据准备

事件处理与逻辑判断

总结与思考

附：

index.html

style.css

script.js

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品