小时候总和同学一起玩文曲星上的猜数字游戏，突然想ChatGPT能不能写一个网页版的猜数字呢？以下是和ChatGPT的对话过程:
把生成的代码复制到文本文件并命名为index.html，打开以后是下面的样子
输入一个数字猜一下:
看起来还不错，但是好像每次只能显示当前猜的结果，试试让ChatGPT加上之前猜过的历史记录看看：
在复制到之前index.html文件中看下，这次有点游戏的样子啦! 只是不知道为什么变成了英文。
试下让改成中文看看：
竟然把代码中的变量和方法名也改成中文了。。。好吧，我们继续：
再次运行，大功告成!
以下是ChatGPT生成的最终代码：
<!DOCTYPE html>
<html>
<head>
<title>猜数字游戏</title>
<meta charset=“utf-8”>
<script>
let answer, records;
constgenerateNumber=()=>Array.from({length:10},(_,i)=>i)
.sort(() => Math.random() – 0.5)
.slice(0, 4)
.join();
constcheckGuess=(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`;
}
constrenderRecords=()=>{
let list = “<h2>猜测记录:</h2>”;
for (let {guess, result} of records) {
list += `<p>${guess}: ${result}</p>`;
}
document.getElementById(“records”).innerHTML = list;
}
constnewGame=()=>{
answer = generateNumber();
records = [];
renderRecords();
document.getElementById(“result”).textContent = “”;
console.log(answer); // 调试用的，发布前要删除此行
}
constsubmitGuess=(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>声明：学AI网所有文章，如无特殊说明或标注，均为本站作者原创发布。任何个人或组织，在未征得作者同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若此作者内容侵犯了原著者的合法权益，可联系客服或提交工单进行处理。学AI网内用户所发表的所有内容及言论仅代表其本人，并不反映任何学AI网之意见及观点。
