当前位置: 首页 > article >正文

Datawhale-AI冬令营二期

目录

  • 一、番茄时钟
    • (1)输入Prompt
    • (2)创建 HTML 文件
      • 解析1:HTML结构
      • 解析2:计时器内容
      • 解析3:按钮区域
      • 解析4:脚本引用
    • (3)使用JavaScript实现时钟功能
      • 解析1:变量声明
      • 解析2:updateTimer 函数
      • 解析3:startTimer 函数
      • 解析4:pauseTimer 函数——暂停计时器
      • 解析5:resetTimer 函数——重置计时器
      • 解析6:事件监听
      • 解析7:初始调用
  • 二、井字棋
    • (1)输入Prompt
    • (2)创建HTML文件
      • 解析1:HTML结构
      • 解析2:游戏标题和棋盘
      • 解析3:游戏结果和重置按钮
      • 解析4:脚本引用
    • (2)使用JavaScript实现游戏功能
      • 解析1:初始化棋盘和当前玩家
      • 解析2:获取所有棋盘单元格
      • 解析3:为每个单元格添加点击事件监听器
      • 解析4: 获取游戏结果显示元素和重置按钮
      • 解析5:为重置按钮添加点击事件监听器
      • 解析6:玩家下棋
      • 解析7:电脑下棋
      • 解析8:检查是否获胜
      • 解析9:检查是否平局
      • 解析10:重置棋盘

说明:这是在MarsCode平台经过调试的版本,最初按照Prompt并没有直接实现。

一、番茄时钟

在这里插入图片描述

(1)输入Prompt

请你基于html、tailwind css和javascript,帮我设计一个“番茄时钟”。要求UI简洁美观大方,同时具有呼吸感,点击开始计时、点击暂停计时和重置计时的功能能够完美实现

(2)创建 HTML 文件

这个HTML页面是一个简单的番茄时钟界面,包含:
一个标题:番茄钟。
一个显示计时器倒计时的区域(id=“timer”)。
三个按钮:开始、暂停和重置。
通过TailwindCSS进行布局和样式的设计,并使用外部JavaScript文件(script.js)来处理逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄时钟</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <div class="bg-white p-8 roundedshadow-md w-96">
        <h1 class="text-6xl font-bold text-gray-800">番茄钟</h1>
    
    <div class="flex flex-col mt-4">
        <div id="timer" class="text-6xl font-bold text-gray-800"></div>
    </div>
    <div class="flex mt-4">
        <button id="start" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded mr-2">开始</button>
        <button id="pause" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded mr-2">暂停</button>
        <button id="reset" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">重置</button>
    </div>
    <script src="script.js"></script>
  </div>
</body>
</html>

解析1:HTML结构

<!DOCTYPE html>定义了文档类型,表示这是一个HTML5文档。
<html lang="en"> 指定文档语言为英语,方便搜索引擎和浏览器理解。
<head>
    <meta charset="UTF-8">定义文档字符集为UTF-8,确保支持中文和其他字符集。
    <meta name="viewport" content="width=device-width, initial-scale=1.0">设置视口的宽度与设备屏幕宽度一致,使网页在移动设备上自适应显示。
    <title>番茄时钟</title>定义页面的标题栏显示文本。
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">引入了TailwindCSS框架,它是一个功能强大的CSS框架,简化了HTML中的样式编写。
    <script src="https://cdn.tailwindcss.com"></script>引入TailwindCSS的JavaScript支持库。
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
bg-gray-100:设置背景颜色为浅灰色(TailwindCSS类)。
flex:使用Flexbox布局,使子元素在页面中居中对齐。
items-center:垂直居中子元素。
justify-center:水平居中子元素。
h-screen:设置页面高度为100vh(视口高度),即使页面充满屏幕。

解析2:计时器内容

