让AI写猜数字游戏:看看ChatGPT有多聪明

ChatGPT1年前 (2023)发布 一起用AI
591 0 0

小时候总和同学一起玩文曲星上的猜数字游戏,突然想ChatGPT能不能写一个网页版的猜数字呢?以下是和ChatGPT的对话过程:

让AI写猜数字游戏:看看ChatGPT有多聪明

把生成的代码复制到文本文件并命名为index.html,打开以后是下面的样子

输入一个数字猜一下:

看起来还不错,但是好像每次只能显示当前猜的结果,试试让ChatGPT加上之前猜过的历史记录看看:

让AI写猜数字游戏:看看ChatGPT有多聪明

在复制到之前index.html文件中看下,这次有点游戏的样子啦! 只是不知道为什么变成了英文。

让AI写猜数字游戏:看看ChatGPT有多聪明

试下让改成中文看看:

竟然把代码中的变量和方法名也改成中文了。。。好吧,我们继续:

让AI写猜数字游戏:看看ChatGPT有多聪明

再次运行,大功告成!

让AI写猜数字游戏:看看ChatGPT有多聪明

以下是ChatGPT生成的最终代码:

<!DOCTYPE html>
<html>
<head>
<title>猜数字游戏</title>
<meta charset=“utf-8”>
<script>
let answer, records;

const generateNumber = () => Array.from({length: 10}, (_, i) => i)
.sort(() => Math.random() 0.5)
.slice(0, 4)
.join();

const checkGuess = (guess, answer) => {
let a = 0, b = 0;
for (let i = 0; i < 4; i++) {
if (guess[i] == answer[i]) a++;
else if (answer.includes(guess[i])) b++;
}
return `${a}A${b}B`;
}

const renderRecords = () => {
let list = “<h2>猜测记录:</h2>”;
for (let {guess, result} of records) {
list += `<p>${guess}: ${result}</p>`;
}
document.getElementById(“records”).innerHTML = list;
}

const newGame = () => {
answer = generateNumber();
records = [];
renderRecords();
document.getElementById(“result”).textContent = “”;
console.log(answer); // 调试用的,发布前要删除此行
}

const submitGuess = (event) => {
event.preventDefault();
const guess = event.target.elements.guess.value;
if (!/^\d{4}$/.test(guess)) {
alert(“请输入一个四位数。”);
} else {
const result = checkGuess(guess, answer);
records.push({guess, result});
renderRecords();
document.getElementById(“result”).textContent = result;
}
}
</script>
</head>
<body>
<h1>猜数字游戏</h1>
<p>在下面的表单中输入一个四位数,数字不重复,然后点击“猜测”按钮。</p>
<p>如果您猜测的数字的某个位置和数字本身都正确,则显示A,如果只是数字本身正确但位置错误则显示B。</p>
<p>您可以点击“新游戏”按钮开始新游戏。</p>
<button onclick=“newGame()”>新游戏</button>
<div id=“records”></div>
<form onsubmit=“submitGuess(event)”>
<label for=“guess”>猜测:</label>
<input type=“text” id=“guess” name=“guess” pattern=“\d{4}”>
<input type=“submit” value=“猜测”>
</form>
<div id=“result”></div>
</body>
</html>

© 版权声明

相关文章