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

已于 2024-08-16 15:13:48 修改
阅读量1.3k 收藏 67
点赞数 88
文章标签： 游戏 html css javascript
于 2024-08-16 15:04:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_81253185/article/details/141254782
版权

  🌏个人博客主页：心.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.id
      if (getCount(arr, 1) <= getCount(arr, 2)) {
        if (arr[id - 1] === null) {
          arr[id - 1] = 1
          console.log(arr)
          render()
        } else {
          alert('请在空白处添加')
        }
      } else {
        if (arr[id - 1] === null) {
          arr[id - 1] = 2
          console.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.id
      if (getCount(arr, 1) <= getCount(arr, 2)) {
        if (arr[id - 1] === null) {
          arr[id - 1] = 1
          console.log(arr)
          render()
        } else {
          alert('请在空白处添加')
        }
      } else {
        if (arr[id - 1] === null) {
          arr[id - 1] = 2
          console.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;
  }

}
)

 到这里就讲完了，感谢大家的观看！！！

心.c
关注
  • 88
    点赞
  • 踩
  • 67
    收藏
    觉得还不错? 一键收藏
  • 62
    评论
前端技术搭建井字游戏（内含源码）
官方推荐
05-15 6万+
上周我们实通过前端基础实现了飞机大战游戏，今天还是继续按照我们原定的节奏来带领大家完成一个井字游戏游戏，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。
js 实现井字棋游戏
军火库
05-31 1772
井字棋 井字棋作为我们在上学时代必玩的一款连珠游戏，你知道如何做到先手必然不会输吗？今天我们就用HTML、css、js来实现一款井字棋游戏。 先看成品 游戏初始化界面： 玩家获胜 AI电脑获胜 思路 生成棋盘 通过表格生成一个3*3的表格 然后通过css属性隐藏部分边框实现井字棋盘 重新开始 清空文本数列删除属性 玩家落子 通过玩家点击获取id 通过id将点击的表格块设置为O 电脑落子 通过算法来实现电脑最适合的块id然后落子 代码 HTML <!DOCTYPE html>
井字游戏HTML+CSS+Javascript
高万禄的博客
03-16 865
var array=["a_a","a_b","a_c","b_a","b_b","b_c","c_a","c_b","c_c"]; objarray=[]; const mewin=1; const hewin=2; judgefirst=0; judgeworf=0; var winc=[[0,4,8],[2,4,6],[0,3,6],[1,4,7],[2,5,8],[0,1,2],[3,4,...
HTML，CSS，JavaScript实现——井字棋游戏
Traveller_man的博客
07-29 411
井字棋游戏是一个两人对战游戏，玩家轮流在一个3x3的网格上标记 X 或 O。先将三个标记连成一条直线（水平、垂直或对角线）的玩家获胜。如果所有的格子都被填满且没有玩家获胜，则游戏结束，结果为平局。
井字棋小游戏（HTML/CSS/JS）
weixin_52841164的博客
03-18 449
井字棋小游戏，使用html，js，css。
HTML,CSS,JavaScript实现——井字棋游戏
Rverdoser的博客
08-02 490
这段代码提供了一个3x3的井字棋盘，并使用CSS grid布局来创建这个棋盘。接下来，需要添加JavaScript代码来处理玩家的移动，以及判断输赢。这些逻辑会涉及事件监听、条件判断以及DOM操作。这里只提供实现井字棋游戏的核心HTML和CSS代码。具体的JavaScript逻辑（如处理玩家移动、判断胜负等）需要根据实际情况编写。// 这里添加JavaScript代码来实现游戏逻辑。
React井字棋游戏+练习
愤怒的小火柴人
02-12 2654
React下井字棋游戏，包括悔棋，结果显示，高亮等功能
【网页制作】原生JavaScript制作“井字棋”
user_from_future的博客
05-13 631
原生JavaScript制作“井字棋”
基于html5APP前端和pyhtonflask后端的人工智能井字棋小游戏设计 文档+项目源码及安装包+演示视频
毕业作品网站
02-25 1713
关键词： Flask HTML5 CSS Javascript Max-Min Search AI 摘要 本次嵌入式作业，完成了井字棋HTML5 APP小游戏的开发，并实现了真机调试，真机安装。本APP前端借助 HTML5+CSS+JavaScript，并采用了jQuery框架。 前端实现了及其细腻的动画，赏心悦目的用户界面，以及良好的异步操作性能。 游戏中与人对战的AI使用Min-Max搜索，由运行在阿里云服务器上的python程序实现。前后端通信采用了现代的 A JAX CROD（ajax跨域）通
HTML，CSS，JavaScript实现-井字棋游戏
07-29
HTML，CSS，JavaScript实现——井字棋游戏
井字棋 HTML小游戏 @keyframes
03-02
井字棋 HTML小游戏是利用HTML5、JavaScript（jQuery库）以及CSS3的`@keyframes`规则来创建的一款简单互动的在线游戏。这个游戏通常被称为"井字过三关"或"三子连珠"，玩家通过交替在3x3的棋盘上放置"X"和"O"，目标是...
game-jzq:井字棋 html5+css3[完成，已移植到phonegap] 在线测试地址===>
06-02
总结来说，"game-jzq"项目展示了如何利用HTML5的Canvas和Local Storage、CSS3的Flexbox和动画效果，以及JavaScript的事件处理和游戏逻辑，来开发一个跨平台的井字棋游戏。对于想要学习Web开发或移动应用开发的初学者...
vue实现井字棋游戏
10-14
在本示例中，我们将探讨如何使用Vue.js框架来实现一个经典的井字棋（Tic Tac Toe）游戏。Vue.js是一个轻量级的前端JavaScript框架，它提供了数据绑定和组件化的能力，使得构建用户界面更加便捷。以下是实现这个游戏...
JavaScript实现一个带AI的井字棋游戏
10-18
JavaScript实现的井字棋游戏是一种常见的编程练习，它涉及到用户交互、逻辑判断和人工智能算法。在本项目中，游戏的核心是使用JavaScript实现一个简单的AI，让电脑能够与玩家进行智能对战。 首先，游戏界面使用HTML...
用git指令别名，解决unity环境问题
最新发布
我是黄大仙
08-21 461
unity 项目开发时，由于我本机的配置和项目组其他小伙伴的配置不一样，使用统一的配置打开项目会出现花屏的现象，经过摸索尝试，需要修改 unity 的Project Settings。修改之后，项目文件会有变更，若是提交，其他小伙伴 pull 之后会导致他们的工程不可用。git 指令支持 hook，我只需要每次切换分支前将 ProjectSettings 还原，切换分支后再修改 ProjectSettings 文件，并重新设置本地忽略 ProjectSettings 文件的变更，就可以实现我想要的功能。
P2016 战略游戏
2302_78855882的博客
08-16 416
【代码】P2016 战略游戏。
Unity视频流监控接入，点击播放只播放一帧画面
qq_24545959的博客
08-19 216
检查监控平台编码/解码配置（H265/H264）
Unity 麦扣 x 勇士传说 全解析 之 怪物基类（2）（附各模块知识的链接，零基础也包学会的牢弟）（案例难度：★★☆☆☆）
2301_77947509的博客
08-18 527
好懒
评论 62
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值