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

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

news 2026/3/30 5:20:49

  🌏个人博客主页：心.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

【SoC】【ESP32】从零到一：VSCode+ESP-IDF环境下的高效开发工作流构建

1. 为什么选择VSCodeESP-IDF开发ESP32&#xff1f; 第一次接触ESP32开发时&#xff0c;我尝试过各种开发环境&#xff1a;Arduino IDE、PlatformIO、Eclipse...直到遇到VSCodeESP-IDF的组合&#xff0c;才发现这才是嵌入式开发的"完全体"。ESP-IDF作为乐鑫官方的开发…...

编程新知 2026/3/30 4:27:45

HarmonyOS开发入门：DevEco Studio工程目录结构详解与实战配置

HarmonyOS开发实战&#xff1a;深度解析DevEco Studio工程架构与高效配置策略 当你第一次在DevEco Studio中创建HarmonyOS项目时&#xff0c;是否曾被复杂的目录结构弄得一头雾水&#xff1f;作为华为全场景智能生态的核心开发工具&#xff0c;DevEco Studio采用了一套精心设计…...

编程新知 2026/3/30 4:03:22

深入解析DHT11单总线通信：如何通过时序控制实现稳定数据传输？

1. DHT11单总线通信的基本原理 第一次用DHT11传感器时&#xff0c;我被它只用一根线就能传数据惊到了。这就像两个人打电话&#xff0c;不需要复杂的线路&#xff0c;只要一根电话线就能聊天气温湿度。DHT11采用的单总线协议&#xff08;1-Wire Protocol&#xff09;就是这样一…...

编程新知 2026/3/30 3:28:51

告别手动配置！CCSv9.3一键导入MSP430F5529LP驱动库的两种高效方法

CCSv9.3高效配置指南&#xff1a;MSP430F5529LP驱动库的自动化管理方案 每次新建CCS工程都要重复添加库文件路径&#xff1f;这种低效操作早该被淘汰了。作为TI官方推荐的开发环境&#xff0c;Code Composer Studio其实隐藏着许多能大幅提升工作效率的高级功能。本文将彻底改变…...

编程新知 2026/3/30 2:36:35

轻量级免安装跨设备：浏览器插件如何重塑微信使用体验

轻量级免安装跨设备&#xff1a;浏览器插件如何重塑微信使用体验 【免费下载链接】wechat-need-web 让微信网页版可用 / Allow the use of WeChat via webpage access 项目地址: https://gitcode.com/gh_mirrors/we/wechat-need-web 在数字化办公日益普及的今天&#xf…...

编程新知 2026/3/30 2:30:34

BiliTools：跨平台B站资源管理工具的全方位应用指南

BiliTools&#xff1a;跨平台B站资源管理工具的全方位应用指南 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱&#xff0c;支持视频、音乐、番剧、课程下载……持续更新 项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliToo…...

编程新知 2026/3/30 1:01:47

告别回调地狱：用Qt信号与槽重构你的第一个GUI应用（Qt6/C++实战）

重构GUI应用&#xff1a;Qt信号与槽的工程化实践 在传统C GUI开发中&#xff0c;我们常常陷入回调函数嵌套的泥潭——按钮点击触发事件处理函数&#xff0c;函数内部又调用其他模块&#xff0c;最终形成难以维护的"面条式代码"。Qt的信号与槽机制为这一困境提供了优雅…...

编程新知 2026/3/29 23:45:19

TensorRT实战：从模型转换到部署推理的完整指南

1. TensorRT入门&#xff1a;为什么选择它&#xff1f; 如果你正在寻找一种能够让你的深度学习模型在生产环境中飞起来的方法&#xff0c;TensorRT绝对是你的不二之选。简单来说&#xff0c;TensorRT是NVIDIA推出的高性能推理优化器和运行时引擎&#xff0c;专门为NVIDIA GPU设…...

编程新知 2026/3/29 23:07:08

终极指南：如何用F3工具快速检测U盘和SD卡真实容量

终极指南&#xff1a;如何用F3工具快速检测U盘和SD卡真实容量 【免费下载链接】f3 F3 - Fight Flash Fraud 项目地址: https://gitcode.com/gh_mirrors/f3/f3 在数字时代&#xff0c;存储设备容量造假已成为普遍问题&#xff0c;许多U盘、SD卡通过软件修改显示虚假容量&…...

编程新知 2026/3/29 22:00:40

Linux服务器安装Linux宝塔面板并部署wordpress网站以及雷池WAF，设置禁止使用IP地址访问网站，只能使用域名访问网站

一、Linux服务器安装Linux宝塔面板 这个步骤参考网上其他教程。 二、Linux宝塔面板部署wordpress网站 这个步骤参考网上其他教程&#xff0c;保证网站能够正常访问&#xff0c;并且使用Linux宝塔面板申请并部署了SSL证书&#xff0c;使用https协议默认443端口正常访问网站。 三…...

编程新知 2026/3/29 21:52:31