当前位置： 首页 > news >正文

井字棋游戏（HTML+CSS+JavaScript）

news 2026/5/25 7:31:12

  🌏个人博客主页：心.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 = '&#xe68b;'}else if (arr[i] === 2) {smal.innerHTML = '&#xe68e;'} 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 = '&#xe68b;'}else if (arr[i] === 2) {smal.innerHTML = '&#xe68e;'} 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）

&#x1f30f;个人博客主页&#xff1a;心.c 前言&#xff1a;这两天在写植物大战僵尸&#xff0c;写不动了&#xff0c;现在和大家分享一下之前我写的一个很简单的小游戏井字棋&#xff0c;这个没有AI&#xff0c;可以两个人一起玩&#xff0c;如果大家觉得我哪里写的有一些问…...

编程日记 2024/8/17 9:08:55

HTML 列表和容器元素——WEB开发系列10

HTML 提供了多种方式来组织和展示内容&#xff0c;其中包括无序列表、有序列表、分区元素 ​​<div>​​ 和内联元素 ​​<span>​​、以及如何使用 ​​<div>​​​ 进行布局和表格布局。 一、HTML 列表 1. 无序列表 (​​<ul>​​) 无序列表用于展…...

编程日记 2024/8/17 9:07:54

Java数组的高级使用技巧与性能优化

Java数组的高级使用技巧与性能优化 大家好&#xff0c;我是微赚淘客返利系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; Java数组是程序设计中的基础数据结构&#xff0c;提供了一种存储固定大小的同类型元素的方式。本文将介绍Jav…...

编程日记 2024/8/17 9:06:53

python spyne报No module named ‘http.cookies‘的解决

python spyne报No module named ‘http.cookies’ python实现webservice服务端时&#xff0c;会使用spyne这个库&#xff0c;安装后&#xff0c;运行会提示No module named ‘http.cookies’。 尝试过不行的方法 pip install http.cookiespip install http.cookiejar 可行的…...

编程日记 2024/8/17 9:03:50

vmware虚拟机玩GPU显卡直通

安装好exsi以后&#xff0c;找到管理----硬件-----PCI设备&#xff0c;勾选想要直通的显卡&#xff0c;然后点击“切换直通” 切换以后可以看到列表中的直通列显示为活动就对了。 然后编辑虚拟机设置&#xff0c;CPU关闭硬件虚拟化&#xff08;向客户机操作系统公开硬件辅助的…...

编程日记 2024/8/17 8:57:42

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 …...

编程日记 2024/8/17 8:54:38

haproxy实验-2

haproxy中的算法 静态算法&#xff1a;按照事先定义好的规则轮询公平调度&#xff0c;不关心后端服务器的当前负载、连接数和响应速度 等&#xff0c;且无法实时修改权重(只能为0和1,不支持其它值)&#xff0c;只能靠重启HAProxy生效。 static-rr&#xff1a;基于权重的轮询…...

编程日记 2024/8/17 8:51:35

動態PPTP代理IP是什麼？

PPTP即Point-to-Point Tunneling Protocol&#xff0c;點對點隧道協議&#xff0c;是一種常用的VPN協議&#xff0c;主要用於創建虛擬專用網路。通過將用戶的網路流量加密並通過一個中間伺服器傳輸&#xff0c;實現了對用戶IP地址的隱藏和數據的保護。而動態PPTP代理IP則是在傳…...

编程日记 2024/8/17 8:50:33

《全面解析 Nginx：从下载安装到高级应用与问题解决》

Nginx 一、Nginx 简介 什么是 Nginx 以及其功能 Nginx 是一款高性能的 HTTP 和反向代理的 Web 服务器&#xff0c;在处理高并发方面表现卓越&#xff0c;具备强大的能力来承受高负载&#xff0c;有相关报告指出其能够支持高达 50,000 个并发连接数。其显著特点为占用内存少、…...

编程日记 2024/8/17 8:36:09

python获取视频时长

今天有个需求&#xff0c;需要获取视频时长&#xff1a; 方法一&#xff1a;使用moviepy库打开视频文件并获取视频剪辑对象&#xff0c;然后通过剪辑对象获得视频时长。方法二&#xff1a;使用cv2库通过打开视频文件并获取帧率和总帧数两个属性&#xff0c;计算视频时长。 请…...

编程日记 2024/8/17 8:31:03

