井字棋游戏（HTML+CSS+JavaScript）
🌏个人博客主页：心.c
前言：这两天在写植物大战僵尸，写不动了，现在和大家分享一下之前我写的一个很简单的小游戏井字棋，这个没有AI，可以两个人一起玩，如果大家觉得我哪里写的有一些问题，还希望积极改正，欢迎大家留言
🔥🔥🔥专题文章：JavaScript小游戏
😽感谢大家的点赞👍收藏⭐️评论✍您的一键三连是我更新的动力 💓
目录
页面效果：
相关技能实现：
创建空数组：
获得大盒子和小盒子对象：
给大盒子添加事件监听：
判断小格子是否被填满：
判断是否有一方成功：
判断数组中存在的数的个数：
更新页面：
源代码：
HTML
CSS
JavaScript：
页面效果：
关于应用就是不可重复添加，而且两次点击的表情是不一样的，每个表情代表一方，出现三连的那一方就赢了，每一个小方格是不可重复添加的，如果每个格子都填满了就平局，成功或平局都会出现alert提示，然后页面清空，清空之后可以继续玩
相关技能实现：
创建空数组：
空数组用来遍历（通过其值是1是2或是null）来放置我们的表情
const arr = Array(9).fill(null)获得大盒子和小盒子对象：
let box = this.document.querySelector('.box')let small_boxes = this.document.querySelectorAll('.small')给大盒子添加事件监听：
给我们的大盒子添加点击事件，冒泡到子级，通过1和2的个数，来添加1或2，谁少添加谁，优先添加1，如果1和2的个数有一个大于3，可能出现一方胜利的情况，就添加winner方法进行判断，如果有一方胜利，就返回这一方，然后页面进行清空，（通过返回的1还是2进行判断是谁胜利了）如果一直没有胜利，直到小方格都被填写完，算两方平局，页面就会被清空，就可以重新进行添加了
box.addEventListener('click', function (e) {if (e.target.tagName === 'DIV') {let id = +e.target.dataset.idif (getCount(arr, 1) <= getCount(arr, 2)) {if (arr[id - 1] === null) {arr[id - 1] = 1console.log(arr)render()} else {alert('请在空白处添加')}} else {if (arr[id - 1] === null) {arr[id - 1] = 2console.log(arr)render()} else {alert('请在空白处添加')}}//判断是否被填满if (allSet()) {let time0 = setTimeout(function () {alert('平局')arr.fill(null)small_boxes.forEach(function (small_box) {console.log(small_box)small_box.innerHTML = ''; // 清空每个文本框});clearTimeout(time0)}, 300)}//判断是否有一方赢if (getCount(arr, 1) >= 3 || getCount(arr, 2) >= 3) {let time = setTimeout(function () {let win = winner()if (win != -1) {if (win === 1) {alert('笑脸成功')} else if (win === 2) {alert('哭脸成功')}arr.fill(null)small_boxes.forEach(function (small_box) {console.log(small_box)small_box.innerHTML = ''; // 清空每个文本框});clearTimeout(time)}}, 400)}}})
判断小格子是否被填满：
遍历数组arr的每个值，如果该值有一个为null，就返回false，如果都不为false，最后返回true
function allSet() {for (let i of arr) {if (i == null) {return false}}return true}判断是否有一方成功：
这个游戏虽然是3×3方格，但是是用一维数组存储的，如果下面有一对（三个）下标的值相等，就返回其中一个下标的值
//判断是否成功function winner() {const winningCombinations = [[0, 1, 2], [3, 4, 5], [6, 7, 8],[0, 3, 6], [1, 4, 7], [2, 5, 8],[0, 4, 8], [2, 4, 6]];for (let combo of winningCombinations) {if (arr[combo[0]] && arr[combo[0]] === arr[combo[1]] && arr[combo[1]] === arr[combo[2]]) {return arr[combo[0]];}}return -1;}判断数组中存在的数的个数：
这个方法就是为了判断1和2的个数
//返回某个数存在的个数function getCount(arr, value) {return arr.filter(item => item === value).length;}更新页面：
遍历数组向每个小方格添加内容，如果为1，添加笑脸，如果为2，添加哭脸，如果为null，什么也不添加，数组和方格是一一对应的
function render() {small_boxes.forEach(function (small_box) {small_box.innerHTML = ''; // 清空每个文本框});for (let i = 0; i < 9; i++) {let smal = document.querySelector(`[data-id="${i + 1}"]`)if (arr[i] === 1) {smal.innerHTML = ''}else if (arr[i] === 2) {smal.innerHTML = ''} else {smal.innerHTML = ''}}}源代码：
HTML：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./game.css">
</head><body><div class="box wrapper"><div class="small iconfont" data-id="1"></div><div class="small iconfont" data-id="2"></div><div class="small iconfont" data-id="3"></div><div class="small iconfont" data-id="4"></div><div class="small iconfont" data-id="5"></div><div class="small iconfont" data-id="6"></div><div class="small iconfont" data-id="7"></div><div class="small iconfont" data-id="8"></div><div class="small iconfont" data-id="9"></div></div><div class="text"><h1>----井字棋----</h1></div><script src="./game.js"></script>
</body></html>CSS：
:root {--bgc: rgb(223, 225, 248);
}.wrapper {margin: auto;
}* {margin: 0;height: 0;box-sizing: border-box;
}.body {user-select: none;background-color: #f6faff;
}.box {user-select: none;margin-top: 20px;display: flex;flex-wrap: wrap;width: 570px;height: 570px;border: 12px solid var(--bgc);border-radius: 40px;background-color: #ffffff;
}.small {font-size: 120px;color: rgb(183, 190, 227);line-height: 182px;text-align: center;user-select: none;width: 182px;height: 182px;cursor: pointer;
}.small:nth-child(1),
.small:nth-child(2),
.small:nth-child(4),
.small:nth-child(5) {border-right: 12px solid var(--bgc);border-bottom: 12px solid var(--bgc);
}.small:nth-child(3),
.small:nth-child(6) {border-bottom: 12px solid var(--bgc);
}.small:nth-child(7),
.small:nth-child(8) {border-right: 12px solid var(--bgc);
}.text {text-align: center;color: var(--bgc);
}JavaScript：
window.addEventListener('load', function () {const arr = Array(9).fill(null)let box = this.document.querySelector('.box')let small_boxes = this.document.querySelectorAll('.small')box.addEventListener('click', function (e) {if (e.target.tagName === 'DIV') {let id = +e.target.dataset.idif (getCount(arr, 1) <= getCount(arr, 2)) {if (arr[id - 1] === null) {arr[id - 1] = 1console.log(arr)render()} else {alert('请在空白处添加')}} else {if (arr[id - 1] === null) {arr[id - 1] = 2console.log(arr)render()} else {alert('请在空白处添加')}}//判断是否被填满if (allSet()) {let time0 = setTimeout(function () {alert('平局')arr.fill(null)small_boxes.forEach(function (small_box) {console.log(small_box)small_box.innerHTML = ''; // 清空每个文本框});clearTimeout(time0)}, 300)}//判断是否有一方赢if (getCount(arr, 1) >= 3 || getCount(arr, 2) >= 3) {let time = setTimeout(function () {let win = winner()if (win != -1) {if (win === 1) {alert('笑脸成功')} else if (win === 2) {alert('哭脸成功')}arr.fill(null)small_boxes.forEach(function (small_box) {console.log(small_box)small_box.innerHTML = ''; // 清空每个文本框});clearTimeout(time)}}, 400)}}})function allSet() {for (let i of arr) {if (i == null) {return false}}return true}function render() {small_boxes.forEach(function (small_box) {small_box.innerHTML = ''; // 清空每个文本框});for (let i = 0; i < 9; i++) {let smal = document.querySelector(`[data-id="${i + 1}"]`)if (arr[i] === 1) {smal.innerHTML = ''}else if (arr[i] === 2) {smal.innerHTML = ''} else {smal.innerHTML = ''}}}//判断是否成功function winner() {const winningCombinations = [[0, 1, 2], [3, 4, 5], [6, 7, 8],[0, 3, 6], [1, 4, 7], [2, 5, 8],[0, 4, 8], [2, 4, 6]];for (let combo of winningCombinations) {if (arr[combo[0]] && arr[combo[0]] === arr[combo[1]] && arr[combo[1]] === arr[combo[2]]) {return arr[combo[0]];}}return -1;}//返回某个数存在的个数function getCount(arr, value) {return arr.filter(item => item === value).length;}}
)到这里就讲完了，感谢大家的观看！！！
相关文章：
井字棋游戏（HTML+CSS+JavaScript）
🌏个人博客主页：心.c 前言：这两天在写植物大战僵尸，写不动了，现在和大家分享一下之前我写的一个很简单的小游戏井字棋，这个没有AI，可以两个人一起玩，如果大家觉得我哪里写的有一些问…...
HTML 列表和容器元素——WEB开发系列10
HTML 提供了多种方式来组织和展示内容，其中包括无序列表、有序列表、分区元素 <div> 和内联元素 <span>、以及如何使用 <div> 进行布局和表格布局。 一、HTML 列表 1. 无序列表 (<ul>) 无序列表用于展…...
Java数组的高级使用技巧与性能优化
Java数组的高级使用技巧与性能优化 大家好，我是微赚淘客返利系统3.0的小编，是个冬天不穿秋裤，天冷也要风度的程序猿！ Java数组是程序设计中的基础数据结构，提供了一种存储固定大小的同类型元素的方式。本文将介绍Jav…...
python spyne报No module named ‘http.cookies‘的解决
python spyne报No module named ‘http.cookies’ python实现webservice服务端时，会使用spyne这个库，安装后，运行会提示No module named ‘http.cookies’。 尝试过不行的方法 pip install http.cookiespip install http.cookiejar 可行的…...
vmware虚拟机玩GPU显卡直通
安装好exsi以后，找到管理----硬件-----PCI设备，勾选想要直通的显卡，然后点击“切换直通” 切换以后可以看到列表中的直通列显示为活动就对了。 然后编辑虚拟机设置，CPU关闭硬件虚拟化（向客户机操作系统公开硬件辅助的…...
Linux下Oracle 11g升级19c实录
1.组件信息 source /home/oracle/.bash_profile11g && sqlplus "/ as sysdba"<<EOF set line 200 col COMP_NAME for a40 select comp_name,VERSION,STATUS from dba_registry; exit; EOF COMP_NAME VERSION …...
haproxy实验-2
haproxy中的算法 静态算法：按照事先定义好的规则轮询公平调度，不关心后端服务器的当前负载、连接数和响应速度 等，且无法实时修改权重(只能为0和1,不支持其它值)，只能靠重启HAProxy生效。 static-rr：基于权重的轮询…...
動態PPTP代理IP是什麼？
PPTP即Point-to-Point Tunneling Protocol，點對點隧道協議，是一種常用的VPN協議，主要用於創建虛擬專用網路。通過將用戶的網路流量加密並通過一個中間伺服器傳輸，實現了對用戶IP地址的隱藏和數據的保護。而動態PPTP代理IP則是在傳…...
《全面解析 Nginx：从下载安装到高级应用与问题解决》
Nginx 一、Nginx 简介 什么是 Nginx 以及其功能 Nginx 是一款高性能的 HTTP 和反向代理的 Web 服务器，在处理高并发方面表现卓越，具备强大的能力来承受高负载，有相关报告指出其能够支持高达 50,000 个并发连接数。其显著特点为占用内存少、…...
python获取视频时长
今天有个需求，需要获取视频时长： 方法一：使用moviepy库打开视频文件并获取视频剪辑对象，然后通过剪辑对象获得视频时长。方法二：使用cv2库通过打开视频文件并获取帧率和总帧数两个属性，计算视频时长。 请…...
php-xlswriter实现数据导出excel单元格合并，内容从指定行开始写
最终效果图： 代码： public function export_data() {$list $this->get_list_organ();$content [];$content[] []; // 第2行不设置内容，设置为空foreach ($list as $key > $value) {$content[] [$value[organ_name], $value[clas…...
注意力模型QKV矩阵与位置向量计算
注意力模型QKV矩阵计算 在注意力机制中，Query (Q)、Key (K) 和 Value (V) 矩阵是通过对输入向量进行线性变换得到的，而这些矩阵的初始化与更新与神经网络的权重类似。 1. Q, K, V矩阵的初始化 线性变换：在注意力机制中，输入序列…...
glm4-9B-chat，使用提示工程激活模型最大潜力
文章目录 安全与免责申明简介GLM4-9B直接问答提示工程 激活能力 安全与免责申明 本文旨在研究大模型的安全，交流大模型目前安全方面的一些不足。 所有的实验与讨论的目的均是在进行科学研究的实验的需要。 简介 本文使用Ollama和LangChain，通过提示词…...
[Linux]在Ubuntu中如何正确安装python
一、在Ubuntu中python常见的安装方式 在Ubuntu中我们常用的python安装方式有使用包管理工具安装或者使用源码安装，下面我们来讲解一下这两种安装方式的优缺点。首先是使用包管理工具安装，我们可以直接使用“apt install python3.9”来安装一个我们想要的…...
[Vue3 + TS + Vite]文件选择器-组件
文件选择器组件代码 <script setup lang"ts"> import { ref, onMounted, defineProps, defineEmits, computed, toRaw } from vue;// 定义props interface Props {buttonTextUnactive?: string;buttonTextActive?: string;onFatherClick?: boolean; }// 定…...
Chrome书签搜索插件
效果展示 这是一个chroma插件，可以按住 ctrl/command B 进行搜索您的书签，并且点击打开您的书签。支持上下切换回车打开新页面。 扩展下载地址 bookmark-search 欢迎有任何问题给我提 issues...
MATLAB算法实战应用案例精讲-【人工智能】联邦学习（二）（附python代码实现）
目录 前言 几个高频面试题目 面向隐私保护的机器学习（PPML）和安全机器学习（Secure ML）的区别： 联邦学习、安全计算是什么关系？ 联邦学习有哪些类型？如何区分横向联邦学习和纵向联邦学习？ 什么是IID？什么是Non-iid？ 联邦学习训练后的模型是一个公共的模型，而…...
在 C++ 中实现一个简单的图形用户界面（GUI）应用
在 C 中实现一个简单的图形用户界面（GUI）应用 图形用户界面（GUI）应用程序是现代软件开发中不可或缺的一部分。它们为用户提供了直观的交互方式，使得操作更加简单和高效。本文将介绍如何在 C 中实现一个简单的 GUI 应用…...
如何编写一个CMakeLists.txt文件（由简到难，较详细）
在Linux系统下，经常使用CMakeLists.txt文件来链接、编译C工程，大部分人clone的代码里都是有CMakeLists.txt文件的，只需要cmake .. 和make就完事了，但在工作中，你必须要有从无到有编写CMakeLists.txt文件的能力。 一、…...
数据结构----链表
一丶概念 链表又称单链表、链式存储结构，用于存储逻辑关系为“一对一”的数据。 和顺序表不同同，使用链表存储数据，不强制要求数据在内存中集中存储，各个元素可以分散存储在内存中。 二丶特点 特点：内存不连续…...
UE5 学习系列（二）用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作，重…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
黑马Mybatis
Mybatis 表现层：页面展示 业务层：逻辑处理 持久层：持久数据化保存 在这里插入图片描述 Mybatis快速入门 
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
爬虫基础学习day2
# 爬虫设计领域 工商：企查查、天眼查短视频：抖音、快手、西瓜 ---> 飞瓜电商：京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空：抓取所有航空公司价格 ---> 去哪儿自媒体：采集自媒体数据进…...
是否存在路径（FIFOBB算法）
题目描述 一个具有 n 个顶点e条边的无向图，该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序，确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数，分别表示n 和 e 的值（1…...
Java线上CPU飙高问题排查全指南
一、引言 在Java应用的线上运行环境中，CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时，通常会导致应用响应缓慢，甚至服务不可用，严重影响用户体验和业务运行。因此，掌握一套科学有效的CPU飙高问题排查方法&…...
AI病理诊断七剑下天山，医疗未来触手可及
一、病理诊断困局：刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"，医生需通过显微镜观察组织切片，在细胞迷宫中捕捉癌变信号。某省病理质控报告显示，基层医院误诊率达12%-15%，专家会诊…...
在Ubuntu24上采用Wine打开SourceInsight
1. 安装wine sudo apt install wine 2. 安装32位库支持，SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库（解决显示问题） sudo apt install fonts-wqy…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展，社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统，主要的模块包括管理员；首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...