<div class="bg-white p-8 roundedshadow-md w-96">
	bg-white:设置背景为白色。
	p-8:设置内边距为2rem,使内部内容距离边缘有一定的间距。
	rounded shadow-md:为该元素添加圆角和阴影,使其看起来更美观
	w-96:设置宽度为24rem(96的单位是rem,TailwindCSS默认配置中的24rem)。
    <h1 class="text-6xl font-bold text-gray-800">番茄钟</h1>
    bg-white:设置背景为白色。
	p-8:设置内边距为2rem,使内部内容距离边缘有一定的间距。
	rounded shadow-md:为该元素添加圆角和阴影,使其看起来更美观
	w-96:设置宽度为24rem(96的单位是rem,TailwindCSS默认配置中的24rem)。
    <div class="flex flex-col mt-4">
    flex flex-col:使用Flexbox布局,将子元素垂直排列。
	mt-4:设置顶部外边距为1rem,让计时器与标题之间有一定间距。
        <div id="timer" class="text-6xl font-bold text-gray-800"></div>
        text-6xl:设置字体大小为6xl(约为4rem),使计时器的数字更大。
		font-bold:加粗文本。
		text-gray-800:设置文本颜色为深灰色。
    </div>

解析3:按钮区域

<div class="flex mt-4">
flex mt-4:使用Flexbox布局,并设置顶部外边距为1rem,使按钮区域与计时器区域之间有间隔。
	<button id="start" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded mr-2">开始</button>
	<button id="pause" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded mr-2">暂停</button>
	<button id="reset" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">重置</button>
	每个按钮 (<button>) 的样式:
	bg-green-500、bg-yellow-500、bg-red-500:分别设置按钮的背景色为绿色、黄色、红色。
	hover:bg-green-600、hover:bg-yellow-600、hover:bg-red-600:设置当鼠标悬停时按钮背景色变为深绿色、深黄色、深红色。
	text-white:设置按钮文字为白色。
	font-bold:加粗按钮文字。
	py-2 px-4:设置按钮的内边距,py-2表示上下内边距为0.5rem,px-4表示左右内边距为1rem。
	rounded:为按钮添加圆角效果。
	mr-2:为每个按钮添加右边距,使它们之间有间隔。
</div>

解析4:脚本引用

<script src="script.js"></script>
script.js:外部JavaScript文件,负责处理番茄时钟的逻辑,包括开始、暂停、重置等功能。你需要实现该文件中的JavaScript代码来控制计时器和按钮的交互。

(3)使用JavaScript实现时钟功能

该代码实现了一个简单的番茄钟功能,可以启动、暂停和重置计时器。
计时器每秒更新一次,并在计时结束时弹出提示框。
通过按钮交互,用户可以控制计时器的开始、暂停和重置。

let timer;
let isRunning = false;
let timeLeft = 1500; // 25 minutes in seconds

function updateTimer() {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    document.getElementById('timer').textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}

function startTimer() {
    if (!isRunning) {
        isRunning = true;
        timer = setInterval(() => {
            if (timeLeft > 0) {
                timeLeft--;
                updateTimer();
            } else {
                clearInterval(timer);
                isRunning = false;
                alert('时间到!');
            }
        }, 1000);
    }
}

function pauseTimer() {
    if (isRunning) {
        clearInterval(timer);
        isRunning = false;
    }
}

function resetTimer() {
    clearInterval(timer);
    isRunning = false;
    timeLeft = 1500;
    updateTimer();
}

document.getElementById('start').addEventListener('click', startTimer);
document.getElementById('pause').addEventListener('click', pauseTimer);
document.getElementById('reset').addEventListener('click', resetTimer);

updateTimer();

解析1:变量声明

let timer;//用于存储定时器的ID,便于在暂停或重置时清除定时器。
let isRunning = false;//布尔值,标志计时器是否正在运行。如果计时器正在运行,则为 true,否则为 false。
let timeLeft = 1500; // 25 minutes in seconds
//表示剩余时间,单位是秒。初始值为 1500 秒,即 25 分钟。

解析2:updateTimer 函数

