2017年,当时大学三本毕业前端工作一年,去深圳找工作面试,在拉勾上海投,接到腾讯前端开发团队回复询问邮箱账号,喜滋滋的以为可以有面试了。一看邮箱,抛给我一道面试题,写完发到对方邮箱。。
当年没有实现,现在有了AI编程助手,弥补这个遗憾吧~
AI编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力
安装vscode插件
「第一次生成五子棋代码」
点击重试生成的第二个版本,样式也会错位,棋子也是文字white、black。下面代码示例是第N个版本的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gomoku Game</title>
<style>
#game-board {
display: grid;
grid-template-columns: repeat(15, 30px);
grid-gap: 1px;
width: 450px;
height: 450px;
background-color: #f0d9b5;
}
.cell {
width: 30px;
height: 30px;
background-color: #b58863;
display: flex;
align-items: center;
justify-content: center;
}
.cell:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="game-board"></div>
<button id="undo">悔棋</button>
<button id="redo">撤销悔棋</button>
<script>
const boardSize = 15;
let currentPlayer = "black";
let gameBoard = Array.from({ length: boardSize }, () =>
Array(boardSize).fill(null)
);
let history = [];
let redoStack = [];
function renderBoard() {
const gameBoardElement = document.getElementById("game-board");
gameBoardElement.innerHTML = "";
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", () => placeStone(i, j));
if (gameBoard[i][j]) {
cell.textContent = gameBoard[i][j];
}
gameBoardElement.appendChild(cell);
}
}
}
function placeStone(row, col) {
if (gameBoard[row][col]) return;
gameBoard[row][col] = currentPlayer;
history.push({ row, col, player: currentPlayer });
redoStack = [];
renderBoard();
checkWin(row, col);
currentPlayer = currentPlayer === "black" ? "white" : "black";
}
function checkWin(row, col) {
const directions = [
{ dr: 0, dc: 1 }, // Horizontal
{ dr: 1, dc: 0 }, // Vertical
{ dr: 1, dc: 1 }, // Diagonal /
{ dr: 1, dc: -1 }, // Diagonal \
];
for (const { dr, dc } of directions) {
let count = 1;
count += countStones(row, col, dr, dc);
count += countStones(row, col, -dr, -dc);
if (count >= 5) {
alert(`${currentPlayer} wins!`);
disableBoard();
return;
}
}
}
function countStones(row, col, dr, dc) {
let count = 0;
const player = gameBoard[row][col];
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 ||
gameBoard[r][c] !== player
)
break;
count++;
}
return count;
}
function disableBoard() {
const cells = document.getElementsByClassName("cell");
for (let i = 0; i < cells.length; i++) {
cells[i].removeEventListener("click", placeStone);
}
}
document.getElementById("undo").addEventListener("click", undoMove);
document.getElementById("redo").addEventListener("click", redoMove);
function undoMove() {
if (history.length === 0) return;
const lastMove = history.pop();
redoStack.push(lastMove);
gameBoard[lastMove.row][lastMove.col] = null;
currentPlayer = lastMove.player;
renderBoard();
}
function redoMove() {
if (redoStack.length === 0) return;
const nextMove = redoStack.pop();
history.push(nextMove);
gameBoard[nextMove.row][nextMove.col] = nextMove.player;
currentPlayer = nextMove.player === "black" ? "white" : "black";
renderBoard();
}
renderBoard();
</script>
</body>
</html>
在这个JavaScript文件中,我们定义了几个函数来实现游戏逻辑:
renderBoard()
:用于渲染棋盘,根据gameBoard
数组的状态来创建或更新单元格。placeStone(row, col)
:用于在指定的单元格放置棋子,更新游戏状态,并检查是否有玩家获胜。checkWin(row, col)
:用于检查在指定的单元格落子后,是否有玩家获胜。countStones(row, col, dr, dc)
:用于计算在指定方向上连续的相同颜色棋子的数量。disableBoard()
:用于在游戏结束后禁用棋盘,防止玩家继续落子。showMessage(message)
:用于在页面上显示游戏消息。undoMove()
:用于悔棋,撤销上一步操作。redoMove()
:用于撤销悔棋,重做上一步操作。最后,我们在页面加载完成后调用renderBoard()
函数来初始化棋盘,并为悔棋和撤销悔棋按钮添加事件监听器。
到这里基本功能都完成了,使用以上逻辑玩了几把游戏后,发现还存在一些问题
我们继续问AI编程助手: 如何优化这两个问题
checkWin
函数中添加逻辑来禁用棋盘点击事件。这样,当有玩家获胜时,游戏将停止接受新的落子操作。placeStone
和checkWin
函数中使用isGameOver
变量来阻止进一步的操作。此外,我们还需要在disableBoard
函数中禁用棋盘的点击事件。这样,游戏将在一方胜利后停止接受新的落子操作。这段时间一直在使用AI编程助手的代码补全,最近几天才用AI编程助手生成一些功能代码,看着生成的代码,可以不断学习完善,还是挺惊艳的。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。