php-xlswriter实现数据导出excel单元格合并，内容从指定行开始写

最终效果图&#xff1a; 代码&#xff1a; public function export_data() {$list $this->get_list_organ();$content [];$content[] []; // 第2行不设置内容&#xff0c;设置为空foreach ($list as $key > $value) {$content[] [$value[organ_name], $value[clas…...

编程日记 2024/8/17 8:30:02

注意力模型QKV矩阵与位置向量计算

注意力模型QKV矩阵计算 在注意力机制中&#xff0c;Query (Q)、Key (K) 和 Value (V) 矩阵是通过对输入向量进行线性变换得到的&#xff0c;而这些矩阵的初始化与更新与神经网络的权重类似。 1. Q, K, V矩阵的初始化 线性变换&#xff1a;在注意力机制中&#xff0c;输入序列…...

编程日记 2024/8/17 8:28:00

glm4-9B-chat，使用提示工程激活模型最大潜力

文章目录 安全与免责申明简介GLM4-9B直接问答提示工程 激活能力 安全与免责申明 本文旨在研究大模型的安全&#xff0c;交流大模型目前安全方面的一些不足。 所有的实验与讨论的目的均是在进行科学研究的实验的需要。 简介 本文使用Ollama和LangChain&#xff0c;通过提示词…...

编程日记 2024/8/17 8:26:59

[Linux]在Ubuntu中如何正确安装python

一、在Ubuntu中python常见的安装方式 在Ubuntu中我们常用的python安装方式有使用包管理工具安装或者使用源码安装&#xff0c;下面我们来讲解一下这两种安装方式的优缺点。首先是使用包管理工具安装&#xff0c;我们可以直接使用“apt install python3.9”来安装一个我们想要的…...

编程日记 2024/8/17 8:25:58

[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; }// 定…...

编程日记 2024/8/17 8:24:57

Chrome书签搜索插件

效果展示 这是一个chroma插件&#xff0c;可以按住 ctrl/command B 进行搜索您的书签&#xff0c;并且点击打开您的书签。支持上下切换回车打开新页面。 扩展下载地址 bookmark-search 欢迎有任何问题给我提 issues...

编程日记 2024/8/17 8:21:54

MATLAB算法实战应用案例精讲-【人工智能】联邦学习（二）（附python代码实现）

目录 前言 几个高频面试题目 面向隐私保护的机器学习（PPML）和安全机器学习（Secure ML）的区别： 联邦学习、安全计算是什么关系？ 联邦学习有哪些类型？如何区分横向联邦学习和纵向联邦学习？ 什么是IID？什么是Non-iid？ 联邦学习训练后的模型是一个公共的模型，而…...

编程日记 2024/8/17 8:20:53

在 C++ 中实现一个简单的图形用户界面（GUI）应用

在 C 中实现一个简单的图形用户界面&#xff08;GUI&#xff09;应用 图形用户界面&#xff08;GUI&#xff09;应用程序是现代软件开发中不可或缺的一部分。它们为用户提供了直观的交互方式&#xff0c;使得操作更加简单和高效。本文将介绍如何在 C 中实现一个简单的 GUI 应用…...

编程日记 2024/8/17 8:18:50

如何编写一个CMakeLists.txt文件（由简到难，较详细）

在Linux系统下&#xff0c;经常使用CMakeLists.txt文件来链接、编译C工程&#xff0c;大部分人clone的代码里都是有CMakeLists.txt文件的&#xff0c;只需要cmake .. 和make就完事了&#xff0c;但在工作中&#xff0c;你必须要有从无到有编写CMakeLists.txt文件的能力。 一、…...

编程日记 2024/8/17 8:15:47

数据结构----链表

一丶概念 链表又称单链表、链式存储结构&#xff0c;用于存储逻辑关系为“一对一”的数据。 和顺序表不同同&#xff0c;使用链表存储数据&#xff0c;不强制要求数据在内存中集中存储&#xff0c;各个元素可以分散存储在内存中。 二丶特点 特点&#xff1a;内存不连续…...

编程日记 2024/8/17 8:10:41

基于Transformer的行星大气辐射传输仿真器：百倍加速与1%精度

1. 项目概述&#xff1a;用Transformer重塑行星大气辐射传输计算在行星科学和天体物理领域&#xff0c;模拟一颗行星的大气层如何吸收、散射和发射星光与热辐射&#xff0c;是理解其气候、演化乃至潜在宜居性的基石。这个过程的核心&#xff0c;就是辐射传输计算。无论是预测即…...

