井字棋游戏（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文件的能力。 一、…...
数据结构----链表
一丶概念 链表又称单链表、链式存储结构，用于存储逻辑关系为“一对一”的数据。 和顺序表不同同，使用链表存储数据，不强制要求数据在内存中集中存储，各个元素可以分散存储在内存中。 二丶特点 特点：内存不连续…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
三维GIS开发cesium智慧地铁教程（5）Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点： 路径验证：确保相对路径.…...
3.3.1_1 检错编码（奇偶校验码）
从这节课开始，我们会探讨数据链路层的差错控制功能，差错控制功能的主要目标是要发现并且解决一个帧内部的位错误，我们需要使用特殊的编码技术去发现帧内部的位错误，当我们发现位错误之后，通常来说有两种解决方案。第一…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中，新增了一个本地验证码接口 /code，使用函数式路由（RouterFunction）和 Hutool 的 Circle…...
保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
python爬虫——气象数据爬取
一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用： 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests：发送 …...
抽象类和接口（全）
一、抽象类 1.概念：如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象，这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法，包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中，⼀个类如果被 abs…...
实战三：开发网页端界面完成黑白视频转为彩色视频
一、需求描述 设计一个简单的视频上色应用，用户可以通过网页界面上传黑白视频，系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观，不需要了解技术细节。 效果图 二、实现思路 总体思路： 用户通过Gradio界面上…...