function updateTimer() {//每次更新时间时调用。该函数将 timeLeft 转换为分钟和秒数,并将其格式化成 mm:ss 的形式。
    const minutes = Math.floor(timeLeft / 60);//计算剩余时间的分钟部分。
    const seconds = timeLeft % 60;//计算剩余时间的秒数。
    document.getElementById('timer').textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;//将格式化后的时间显示在页面上,<div> 或 <span> 元素的内容更新为分钟和秒数的格式。如果秒数小于 10,则在秒数前面加上零。
}

解析3:startTimer 函数

function startTimer() {//启动计时器的功能
    if (!isRunning) {//它首先检查计时器是否已经在运行,如果没有,则:
        isRunning = true;//将计时器状态设置为正在运行。
        timer = setInterval(() => {//使用 setInterval 每秒执行一次回调函数。
            if (timeLeft > 0) {//如果剩余时间 timeLeft > 0,则每秒减少 1 秒并更新显示的时间。
                timeLeft--;
                updateTimer();
            } else {//如果剩余时间 timeLeft = 0,则停止计时器 (clearInterval(timer)),将 isRunning 设置为 false,并弹出一个提示框提示 "时间到!"
                clearInterval(timer);
                isRunning = false;
                alert('时间到!');
            }
        }, 1000);
    }
}

解析4:pauseTimer 函数——暂停计时器

function pauseTimer() {
    if (isRunning) {//如果计时器正在运行(isRunning 为 true),则清除定时器(clearInterval(timer))并将 isRunning 设置为 false,表示计时器已经停止。
        clearInterval(timer);
        isRunning = false;
    }
}

解析5:resetTimer 函数——重置计时器

function resetTimer() {
    clearInterval(timer);//无论计时器是否正在运行,都会停止定时器(clearInterval(timer)),将 isRunning 设置为 false,将 timeLeft 重置为 1500 秒(25 分钟),并更新显示的时间。

    isRunning = false;
    timeLeft = 1500;
    updateTimer();
}

解析6:事件监听

document.getElementById('start').addEventListener('click', startTimer);
document.getElementById('pause').addEventListener('click', pauseTimer);
document.getElementById('reset').addEventListener('click', resetTimer);
//为三个按钮添加事件监听器:
//点击 开始 按钮时调用 startTimer 函数启动计时器。
//点击 暂停 按钮时调用 pauseTimer 函数暂停计时器。
//点击 重置 按钮时调用 resetTimer 函数重置计时器。

解析7:初始调用

updateTimer();
//在页面加载时,调用 updateTimer 函数,初始化显示的时间(25 分钟)。

二、井字棋

在这里插入图片描述

(1)输入Prompt

Prompt:请你基于html、tailwind css和javascript,帮我设计一个“井字棋游戏”。要求UI简洁美观大方,同时具有呼吸感,人类玩家以及电脑玩家放置棋子,游戏胜负平局判定条件能够完美实现

(2)创建HTML文件

这段 HTML 代码创建了一个简单的 Tic Tac Toe(井字棋)游戏的前端界面,使用了 TailwindCSS来实现响应式和美观的布局。它包含了游戏标题、3x3 的棋盘和一个用于重置游戏的按钮。最终的游戏逻辑(如玩家的轮流、胜利条件判断、重置功能等)会通过用外部 JavaScript(script.js) 文件来处理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex flex-col items-center justify-center h-screen">
    <h1 class="text-3xl font-bold mb-4">Tic Tac Toe</h1>
    <div id="game-board" class="grid grid-cols-3 gap-4 w-full max-w-xs">
        <!-- 棋盘单元格 -->
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
    </div>
    <div class="mt-4 flex flex-col items-center">
        <p id="game-result" class="text-xl font-bold"></p>
        <button id="reset-button" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Reset</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

解析1:HTML结构