编程新知 2026/5/25 7:29:09

Playwright MCP实战：AI驱动的网页自动修复与可验证调试

1. 这不是“让AI写网页”&#xff0c;而是让AI当你的前端搭档你有没有过这样的时刻&#xff1a;凌晨两点&#xff0c;线上一个按钮突然不响应&#xff0c;控制台报错指向一段被压缩过的JS&#xff0c;你一边翻Git历史一边怀疑人生&#xff1b;或者刚上线的表单在Safari里莫名错…...

编程新知 2026/5/25 6:37:08

机器学习势能面构建实战：从量子化学数据到高精度分子模拟

1. 项目概述&#xff1a;当机器学习“学会”了化学反应的势能面在计算化学的世界里&#xff0c;我们一直面临着一个核心矛盾&#xff1a;精度与效率的权衡。如果你想精确地描述一个化学反应&#xff0c;比如DNA复制过程中碱基对的质子转移&#xff0c;你需要动用量子化学方法&a…...

编程新知 2026/5/25 5:36:15

如何在本地部署大模型-ollama_(保姆级教程)

一、部署方式选择 部署方式上手难度核心特点适用场景Ollama⭐命令极简&#xff0c;自动适配环境&#xff0c;自带 API 接口新手日常本地调用、快速测试LM Studio⭐图形化操作&#xff0c;无需敲代码&#xff0c;兼容 OpenAI 接口不想使用命令行、纯可视化使用Text Generation …...

编程新知 2026/5/25 5:24:25

ML赋能BDI智能体：规划、意图过滤与行动模块的技术融合与实践

1. 项目概述&#xff1a;当经典BDI架构遇上现代机器学习在人工智能领域&#xff0c;构建能够像人一样思考、决策和行动的智能体&#xff08;Agent&#xff09;&#xff0c;一直是研究者们孜孜以求的目标。其中&#xff0c;信念-愿望-意图&#xff08;Belief-Desire-Intention&a…...

编程新知 2026/5/25 5:17:35

合肥Geo搜索优化服务的真实成本与效果分析

这两年&#xff0c;“AI搜索优化”、“GEO&#xff08;生成式引擎优化&#xff09;”在中小企业的朋友圈里反复刷屏。我身边不少安徽本土的老板&#xff0c;尤其是做教培、法律和机械制造的&#xff0c;从去年底就开始频繁问我&#xff1a;“这玩意儿到底靠不靠谱&#xff1f;投…...

编程新知 2026/5/25 4:56:21

CentOS 7无线网络配置避坑指南：wpa_supplicant vs NetworkManager，我该选哪个？

CentOS 7无线网络配置终极方案&#xff1a;从命令行到GUI的完整决策树在Linux服务器管理领域&#xff0c;无线网络配置始终是个充满挑战的话题。当你在数据中心角落发现一台需要无线连接的CentOS 7服务器&#xff0c;或是需要在无网线接入的会议室临时部署服务时&#xff0c;选…...

编程新知 2026/5/25 4:35:52

基于图神经网络的机器学习有限区域模型：边界处理与图结构设计实战

1. 项目概述与核心挑战最近几年&#xff0c;机器学习天气预测&#xff08;MLWP&#xff09;的进展让人有点兴奋&#xff0c;又有点眼花缭乱。从全球尺度的大模型到区域性的精细化预报&#xff0c;数据驱动的方法正在重新定义我们对大气模拟的理解。作为一名长期混迹在气象和计算…...

编程新知 2026/5/25 4:26:44

如何为个人网站快速接入大模型问答功能使用Taotoken

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 如何为个人网站快速接入大模型问答功能使用Taotoken 为个人网站或博客添加一个智能问答模块&#xff0c;可以显著提升访客的互动体…...

编程新知 2026/5/25 4:22:44

Fay数字人框架服务器安全基线实战指南

1. 为什么一份“数字人框架服务器安全基线”不是可选项&#xff0c;而是上线前的生死线你花三个月调好了Fay数字人的语音唤醒灵敏度&#xff0c;优化了TTS情感韵律&#xff0c;把LLM上下文窗口拉到32K&#xff0c;连虚拟形象的微表情帧率都压到了60fps——结果刚部署到云服务器…...

编程新知 2026/5/25 4:10:29