利用HTML5+CSS3+JavaScript实现五子棋人机对弈

已于 2023-07-06 14:39:45 修改
阅读量521 收藏 4
点赞数 1
文章标签： html5 css3 javascript
于 2023-07-04 14:39:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48602044/article/details/131533706
版权

利用HTML5+CSS3+JavaScript实现五子棋人机对弈

HTML5代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>五子棋</title>
        <link rel="stylesheet" href="./css/chess.css" />
    </head>
    <body>
        <p id="result_wrap">**********人机大战五子棋**********</p>
        <canvas id="chess" width="450px" height="450px"></canvas>
        <div id="demo">坐标：</div>
        <div class="btn_wrap">
            <div id="restart" class="restart">
                <span>重新开始</span>
            </div>
            <div id="goback" class="goback unable">
                <span>悔棋一次</span>
            </div>
            <div id="return" class="return unable">
                <span>撤销悔棋</span>
            </div>
        </div>
    </body>
    <script src="./js/chess.js"></script>
</html>

CSS3代码

body {
  background: url('./images/背景图.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}
canvas {
  display: block; /*让棋盘块状显示*/
  margin: 50px auto; /*让棋盘左右居中*/
  box-shadow: -2px -2px 2px #efefef, 3px 3px 3px #ffdaaf; /*添加棋盘阴影，使棋盘看起来更有立体感*/
  cursor: pointer; /*改变鼠标光标，增强用户的下棋落点准确性 */
  background: url('./images/棋盘.jpg');
  background-size: contain;
}
#demo {
  text-align: center;
  margin-top: -30px;
  margin-bottom: 10px;
  color: #ffffff;
}
.btn_wrap {
  display: flex;
  justify-content: center; /*水平居中*/
}
.btn_wrap div {
  margin: 0 10px;
}
div > span {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #eeb741;
  border-radius: 5px;
  cursor: pointer;
}
div.unable span {
  background: #d6d6d4;
  color: #adacaa;
}
#result_wrap {
  text-align: center;
  font-weight: bold;
  font-size: 28px;
  line-height: 28px;
  color: #000000;
}

JavaScript代码

// 获取DOM对象
var chess = document.getElementById('chess')
var context = chess.getContext('2d')
var demo = document.getElementById('demo')
var result_wrap = document.getElementById('result_wrap')
var restart = document.getElementById('restart')
var goback = document.getElementById('goback')
var returnbtn = document.getElementById('return')

// 定义全局变量
var over = false // 对局结束的变量
var me = true // 我下棋回合的变量
var _nowi = 0, // 记录自己下棋的x坐标
  _nowj = 0 // 记录自己下棋的y坐标
var _compi = 0, // 记录计算机当前下棋的x坐标
  _compj = 0 // 记录计算机当前下棋的y坐标
var backAble = false, // 悔棋情况
  returnAble = false // 撤销悔棋情况
var chressBord = [] //棋盘数组落子记录
var _myWin = [], // 记录我赢的情况
  _compWin = [] // 记录计算机赢的情况
var myWin = [] // 自己赢法的统计数组
var computerWin = [] // 计算机赢法的统计数组
var count = 0 // 赢法总数
var wins = [] // 赢法数组

// 赢法数组初始化
for (var i = 0; i < 15; i++) {
  wins[i] = []
  for (var j = 0; j < 15; j++) {
    wins[i][j] = []
  }
}

// 边框颜色
context.strokeStyle = '#bfbfbf'

// 绘制棋盘
var drawChessBoard = function () {
  for (var i = 0; i < 15; i++) {
    context.moveTo(15 + i * 30, 15)
    context.lineTo(15 + i * 30, 435)
    context.stroke()
    context.moveTo(15, 15 + i * 30)
    context.lineTo(435, 15 + i * 30)
    context.stroke()
  }
}

// 调用绘制棋盘函数
window.onload = function () {
  drawChessBoard()
}

// 初始化棋盘
for (var i = 0; i < 15; i++) {
  chressBord[i] = []
  for (var j = 0; j < 15; j++) {
    chressBord[i][j] = 0
  }
}

// 显示14*14的棋盘的坐标，从0,0开始
chess.onmousemove = function (e) {
  var x = Math.floor((e.offsetX - 24) / 32 + 0.5),
    y = Math.floor((e.offsetY - 24) / 32 + 0.5)
  if (x >= 0 && y >= 0) {
    demo.innerHTML = '坐标：' + x + ',' + y
  }
}
chess.onmouseleave = function () {
  demo.innerHTML = '坐标：'
}