<!DOCTYPE html>声明了文档类型为 HTML5,告诉浏览器该文件遵循 HTML5 标准解析。
<html lang="en">开始 HTML 文档,并设置 lang="en" 属性,表示文档内容是英文(这有助于搜索引擎优化和屏幕阅读器)。
<head>
    <meta charset="UTF-8">设置字符编码为 UTF-8,支持多种语言字符,避免乱码。
    <meta name="viewport" content="width=device-width, initial-scale=1.0">响应式设计的关键。它让页面在移动设备上能够自适应屏幕宽度,initial-scale=1.0 表示初始缩放比例为 1。
    <title>Tic Tac Toe</title>设置网页的标题,这个标题会显示在浏览器的标签栏中。
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">引入 TailwindCSS 样式表,这是一个流行的工具类 CSS 框架,提供许多实用的类来快速设计网页。
    <script src="https://cdn.tailwindcss.com"></script>引入 TailwindCSS 的 JavaScript 文件,允许使用 TailwindCSS的一些动态功能(例如,CSS配置和优化)。
</head>结束 <head> 部分。<head> 部分通常用于包含页面元数据(如字符集、视口设置、样式表等)。
<body class="bg-gray-100 flex flex-col items-center justify-center h-screen">
bg-gray-100: 背景颜色设置为浅灰色。
flex: 使用 Flexbox 布局。
flex-col: 设置Flexbox方向为纵向排列。
items-center: 垂直居中对齐所有子元素。
justify-center: 水平居中对齐所有子元素。
h-screen: 让页面高度占满整个视口。

解析2:游戏标题和棋盘

    <h1 class="text-3xl font-bold mb-4">Tic Tac Toe</h1>显示游戏的标题 "Tic Tac Toe"。
    <div id="game-board" class="grid grid-cols-3 gap-4 w-full max-w-xs">创建一个 3x3 的网格布局作为棋盘:
    grid: 使用 CSS 网格布局。
	grid-cols-3: 定义棋盘为 3 列。
	gap-4: 设置网格单元格之间的间隔为 4 个单位。
	w-full max-w-xs: 设置棋盘的宽度为全屏,并且最大宽度为 xs(适应小屏幕设备)。
        <!-- 棋盘单元格 -->
        每个棋盘单元格由一个 <button> 元素表示,使用了以下的类:
		w-20 h-20: 设置按钮的宽度和高度为 20 个单位。
		bg-white: 设置按钮背景为白色。
		text-5xl: 设置按钮内文本的大小为 5x大。
		font-bold: 设置文本加粗。
		border-2 border-gray-300: 设置按钮的边框为 2px 宽,颜色为浅灰色。
		focus:outline-none: 去除按钮获得焦点时的默认样式。
		这些按钮代表棋盘中的每个格子,这行代码重复了 9 次,表示棋盘上的 9 个格子。点击后将用于放置玩家的 X 或 O。
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
        <button class="w-20 h-20 bg-white text-5xl font-bold border-2 border-gray-300 focus:outline-none"></button>
    </div>结束 div 元素,关闭棋盘容器。
    <div class="mt-4 flex flex-col items-center">创建一个新的 div 元素,用来放置游戏结果和重置按钮。
    mt-4: 设置上方外边距为 4 个单位,确保内容之间有空隙。
	flex: 使用 Flexbox 布局。
	flex-col: 设置子元素纵向排列。
	items-center: 在横向上居中对齐子元素。

解析3:游戏结果和重置按钮

		<p id="game-result" class="text-xl font-bold"></p>显示游戏的结果(例如 "Player X wins!" 或 "It's a draw!")。
		text-xl: 设置文本大小为 xl。
		font-bold: 设置文本为加粗。
        <button id="reset-button" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded">Reset</button>创建一个重置按钮,用于重新开始游戏:
        mt-4: 设置按钮上方的外边距为 4 个单位。
		bg-blue-500 text-white: 设置按钮背景色为蓝色,文字颜色为白色。
		px-4 py-2: 设置按钮的内边距(水平 4,垂直 2)。
		rounded: 设置按钮的边角为圆角。
	</div>结束外部 div 元素,关闭结果和重置按钮的容器。

