让模型生成一段完成特定功能的代码。
下面是一个基于 `#{game_name}` 的简单示例 HTML 模板。你可以直接将以下代码保存到一个 `.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>#{game_name}</title>
<style>
/* 样式部分 */
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
h1 {
color: #333;
margin-top: 50px;
}
#game {
margin: 20px auto;
padding: 20px;
width: 300px;
background: #ffffff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
button {
padding: 10px 20px;
margin: 5px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #3498db;
color: #fff;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
#message {
margin-top: 20px;
font-size: 18px;
color: #2c3e50;
}
</style>
</head>
<body>
<h1>欢迎来到 #{game_name}</h1>
<div id="game">
<h2>简单交互游戏</h2>
<p>点击按钮以体验游戏机制！</p>
<button onclick="playGame()">点击我</button>
<div id="message"></div>
</div>
<script>
// 游戏逻辑部分
function playGame() {
const messages = [
"你获得了 10 点积分！🎉",
"好运来了！你获得了一个奖励！💎",
"真遗憾，这次没有奖励。😢",
"再接再厉！💪",
"恭喜你，幸运之星！⭐"
];
const randomIndex = Math.floor(Math.random() * messages.length);
const message = messages[randomIndex];
document.getElementById('message').innerText = message;
}
</script>
</body>
</html>
```
### 使用方法：
1. 替换 `#{game_name}` 为你想要的游戏名称，比如 "点击游戏"。
2. 将上面的代码保存为一个文件，例如 `game.html`。
3. 打开文件，双击运行，浏览器将会显示一个简单的网页游戏。
这个示例是一个简单的点击机制游戏，也可以根据你的需要进行扩展！
借助提示词快速生成页面代码样例，用于项目界面设计与开发验证。
通过生成直观的代码示例来加深学习理解，减少入门编程的障碍。
为技术沟通准备视觉化方案，无需过多代码基础也能表达产品逻辑与设计。
通过自动生成代码实例，用于课堂演示与教学实践，提升教学效率。
无需精通开发，仅通过简单配置即可生成属于自己的作品原型，验证设计创意。
帮助用户快速生成完成特定功能的代码，通过简洁直观的指导，让用户无需具备专业编程知识，即可获取符合业务需求的代码实现，提升工作效率和创意落地能力。
将模板生成的提示词复制粘贴到您常用的 Chat 应用（如 ChatGPT、Claude 等），即可直接对话使用，无需额外开发。适合个人快速体验和轻量使用场景。
把提示词模板转化为 API，您的程序可任意修改模板参数，通过接口直接调用，轻松实现自动化与批量处理。适合开发者集成与业务系统嵌入。
在 MCP client 中配置对应的 server 地址，让您的 AI 应用自动调用提示词模板。适合高级用户和团队协作，让提示词在不同 AI 工具间无缝衔接。
免费获取高级提示词-优惠即将到期