// 绘制棋子
var oneStep = function (i, j, me) {
  context.beginPath()
  context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI) // 画圆
  context.closePath()
  // 棋子颜色渐变
  var gradient = context.createRadialGradient(
    // createRadialGradient()方法创建放射状/圆形渐变对象
    15 + i * 30 + 2, // 渐变的开始圆的 x 坐标
    15 + j * 30 - 2, // 渐变的开始圆的 y 坐标
    13, // 开始圆的半径
    15 + i * 30 + 2, // 渐变的结束圆的 x 坐标
    15 + j * 30 - 2, // 渐变的结束圆的 y 坐标
    0, // 结束圆的半径
  )
  if (me) {
    gradient.addColorStop(0, '#0a0a0a') // 我下的黑棋渐变开始的颜色
    gradient.addColorStop(1, '#636766') // 我下的黑棋渐变结束的颜色
  } else {
    gradient.addColorStop(0, '#6495ED') // 计算机下的白棋渐变开始的颜色
    gradient.addColorStop(1, '#f9f9f9') // 计算机下的白棋渐变结束的颜色
  }
  context.fillStyle = gradient // 选取渐变颜色变量
  context.fill() // 填充棋子
}

// 重新开始
restart.onclick = function () {
  window.location.reload()
}

// 悔棋-销毁棋子
var minusStep = function (i, j) {
  context.clearRect(i * 30, j * 30, 30, 30) // 擦除棋子的圆形
  // 重画该棋子的圆行周围的十字格子边线
  context.beginPath()
  context.moveTo(15 + i * 30, j * 30)
  context.lineTo(15 + i * 30, j * 30 + 30)
  context.moveTo(i * 30, j * 30 + 15)
  context.lineTo((i + 1) * 30, j * 30 + 15)
  context.strokeStyle = '#bfbfbf'
  context.stroke()
  context.stroke()
  context.stroke() // 重新绘制十字格子边线
}

// 横线赢法，同一x轴，不同y轴有5子，第二维数组++
for (var i = 0; i < 15; i++) {
  for (var j = 0; j < 11; j++) {
    for (var k = 0; k < 5; k++) {
      wins[i][j + k][count] = true
    }
    count++
  }
}

// 竖线赢法，同一y轴，不同x轴有5子，第一维数组++
for (var i = 0; i < 15; i++) {
  for (var j = 0; j < 11; j++) {
    for (var k = 0; k < 5; k++) {
      wins[j + k][i][count] = true
    }
    count++
  }
}

// 正斜线"\"赢法，第一维数组++，第二维数组++
for (var i = 0; i < 11; i++) {
  for (var j = 0; j < 11; j++) {
    for (var k = 0; k < 5; k++) {
      wins[i + k][j + k][count] = true
    }
    count++
  }
}

// 反斜线"/"赢法，第一维数组++，第二维数组--
for (var i = 0; i < 11; i++) {
  for (var j = 14; j > 3; j--) {
    for (var k = 0; k < 5; k++) {
      wins[i + k][j - k][count] = true
    }
    count++
  }
}

// 赢的情况和赢法统计数组初始化，实现回合制
for (var i = 0; i < count; i++) {
  myWin[i] = 0
  _myWin[i] = 0
  computerWin[i] = 0
  _compWin[i] = 0
}

// 我，下棋
chess.onclick = function (e) {
  // 对局结束我禁止下棋
  if (over) {
    return
  }
  // 计算机下棋回合我禁止下棋
  if (!me) {
    return
  }
  var x = e.offsetX // 鼠标坐标到元素的左侧的距离,作为x轴
  var y = e.offsetY // 鼠标坐标到元素的顶部的距离,作为y轴
  // 记录自己下棋的坐标
  var i = Math.floor(x / 30)
  var j = Math.floor(y / 30)
  _nowi = i // 记录自己下棋的x坐标
  _nowj = j // 记录自己下棋的y坐标
  // 判断棋盘是否可下棋，可下棋且我已下棋则赋值为1
  if (chressBord[i][j] == 0) {
    oneStep(i, j, me) // 调用绘制棋子函数
    chressBord[i][j] = 1 // 我，已占位置
    for (var k = 0; k < count; k++) {
      // 将可能赢的情况都加1
      if (wins[i][j][k]) {
        myWin[k]++
        _compWin[k] = computerWin[k]
        computerWin[k] = 6 // 这个位置计算机不可能赢了
        if (myWin[k] == 5) {
          result_wrap.innerHTML = '********** 你赢了 **********'
          over = true // 对局结束
        }
      }
    }
    // 计算机下棋回合
    if (!over) {
      me = !me
      computerAI() // 调用计算机下棋函数
    }
  }
  // 悔棋功能可用
  goback.className = goback.className.replace(
    new RegExp('(\\s|^)unable(\\s|$)'),
    ' ',
  ) // 选取含有unable首尾有空白符或者什么都没有的的字符串，^是取非，\\s匹配空白字符，$界定结束符，()子表达式被视为一个独立元素，|表示或
}