解析4:脚本引用

	<script src="script.js"></script>引入外部的 script.js 文件。这个文件将包含实现 Tic Tac Toe 游戏逻辑的 JavaScript 代码(该文件负责处理游戏逻辑(如玩家的轮流、胜利判断、重置功能等)
</body>结束 body 部分。
</html>结束整个 HTML 文档。
总结

(2)使用JavaScript实现游戏功能

这段代码实现了一个完整的井字棋游戏,支持玩家与电脑交替下棋,判断胜负或平局,并且可以重置游戏。电脑的下棋方式是随机选择空白单元格进行下棋。

// 初始化棋盘和当前玩家
let board = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'X';

// 获取所有棋盘单元格
const cells = document.querySelectorAll('#game-board button');

// 为每个单元格添加点击事件监听器
cells.forEach((cell, index) => {
    cell.addEventListener('click', () => makeMove(index));
});

// 获取游戏结果显示元素和重置按钮
const gameResult = document.getElementById('game-result');
const resetButton = document.getElementById('reset-button');

// 为重置按钮添加点击事件监听器
resetButton.addEventListener('click', resetBoard);

// 玩家下棋
function makeMove(index) {
    if (board[index] === '') {
        board[index] = currentPlayer;
        cells[index].textContent = currentPlayer;
        if (checkWin(currentPlayer)) {
            gameResult.textContent = 'Player ' + currentPlayer + ' wins!';
            gameResult.style.fontSize = '18px'; // 调小字体
            resetButton.disabled = false;
        } else if (checkDraw()) {
            gameResult.textContent = 'It\'s a draw!';
            gameResult.style.fontSize = '18px'; // 调小字体
            resetButton.disabled = false;
        } else {
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            if (currentPlayer === 'O') {
                setTimeout(makeComputerMove, 500);
            }
        }
    }
}

// 电脑下棋
function makeComputerMove() {
    const emptyCells = board.reduce((acc, cell, index) => {
        if (cell === '') acc.push(index);
        return acc;
    }, []);

    if (emptyCells.length > 0) {
        const randomIndex = Math.floor(Math.random() * emptyCells.length);
        const index = emptyCells[randomIndex];
        makeMove(index);
    }
}

// 检查是否获胜
function checkWin(player) {
    const winPatterns = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8], // 行
        [0, 3, 6], [1, 4, 7], [2, 5, 8], // 列
        [0, 4, 8], [2, 4, 6] // 对角线
    ];

    return winPatterns.some(pattern => {
        return pattern.every(index => board[index] === player);
    });
}

// 检查是否平局
function checkDraw() {
    return board.every(cell => cell !== '');
}

// 重置棋盘
function resetBoard() {
    board = ['', '', '', '', '', '', '', '', ''];
    cells.forEach(cell => cell.textContent = '');
    currentPlayer = 'X';
    gameResult.textContent = '';
    resetButton.disabled = true;
}

解析1:初始化棋盘和当前玩家

let board = ['', '', '', '', '', '', '', '', ''];//board 数组表示棋盘,包含 9 个元素(每个元素代表一个棋盘单元格),初始时每个单元格为空字符串(即 ' ')。
let currentPlayer = 'X';//用来记录当前玩家,初始为 'X'(玩家一)。

解析2:获取所有棋盘单元格

const cells = document.querySelectorAll('#game-board button');通过 document.querySelectorAll 获取所有按钮元素(代表棋盘的单元格)。这些按钮放在一个 ID 为 game-board 的容器内。

解析3:为每个单元格添加点击事件监听器

cells.forEach((cell, index) => {
    cell.addEventListener('click', () => makeMove(index));
    遍历每个单元格,为每个按钮添加一个点击事件监听器,点击时会调用 makeMove(index) 函数,其中 index 是单元格的索引。
});

解析4: 获取游戏结果显示元素和重置按钮

//获取显示游戏结果的元素(ID 为 game-result)和重置按钮元素(ID 为 reset-button)。
const gameResult = document.getElementById('game-result');
const resetButton = document.getElementById('reset-button');

解析5:为重置按钮添加点击事件监听器

//为重置按钮添加点击事件,当点击时调用 resetBoard() 函数,重新开始一局游戏。
resetButton.addEventListener('click', resetBoard);

解析6:玩家下棋

