越秀免费网站建设/大连网络营销seo
🌏个人博客主页：心.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文件的能力。 一、…...
数据结构----链表
一丶概念 链表又称单链表、链式存储结构，用于存储逻辑关系为“一对一”的数据。 和顺序表不同同，使用链表存储数据，不强制要求数据在内存中集中存储，各个元素可以分散存储在内存中。 二丶特点 特点：内存不连续…...
【Qt】内置对话框
一.Qt内置对话框 Qt 提供了多种可复⽤的对话框类型，即 Qt 标准对话框。Qt标准对话框全部继承于QDialog类。常⽤标准对话框如下： 二.内置对话框分类 1.消息对话框 QMessageBox 1.1 概念 消息对话框是应⽤程序中最常⽤的界⾯元素。消息对话框主要⽤于为…...
excel常规操作
一、去重 IF(COUNTIF($D$1:D2,D2)>1,"",C2) —— D是去重的列 二、不同列匹配 VLOOKUP(A1,E:F,2,0) vlookup(查找值, 查找区域, 返回查找区域的第几列数据, 精确查找输入参数"0"or"false" 或 模糊查找输入参数"1"or"true…...
uniapp webview子页面向父页面发送数据和触发事件，重点在第3条！！！
1、众所周知H5中iframe可以用过postmessage进行，从H5子页面向H5父页面进行通信。方法如下： // 子页面 window.parent.postMessage({ data: 你的消息 }, *);// 父页面 <iframe src"xxxxxxxxxxx"></iframe> window.addEventListene…...
【STM32实物】基于STM32+ESP32+手机APP设计的智能宠物喂食系统实物源码原理图PCB设计文档演示视频——（文末工程资料下载）
基于STM32+ESP32+手机APP设计的智能宠物喂食系统 演示视频 基于STM32+ESP32+手机APP设计的智能宠物喂食系统 摘 要 近年来，宠物在人们生活中越来越不可或缺，给人们带来的陪伴和快乐。然而，由于种种原因，主人不能时刻照顾宠物的饮食，所以宠物喂食装置变得尤为重要。传…...
EMC学习笔记5——辐射骚扰发射
辐射骚扰发射是基本的实验项目，目的是检验设备在工作时有没有产生意外的过强电磁辐射。 例如发电机，在工作时会产生意外的电磁波辐射，因为电子设备中隐藏了一些天线，这些隐藏的天线在辐射电磁波。 一、两种基本的天线结构 如前面…...
深入理解浏览器解析机制和XSS向量编码
基础部分 1.<a href"%6a%61%76%61%73%63%72%69%70%74:%61%6c%65%72%74%28%31%29">aaa</a> <a>标签可以识别，但是解析不了， 是在协议的编码顺序上，先认协议 URL 编码 "javascript:alert(1)" 2.<a …...
winform 大头针实现方法——把窗口钉在最上层
平时我们再使用成熟的软件的时候，会发现有个大头针的功能挺不错的。就是点一下大头针，窗口就会钉住，一直保持在最上面一层，这样可以一边设置参数，一边观察这个窗口里面的变化，比较方便。下面我就来简单实现…...
中间件|day1.Redis
Redis 定义 Redis 是一个开源（BSD许可）的，内存中的数据结构存储系统，它可以用作数据库、缓存和消息中间件。 它支持多种类型的数据结构，如 字符串（strings）， 散列（hash…...
PMP到底有什么用？
PMP 就是项目管理证书，全称是项目管理专业人士资格认证，对于一个在项目管理岗位混迹五年的老油条来说，PMP 证书是敲开项目管理岗位的第一块砖，每年考 PMP 的人都很多，要是 PMP 证书没有价值，还会有那么多人…...
apache huidi 时间旅行Time Travel）机制
Apache Hudi（Hadoop Upserts Deletes and Incrementals）是一个数据管理框架，它帮助你高效地管理存储在分布式存储系统（如HDFS或云存储）上的大型数据集。其一个关键特性是“时间旅行”，这允许你在特定时间点查询数据的历史版本。 什么是Apache Hudi中的时间旅行？ Apach…...