// 悔棋
goback.onclick = function (e) {
  // 悔棋功能为假时不能悔棋
  if (!backAble) {
    return
  }
  over = false
  me = true
  // 我，悔棋
  chressBord[_nowi][_nowj] = 0 // 我，已占位置 还原
  minusStep(_nowi, _nowj) // 调用悔棋-销毁棋子函数
  for (var k = 0; k < count; k++) {
    // 将可能赢的情况都减1
    if (wins[_nowi][_nowj][k]) {
      myWin[k]--
      computerWin[k] = _compWin[k] // 这个位置计算机可能赢
    }
  }
  // 计算机相应被动悔棋
  chressBord[_compi][_compj] = 0 // 计算机，已占位置 还原
  minusStep(_compi, _compj) // 调用悔棋-销毁棋子函数
  for (var k = 0; k < count; k++) {
    // 将可能赢的情况都减1
    if (wins[_compi][_compj][k]) {
      computerWin[k]--
      myWin[k] = _myWin[i] // 这个位置我可能赢
    }
  }
  result_wrap.innerHTML = '**********人机大战五子棋**********'
  returnAble = true
  backAble = false
  // 撤销悔棋功能可用
  returnbtn.className = returnbtn.className.replace(
    new RegExp('(\\s|^)unable(\\s|$)'),
    ' ',
  ) // 选取含有unable首尾有空白符或者什么都没有的的字符串，^是取非，\\s匹配空白字符，$界定结束符，()子表达式被视为一个独立元素，|表示或
}

// 撤销悔棋
returnbtn.onclick = function (e) {
  // 撤销悔棋功能为假时不能撤销悔棋
  if (!returnAble) {
    return
  }
  // 我，撤销悔棋
  chressBord[_nowi][_nowj] = 1 // 我，已占位置
  oneStep(_nowi, _nowj, me)
  for (var k = 0; k < count; k++) {
    if (wins[_nowi][_nowj][k]) {
      myWin[k]++
      _compWin[k] = computerWin[k]
      computerWin[k] = 6 // 这个位置计算机不可能赢了
    }
    if (myWin[k] == 5) {
      result_wrap.innerHTML = '********** 你赢了 **********'
      over = true // 对局结束
    }
  }
  // 计算机相应被动撤销悔棋
  chressBord[_compi][_compj] = 2 // 计算机，已占位置
  oneStep(_compi, _compj, false)
  for (var k = 0; k < count; k++) {
    // 将可能赢的情况都减1
    if (wins[_compi][_compj][k]) {
      computerWin[k]++
      _myWin[k] = myWin[k]
      myWin[k] = 6 // 这个位置我不可能赢了
    }
    if (computerWin[k] == 5) {
      result_wrap.innerHTML = '********** 电脑获胜 **********'
      over = true // 对局结束
    }
  }
  returnbtn.className += ' ' + 'unable'
  returnAble = false
  backAble = true
}

