小狮博客让模型生成一段完成特定功能的代码。
提示词
| USER |
请帮我用 HTML 生成一个五子棋游戏，所有代码都保存在一个 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>五子棋游戏</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
#board {
display: grid;
grid-template-columns: repeat(15, 30px);
grid-template-rows: repeat(15, 30px);
gap: 1px;
background-color: #d18b47;
padding: 10px;
border-radius: 5px;
}
.cell {
width: 30px;
height: 30px;
background-color: #ffce9e;
border: 1px solid #d18b47;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.cell.black::before, .cell.white::before {
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
}
.cell.black::before {
background-color: black;
}
.cell.white::before {
background-color: white;
}
#message {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="board"></div>
<div id="message"></div>
<script> const boardSize = 15; let currentPlayer = 'black'; let board = Array.from({ length: boardSize }, () => Array(boardSize).fill(null)); function createBoard() { const boardElement = document.getElementById('board'); for (let i = 0; i < boardSize; i++) { for (let j = 0; j < boardSize; j++) { const cell = document.createElement('div'); cell.classList.add('cell'); cell.dataset.row = i; cell.dataset.col = j; cell.addEventListener('click', handleCellClick); boardElement.appendChild(cell); } } } function handleCellClick(event) { const row = parseInt(event.target.dataset.row); const col = parseInt(event.target.dataset.col); if (board[row][col] !== null) return; board[row][col] = currentPlayer; event.target.classList.add(currentPlayer); if (checkWin(row, col, currentPlayer)) { document.getElementById('message').textContent = `${currentPlayer === 'black' ? '黑棋' : '白棋'}获胜！`; document.querySelectorAll('.cell').forEach(cell => cell.removeEventListener('click', handleCellClick)); return; } currentPlayer = currentPlayer === 'black' ? 'white' : 'black'; } function checkWin(row, col, player) { const directions = [ { dr: 0, dc: 1 }, // 水平 { dr: 1, dc: 0 }, // 垂直 { dr: 1, dc: 1 }, // 主对角线 { dr: 1, dc: -1 } // 副对角线 ]; for (const { dr, dc } of directions) { let count = 1; // 检查一个方向 for (let i = 1; i < 5; i++) { const r = row + dr * i; const c = col + dc * i; if (r < 0 || r >= boardSize || c < 0 || c >= boardSize || board[r][c] !== player) break; count++; } // 检查相反方向 for (let i = 1; i < 5; i++) { const r = row - dr * i; const c = col - dc * i; if (r < 0 || r >= boardSize || c < 0 || c >= boardSize || board[r][c] !== player) break; count++; } if (count >= 5) return true; } return false; } createBoard(); </script>
</body>
</html>
```
### 代码说明：
1. **HTML 结构**：
- `#board` 是棋盘的容器，使用 `grid` 布局来创建 15x15 的格子。
- `.cell` 是每个格子的样式，点击时会触发 `handleCellClick` 事件。
- `#message` 用于显示游戏结果。
2. **CSS 样式**：
- 棋盘和格子的样式，包括背景色、边框、棋子的样式等。
3. **JavaScript 逻辑**：
- `createBoard` 函数用于生成棋盘。
- `handleCellClick` 函数处理格子的点击事件，更新棋盘状态并检查是否获胜。
- `checkWin` 函数检查当前玩家是否在点击的位置上连成五子。
### 如何使用：
1. 将上述代码复制到一个 `.html` 文件中。
2. 在浏览器中打开该文件，即可开始游戏。
这个代码是一个简单的五子棋实现，你可以根据需要进一步扩展和优化。代码
from openai import OpenAI
client = OpenAI(
base_url="https://api.deepseek.com/",
api_key="<YOUR_API_KEY>"
)
completion = client.chat.completions.create(
model="deepseek-chat",
messages=[
{
"role": "user",
"content": "请帮我用 HTML 生成一个五子棋游戏，所有代码都保存在一个 HTML 中。"
}
]
)
print(completion.choices[0].message.content)◀返回【DeepSeek 官方提示词大全】查看更多。