原生JavaScript实现五子棋（直接上代码干货点赞收藏拿走）

最新推荐文章于 2024-06-27 10:26:13 发布

程序员的生活1

最新推荐文章于 2024-06-27 10:26:13 发布

阅读量1.6k

点赞数 8

分类专栏：基础教程 web前端文章标签： javascript 五子棋小游戏 html

本文链接：https://blog.csdn.net/lin123_00/article/details/117933762

版权

本文分享了一篇关于如何使用原生JavaScript实现五子棋小游戏的教程，提供了HTML页面和JavaScript代码示例，鼓励读者自己动手实践以理解其实现原理。作者提醒不要直接复制粘贴，而是要亲自敲代码来提升技能，并表示会持续更新相关文章。

摘要由CSDN通过智能技术生成

HTML页面

注释都很明确了大家好好学习

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
  <title>五子棋</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }

    .box {
      border-spacing: 0px;
      border: 1px solid #3c3c3c;
      background-color: #e1e1e2;
      margin: auto;
    }
    
    .piece {
      border-spacing: 0px;
      border: 1px solid;    
    }
  </style>

</head>

<body>
  <script type="text/javascript" src="./Gobang.js"></script>
</body>

</html>

Javascript

var ScreenWidth = {
  documentWidth: 500,
  containerWidth: 400, // 容器默认宽度
  cellWidth: 20 // 单元格宽度
}
if (document.documentElement.clientWidth < 500) {
  ScreenWidth.documentWidth = document.documentElement.clientWidth;
  ScreenWidth.containerWidth = ScreenWidth.documentWidth * 0.8;
  ScreenWidth.cellWidth = ScreenWidth.containerWidth * 0.05;
}
//常量
var reg = /\d{1,2}/g;
var white = []; // 放白子
var black = []; // 放黑子
var tempKey = false; // 判断是走黑子还是白子
var notOver = true; // 判断游戏是否结束
var tips = "白棋走"; // 提示走棋
var count = 0;//相连的个数
var bv = false; // 黑棋胜利
var wv = false; // 白棋胜利 
var yCanWin = [];// 同一竖元素存放的数组
var xCanWin = [];// 同一横元素存放的数组
var xyCanWin = [];// 同一正斜存放的数组
var yxCanWin = [];// 同一反斜存放的数组
// 用计时器监听是否胜利
var time = setInterval(function () {
  if (bv) {
    tips = "黑棋胜利";
    document.getElementsByTagName("span")[0].innerText = tips;
    for (var i = 0; i < document.getElemen