//用来处理玩家的每一步。玩家点击空白单元格时,当前玩家的标记('X' 或 'O')会被放入对应的 board 索引位置,同时更新显示。
function makeMove(index) {
    if (board[index] === '') {
        board[index] = currentPlayer;
        cells[index].textContent = currentPlayer;
        if (checkWin(currentPlayer)) {//检查当前玩家是否获胜,若获胜则显示相应信息,并启用重置按钮。
            gameResult.textContent = 'Player ' + currentPlayer + ' wins!';
            gameResult.style.fontSize = '18px'; // 调小字体
            resetButton.disabled = false;
        } else if (checkDraw()) {//检查是否平局,若是则显示平局信息。
            gameResult.textContent = 'It\'s a draw!';
            gameResult.style.fontSize = '18px'; // 调小字体
            resetButton.disabled = false;
        } else {//若没有获胜且没有平局,切换玩家
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            if (currentPlayer === 'O') {//若是电脑的回合,则通过 setTimeout 调用 makeComputerMove() 模拟电脑下棋,延迟 500 毫秒。
                setTimeout(makeComputerMove, 500);
            }
        }
    }
}

解析7:电脑下棋

//用来模拟电脑下棋。首先通过 reduce 方法找到所有空白单元格的索引,存储在 emptyCells 数组中。
function makeComputerMove() {
    const emptyCells = board.reduce((acc, cell, index) => {
        if (cell === '') acc.push(index);
        return acc;
    }, []);

    if (emptyCells.length > 0) {//随机选择一个空白单元格,调用 makeMove(index) 让电脑下棋。
        const randomIndex = Math.floor(Math.random() * emptyCells.length);
        const index = emptyCells[randomIndex];
        makeMove(index);
    }
}

解析8:检查是否获胜

//检查给定玩家是否获胜。它定义了所有可能的获胜组合(行、列、对角线),通过 some 和 every 方法判断是否存在一个获胜组合。
function checkWin(player) {
    const winPatterns = [
        [0, 1, 2], [3, 4, 5], [6, 7, 8], // 行
        [0, 3, 6], [1, 4, 7], [2, 5, 8], // 列
        [0, 4, 8], [2, 4, 6] // 对角线
    ];

    return winPatterns.some(pattern => {
        return pattern.every(index => board[index] === player);
    });
}

解析9:检查是否平局

//检查是否所有单元格都已填满,且没有获胜者,从而确定是否平局。
function checkDraw() {
    return board.every(cell => cell !== '');
}

解析10:重置棋盘

//用于重置棋盘。将 board 数组清空,并将所有按钮文本清空,同时将当前玩家设置回 'X',清除游戏结果,并禁用重置按钮。
function resetBoard() {
    board = ['', '', '', '', '', '', '', '', ''];
    cells.forEach(cell => cell.textContent = '');
    currentPlayer = 'X';
    gameResult.textContent = '';
    resetButton.disabled = true;
}

http://www.kler.cn/a/456458.html

相关文章:

  • day-102 二叉树中的链表
  • 《童年-高尔基》阅读笔记
  • Oracle数据库中用View的好处
  • 逻辑思维浅谈
  • hive中的四种排序类型
  • Vue3 使用OCR识别图片文字
  • leetcode hot 100 单词搜索
  • 【Axure高保真原型】输入框控制标签
  • 探索Spring Cloud Config:构建高可用的配置中心
  • 5.npm包
  • 如何配置线程池参数,才能创建性能最好、最稳定的Spring异步线程池?
  • StarRocks元数据无法合并
  • 力扣-数据结构-5【算法学习day.76】
  • Spring 框架基础知识
  • 【设计模式学习笔记】1. 设计模式概述
  • 系统设计及解决方案
  • EndtoEnd Object Detection with Transformers
  • BOOST 库在缺陷检测领域的应用与发展前景
  • 1、redis的基础知识和类型
  • Docker部署neo4j
  • JDBC(Tomcat)
  • 深入探索哈夫曼编码与二叉树的遍历
  • 三、STM32MP257系列之定制Yocto Machine
  • 《PHP MySQL 插入数据》
  • Pytorch | 利用VA-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击
  • SD ComfyUI工作流 对人物图像进行抠图并替换背景