// 计算机下棋
var computerAI = function () {
  var myScore = [] // 我的分数权值
  var computerScore = [] // 计算机分数权值
  var max = 0 // 分数权值比较的中间量
  var u = 0, // 计算机下棋的x坐标记录
    v = 0 // 计算机下棋的x坐标记录
  // 初始化数组
  for (var i = 0; i < 15; i++) {
    myScore[i] = []
    computerScore[i] = []
    for (var j = 0; j < 15; j++) {
      myScore[i][j] = 0
      computerScore[i][j] = 0
    }
  }
  // 计算机下棋坐标判断算法，通过分数权值的比较得出计算机的下棋落点坐标
  for (var i = 0; i < 15; i++) {
    for (var j = 0; j < 15; j++) {
      // 判断棋盘是否可下棋
      if (chressBord[i][j] == 0) {
        // 在实现四种赢法的过程中，实现循环
        for (var k = 0; k < count; k++) {
          // 判断我的赢法是否为四种赢法中的一种
          if (wins[i][j][k]) {
            // 判断我的赢法为四种赢法其中一种的第几步，则加上相对应的分数权值
            if (myWin[k] == 1) {
              myScore[i][j] += 200
            } else if (myWin[k] == 2) {
              myScore[i][j] += 400
            } else if (myWin[k] == 3) {
              myScore[i][j] += 2000
            } else if (myWin[k] == 4) {
              myScore[i][j] += 10000
            }
            // 判断计算机的赢法为四种赢法其中一种的第几步，则加上相对应的分数权值
            if (computerWin[k] == 1) {
              computerScore[i][j] += 220
            } else if (computerWin[k] == 2) {
              computerScore[i][j] += 420
            } else if (computerWin[k] == 3) {
              computerScore[i][j] += 2100
            } else if (computerWin[k] == 4) {
              computerScore[i][j] += 20000
            }
          }
        }
        // 判断我的分数权值最大的下棋落点，若大于max则赋值给max
        if (myScore[i][j] > max) {
          max = myScore[i][j]
          u = i
          v = j
        }
        // 判断我的分数权值最大的下棋落点，是否等于max
        else if (myScore[i][j] == max) {
          // 判断计算机的分数权值最大的下棋落点是否比我的分数权值最大的下棋落点要大
          if (computerScore[i][j] > computerScore[u][v]) {
            u = i
            v = j
          }
        }
        // 判断计算机的分数权值最大的下棋落点，若大于max则赋值给max
        if (computerScore[i][j] > max) {
          max = computerScore[i][j]
          u = i
          v = j
        }
        // 判断计算机的分数权值最大的下棋落点，是否等于max
        else if (computerScore[i][j] == max) {
          // 判断我的分数权值最大的下棋落点是否比计算机的分数权值最大的下棋落点要大
          if (myScore[i][j] > myScore[u][v]) {
            u = i
            v = j
          }
        }
      }
    }
  }
  _compi = u // 计算机下棋的x坐标
  _compj = v // 计算机下棋的y坐标
  oneStep(u, v, false) // // 调用绘制棋子函数，计算机下棋
  chressBord[u][v] = 2 // 计算机占据位置，赋值为2
  // 在实现四种赢法的过程中，实现循环
  for (var k = 0; k < count; k++) {
    if (wins[u][v][k]) {
      computerWin[k]++
      _myWin[k] = myWin[k]
      myWin[k] = 6 // 这个位置我不可能赢了
      if (computerWin[k] == 5) {
        result_wrap.innerHTML = '********** 电脑获胜 **********'
        over = true // 对局结束
      }
    }
  }
  // 若对局还没结束，将轮到我的回合
  if (!over) {
    me = !me
  }
  backAble = true
  returnAble = false
  // 定义局部变量hasClass匹配unable类名
  var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ') // test()方法用于检索字符串
  // 若没有检索到unable，则撤销悔棋变为不可用
  if (!hasClass) {
    returnbtn.className += ' ' + 'unable'
  }
}
伍嘉源
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html+css+js实现五子棋游戏
weixin_45791806的博客
09-14 627
五子棋游戏
用html+js实现五子棋游戏（人机对战）【建议收藏】
小魏快起床的博客
02-22 715
在前端如何创建一个五子棋盘，并实现人机对战，不要小瞧人机，你可能还赢不了，不信你来试试。
五子棋对战（网页版）
最新发布
weixin_44985964的博客
05-13 962
首先需要在数据库中创建一个新的表, 用来表示每个玩家的游戏房间编号，服务器把每一局对局, 玩家轮流落子的位置都记录下来(比如保存到一个文本文件中)，然后玩家可以选定某个曾经的比赛, 在页面上回放出对局的过程.在游戏大厅除了显示匹配按钮之外, 还能显示当前所有的对局房间，玩家可以选中某个房间, 以观众的形式加入到房间中. 同时能实时的看到选手的对局情况.在处理落子响应中要处理胜负手.在 Matcher 的构造方法中, 创建一个线程, 使用该线程扫描每个队列, 把每个队列的头两个元素取出来, 匹配到一组中.
HTML5 游戏开发实战 ｜ 五子棋
不断学习，不断进步，提高自己
07-04 2422
五子棋是一种家喻户晓的棋类游戏，它的多变吸引了无数的玩家。本章首先实现单机五子棋游戏(两人轮流下)，而后改进为人机对战版。整个游戏棋盘格数为 15×15，单击鼠标落子，黑子先落。在每次下棋子前，程序先判断该处有无棋子，有则不能落子，超出边界不能落子。任何一方有横向、竖向、斜向、反斜向连到 5 个棋子则胜利。
html制作好看的五子棋（源码）
xcLeigh
10-31 8407
html制作好看的五子棋,html制作五子棋对战源码,酷炫的界面效果,带AI,可本地双人一起玩,也可以单独跟AI单挑。代码内相关描述有备注,下面咋们一起来看看源码设计思路。
网页五子棋对战——SSM框架
zhaozhuyue的博客
07-08 1210
用户的注册和登录管理用户的天梯分数、比赛场数、获胜场数等信息依据用户的天梯积分，实现匹配机制把两个匹配到的玩家放到一个游戏房间中，双方通过网页的形式来进行对战比赛用到的关键技术点：我们之前学习过的服务器开发，主要是这样的模型：客户端主动向服务器发起请求，服务器收到之后，返回一个响应。如果客户端不主动发起请求，服务器是不能主动联系客户端的我们是否需要，服务器主动给客户端发消息这样的场景呢？需要！！“消息推送”当前已有的知识，主要是HTTP.HTTP自身难以实现这种消息推送效果的。
javascript五子棋人机对战
06-01
【javascript五子棋人机对战】项目是一个利用JavaScript实现的在线五子棋游戏，它包含人工智能（AI）模块，让玩家可以与计算机进行对战。这个项目可能是一个半成品，开发者试图通过不同的计算策略来优化游戏性能，...
js+canvas实现五子棋小游戏
10-15
在本文中，我们将深入探讨如何使用JavaScript和HTML5的Canvas API来实现一个五子棋小游戏。五子棋是一种双人对弈的策略游戏，目标是在棋盘上连成五个同色的棋子以获胜。通过JS和Canvas，我们可以创建一个交互式的...
JS+Canvas实现五子棋游戏
10-14
在本教程中，我们将探讨如何使用JavaScript（JS）和HTML5的Canvas API来实现一个五子棋游戏。五子棋是一种双人对弈的游戏，目标是先在棋盘上连成五子直线（水平、垂直或对角线）的一方获胜。 首先，我们需要创建...
五子棋纯html+jquery+js写法
03-11
在本项目中，"五子棋纯html+jquery+js写法"是一个使用HTML、JavaScript（JS）和jQuery实现的在线五子棋游戏。这个项目对于初学者来说是一个很好的学习资源，因为它展示了如何将这三个核心技术结合在一起，创建一个...
网页端的五子棋
12-14
3. **人机对弈**：实现人机对棋功能，需要编写AI算法，如简单的Minimax搜索或更复杂的Alpha-Beta剪枝算法，让计算机能够智能地选择下一步棋。 4. **用户反馈**：更新棋盘状态，显示落子动画，提供提示信息，如合法...
html5 canvas简单的五子棋小游戏代码
11-03
html5 canvas简单的五子棋小游戏代码 html5 canvas简单的五子棋小游戏代码
html实现五子棋
02-10
使用html和css实现五子棋 /**五子棋 * 思路： * 1.棋盘设置：使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件：当页面被点击时，获取点击的x,y像素点,根据此像素点进行判断，再在合适位置绘制黑白棋子，黑子棋子均是使用canvas绘制的 * 3.保存落子记录：将数据存入一个二维数组，x和y表是落子坐标，1为白棋，2为黑棋，0代表此处无棋子，只有没有棋子的才能落子 * 4.判断输赢：每次落子后以此坐标分别向左右，上下，右下，右上进行判断，设参数count，遇到同色棋子+1，遇到空格或不同色棋子终止，当count=5时，游戏结束 * 20150930 */ /**全局参数初始化
网页版人机交互五子棋
02-04
该五子棋是采用JavaScript脚本语言开发，利用了HTML5中的canvas标签，在人机交互环节采用了人工智能的相关算法。
html5五子棋
03-21
NULL 博文链接：https://bj-zhouhantao-163-com.iteye.com/blog/897542
HTML5网页版五子棋小游戏.zip
07-04
HTML5网页版五子棋小游戏通过原生js和canvas实现五子棋小游戏，可以试下左右手互搏。
基于 SpringBoot + MyBatis 的网页版五子棋对战
.很冷的博客
11-30 4115
游戏实现模块：登录模块、注册模块、匹配模块（游戏大厅）、对战模块（游戏房间）
前端小白写了个网页版五子棋游戏，使用原生 JS + Canvas 实现绘制棋子、棋盘
学前端的第五个月
05-13 2286
纯js文本编写的五子棋，可以悔棋，实现AI，该文本纯属分享，代码有什么不规范的地方请指点，大神多多指教
H5笔记1
08-08
HTML5+CSS3笔记班级：183110701学号：18311070114姓名：蔺明超目录 第一章 HTML5+CSS3网页设计概述 1 1.1 网页概述 1

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

伍嘉源

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值