免費(fèi)AI編程助手
讓模型生成一段完成特定功能的代碼。
提示詞
| USER | 請(qǐng)幫我用 HTML 生成一個(gè)五子棋游戲，所有代碼都保存在一個(gè) HTML 中。
|
樣例輸出
當(dāng)然！下面是一個(gè)簡(jiǎn)單的五子棋游戲的 HTML 代碼。這個(gè)代碼包含了一個(gè)基本的五子棋棋盤，玩家可以通過(guò)點(diǎn)擊棋盤上的格子來(lái)下棋。游戲會(huì)檢測(cè)是否有玩家獲勝。
```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 }, // 主對(duì)角線
{ dr: 1, dc: -1 } // 副對(duì)角線
];
for (const { dr, dc } of directions) {
let count = 1;
// 檢查一個(gè)方向
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>
```
### 代碼說(shuō)明：
1. **HTML 結(jié)構(gòu)**：
- `#board` 是棋盤的容器，使用 `grid` 布局來(lái)創(chuàng)建 15x15 的格子。
- `.cell` 是每個(gè)格子的樣式，點(diǎn)擊時(shí)會(huì)觸發(fā) `handleCellClick` 事件。
- `#message` 用于顯示游戲結(jié)果。
2. **CSS 樣式**：
- 棋盤和格子的樣式，包括背景色、邊框、棋子的樣式等。
3. **JavaScript 邏輯**：
- `createBoard` 函數(shù)用于生成棋盤。
- `handleCellClick` 函數(shù)處理格子的點(diǎn)擊事件，更新棋盤狀態(tài)并檢查是否獲勝。
- `checkWin` 函數(shù)檢查當(dāng)前玩家是否在點(diǎn)擊的位置上連成五子。
### 如何使用：
1. 將上述代碼復(fù)制到一個(gè) `.html` 文件中。
2. 在瀏覽器中打開該文件，即可開始游戲。
這個(gè)代碼是一個(gè)簡(jiǎn)單的五子棋實(shí)現(xiàn)，你可以根據(jù)需要進(jìn)一步擴(kuò)展和優(yōu)化。代碼
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": "請(qǐng)幫我用 HTML 生成一個(gè)五子棋游戲，所有代碼都保存在一個(gè) HTML 中。"
}
]
)
print(completion.choices[0].message.content)?返回【DeepSeek 官方提示詞大全】查看更多。
