js小游戏 - 五子棋人机

最新推荐文章于 2022-07-29 16:46:07 发布
最新推荐文章于 2022-07-29 16:46:07 发布
阅读量782 收藏
点赞数 1
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1036548849/article/details/106502342
版权

github地址
在线地址

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="" type="image/x-icon" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    canvas {
      display: block;
      margin: 50px auto;
      box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
    }
  </style>
  <title>五子棋</title>
</head>

<body>
  <canvas id='chess' width="450px" height="450px"></canvas>
</body>
<script>
  var me = true;
  var over = false;
  var chessBoard = [];
  //赢法数组
  var win = [];
  //赢法统计数组
  var myWin = [];
  var computerWin = [];

  for (var i = 0; i < 15; i++) {
    chessBoard[i] = [];
    for (var j = 0; j < 15; j++) {
      chessBoard[i][j] = 0;
    }
  }
  for (var i = 0; i < 15; i++) {
    win[i] = [];
    for (var j = 0; j < 15; j++) {
      win[i][j] = [];
    }
  }

  var count = 0;
  //横线赢法
  for (var i = 0; i < 15; i++) {
    for (var j = 0; j < 11; j++) {
      for (var k = 0; k < 5; k++) {
        win[i][j + k][count] = true;
      }
      count++;
    }
  }
  //竖线赢法
  for (var i = 0; i < 15; i++) {
    for (var j = 0; j < 11; j++) {
      for (var k = 0; k < 5; k++) {
        win[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++) {
        win[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++) {
        win[i + k][j - k][count] = true;
      }
      count++;
    }
  }
  console.log(count)
  //初始化统计数组
  for (var i = 0; i < count; i++) {
    myWin[i] = 0;
    computerWin[i] = 0;
  }
  var chess = document.getElementById('chess');
  var context = chess.getContext('2d');
  context.strokeStyle = '#bfbfbf';

  var logo = new Image();
  logo.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAAAA' +
    'AAeW/F+AAAACXBIWXMAAAABAAAAAQBPJcTWAAAC2UlEQVR4nG3SW0hTcRwH8ANTKF8qEHro' +
    'tYdE0IzKCEHxRaGsEJ+iIDAwwzKMIoQMBcOSbJSXlHCpxNS5LW9tznk9m+6W2/RMNzebcxd' +
    'd3nbXec7/t/5T0CZ9X87//D/8/5zf73eICE7IbjSY1lDkMCG3a303uiAAQjMiAZtd1Txq90I' +
    '0jM/A+8rlj82FAAjwDvWUFlQ2NgvGedQ++3vJvvp3xYXfhwNAMBODGUWC6ZVVy6IjjKKM3Ba' +
    'z3TpWl9EsYwiH+kXmoAPvI4eaJOd3fXNqvZMG2FM9u0M6iRnLtTItVsYw0VJY2NhfWV9cIaGw' +
    'e9vSpmcJhe5CrQufNfJvJ7BYZ2t667JOXOSYEKCBdLGSUFBJb1cBlvi5caz4uMQSz9z7M6y0' +
    'njVAwvTRSUJhulSmoa0995Nvvmmqk6spjZpdlJ0v2VzjpMonCK3pRhZP3PSg2hokS3U7Yi1X0' +
    '6FcK8lv/3nvilZNOBWvE66XJH0Mg4X7xTxjXHC1f1YFV9LPXz39hHQRjFz5MDE+cx2X69/orBqf' +
    'Dw68qg2hmpPnHpNKhgCfVMO9y8Ht8DltNflUmLHdqgiAuYCvJoO4qeCbHGqxYNYtIrfJGgYka1' +
    'lGaKRrYTfac1yzt3sbwNO4GJ1HwI922rrUrlXeFhww/Ondgw0hhcsHfceoKqAXDMmm8NUHHBYbKH' +
    'GtBDGIhlaOaF7jcWln94e3z2b2t3K5VorbbA25Z1tlOyGwKo/Yv7TavWLn0oDCM78BtmnGKn' +
    'QfMY7AxnDt+Gkno6NdF0xBDEsooBoc+MNles+mSS4VMDG8MAwwIsKLHVXfkFz6aT32dEgYAEuTFP' +
    '8FtNsgV0pQLINJhZC1XGmHrabq57otOMaMbhl5X+Y99cGer38XjjPQNh+S52WraHPnj/8w4JYFGz7ktF' +
    '7OccJ/GGf7lyglhXXqkR4dcuTfMA5OanJa7uLhRixHIrTFuOykD1//Ao5d36oMbdkaAAAAAElFTkSuQmCC';
  logo.onload = function () {
    context.drawImage(logo, 150, 150, 150, 150);
    drawChessBoard();
  }

  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();
    }
  }

  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(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0)
    if (me) {
      gradient.addColorStop(0, '#0A0A0A');
      gradient.addColorStop(1, '#636766');
    } else {
      gradient.addColorStop(0, '#D1D1D1');
      gradient.addColorStop(1, '#F9F9F9');
    }
    context.fillStyle = gradient;
    context.fill();
  }

  chess.onclick = function (e) {
    //如果结束不生效
    if (over) {
      return
    }
    //如果不是我的回合结束
    if (!me) {
      return
    }
    //获取点击位置
    var i = Math.floor(e.offsetX / 30);
    var j = Math.floor(e.offsetY / 30);
    //判断是否已经有棋子
    if (chessBoard[i][j] == 0) {
      //画棋子
      oneStep(i, j, me);
      //记录我的棋子
      chessBoard[i][j] = 1;
      //判断点击位置所有赢法
      for (var k = 0; k < count; k++) {
        //第k种赢法上新增了一个子
        if (win[i][j][k]) {
          //k种赢法上一共的子数
          myWin[k]++;
          computerWin[k] = 6;
          if (myWin[k] == 5) {
            setTimeout(function () {
              window.alert("你赢了!!");
            })
            over = true;
          }
        }
      }
      if (!over) {
        me = !me
        computerAI()
      }
    }
  }

  var computerAI = function () {
    var myScore = [];
    var computerScore = [];
    var max = 0, u = 0, v = 0;

    //初始化每个可落子位置的权重
    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 (chessBoard[i][j] == 0) {
          //遍历整个赢法数组
          for (var k = 0; k < count; k++) {
            if (win[i][j][k]) {
              //统计我方第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
              }
              //统计计算机方第k种赢法已有颗子则加上相应权重分
              if (computerWin[k] == 1) {
                computerScore[i][j] += 200
              } else if (computerWin[k] == 2) {
                computerScore[i][j] += 400
              } else if (computerWin[k] == 3) {
                computerScore[i][j] += 2000
              } else if (computerWin[k] == 4) {
                computerScore[i][j] += 20000
              }
            }
          }

          if (myScore[i][j] > max) {
            max = myScore[i][j]
            u = i;
            v = j;
          } else if (myScore[i][j] == max) {
            if (computerScore[i][j] > computerScore[u][v]) {
              u = i;
              v = j;
            }
          }
          if (computerScore[i][j] > max) {
            max = computerScore[i][j]
            u = i;
            v = j;
          } else if (computerScore[i][j] == max) {
            if (myScore[i][j] > myScore[u][v]) {
              u = i;
              v = j;
            }
          }
        }
      }
    }

    oneStep(u, v, false);
    chessBoard[u][v] = 2;
    //判断点击位置所有赢法
    for (var k = 0; k < count; k++) {
      //第k种赢法上新增了一个子
      if (win[u][v][k]) {
        //k种赢法上一共的子数
        computerWin[k]++;
        myWin[k] = 6;
        if (computerWin[k] == 5) {
          setTimeout(function () {
            window.alert("你输了!!");
          })
          over = true;
        }
      }
    }
    if (!over) {
      me = !me
    }
  }
</script>

</html>
Z网球
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java五子棋（人机版），昨天买的棋子今天就用不上了
编程界明世隐的博客
07-20 5万+
作者简介 作者名：编程界明世隐 简介：CSDN博客专家，从事软件开发多年，精通Java、JavaScript，博主也是从零开始一步步把学习成长、深知学习和积累的重要性，喜欢跟广大ADC一起打野升级，欢迎您关注，期待与您一起学习、成长、起飞！ 系列项目 1. Java俄罗斯方块 2. 老Java程序员花2天写了个连连看 3. 老Java程序员花一天时间写了个飞机大战 4. Java植物大战僵尸 5. Java消消乐（天天爱消除） 6. Java贪吃蛇小游戏 7. Java扫雷小游戏 8. Java坦克大战
js 实现ai五子棋人机大战
yw_hard的博客
12-01 1245
实现原理就是计算五子棋所有赢的种类，利用canvas实现五子棋排版落子。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
用js写的简便五子棋（含人机）
09-13
用js写的简便五子棋（含人机用到了三维数组）,希望对大家会有帮助！
JavaScript 五子棋人机大战
12-23
前端 JavaScript 五子棋人机大战，三子之前机器人下子随机，三子过后，机器人带有攻击性
JS五子棋之人机对战
ccxcuixia
01-31 904
JavaScript实现人机大战五子棋9*9 文章目录 1. 效果图 2. UI篇 3. AI篇 4. 参考视频 1.效果图 先来看看最终实现的效果吧！ 胜利显示： 2.UI篇 主要是使用canvas绘制棋盘以及棋子 canvas绘制棋盘 for(var i=0;i<9;i++) { //横线 //开始一条路径，移动到位置 (24 + i *50, 24), 创建到达位置(...
AI五子棋_人机对战_js源码
12-31
html实现简单的五子棋人机对战，单机游戏，JavaScript源码
js实现AI五子棋人机大战
10-15
主要为大家详细介绍了js实现AI五子棋人机大战，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
五子棋游戏-uniapp-源码
04-11
这是一个uniapp应用项目源码完整，是下五子棋的单机游戏，通过HBuilder X开发工具选uniapp方式打开，uniapp项目可编译发行跨端应用（包括了各种小程序以及APP），可编译正常运行，适合新手入门参考学习。 相关指导...
网页版五子棋人机对战 源码.zip
最新发布
05-28
网页版五子棋人机对战源码是一个基于HTML的小游戏项目，主要涉及的技术栈包括HTML、CSS和JavaScript。此项目旨在实现一个用户友好的在线五子棋游戏平台，允许玩家与计算机进行对战，体验五子棋的乐趣。在这款游戏中...
微信小程序五子棋打谱及人机对战源码
03-19
微信小程序五子棋打谱及人机对战源码是一个基于微信小程序开发的五子棋游戏应用，提供了玩家之间的对战以及与计算机智能AI的对弈功能。此项目是完整的，可以直接运行，对于想要学习微信小程序开发或者游戏逻辑实现的...
js五子棋，纯属自编，未实现人机对战，自娱自乐
02-26
自编自乐，技术不佳，未实现人机对战，主要以为懒得去想算法了， 也不愿意用网上的算法，没意义。 如有雷同，纯属抄袭。
JavaScript - 人工智能 五子棋AI篇
06-10
人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。阿尔法围棋（AlphaGo）是第一个击败人类职业围棋选手、第一个战胜围棋世界冠军的人工智能程序。让人工智能闻名天下。本课程则是使用JavaScript语言为五子棋编写人工智能，从无到有，一点一滴的感受人工智能的魅力。
五子棋人机对战_原生JS+Canvas实现五子棋游戏
weixin_39654352的博客
12-18 150
原生JS+Canvas实现五子棋游戏效果图 主要功能模块为： 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二、代码详解2.1 人机对战功能实现从效果图可以看到，棋盘的横竖可以放的位置为15*15，通过canvas画棋盘： 知道格子数后，我们先看五子棋有多少种赢法： 根据赢法总数定义分别保存计算机和人赢法的数组： 然后就是人开始下棋： oneStep() 方法为落子，要在棋盘上画一个棋子： 接着...
原生js完成的五子棋人机大战
m0_64804076的博客
07-29 1434
本系统是以java作为基础实现的，利用VisualStudioCode软件开发一个页面简洁的人机对战五子棋游戏，本系统采用html语言，使用css技术对界面进行了美化，再通过JavaScript创建电脑对象、棋子对象等等一系列对象让游戏贯穿起来，使其得以运行。游戏利用红黑两色棋子，实现双方的棋子区别，在程序能够在下子处重复下子时提醒，随时保存游戏，ai根据当前形势进行判断下子，判断胜负。五子棋作为中国古代的传统黑白棋种之一，有着广泛的群众基础，是一种老少皆宜的棋类休闲游戏。...
html实现五子棋游戏
路在前方
10-31 5601
实现代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>五子棋</title> <style type='text/css'> canvas { display: block; margin: 50px
JavaScript实现简单人机五子棋
starstasts的博客
04-10 1454
稍微给自己总结一下上周做的事情： first,根据视频和资料学习了bootstrap,现在回想起来，只记得 响应式 布局 这点了，这周打算找些网页和实例来巩固一下. then, 正在学习jQuery… Last，在慕课网上按照教学视频 完成了稍有趣的一个游戏，五子棋。 主要用到和学到的知识点有： 简单的html和css；html5中的canvas; javascript和一点算法； 以
HTML五子棋 JS实现人机对战
qq_28371343的博客
12-03 1391
该页面实现可变棋盘大小、人人对战、人机对战、机机对战，有权值算法日志，可继续调整算法
前端实现五子棋小游戏2（AI实现人机对战）
热门推荐
weixin_44584059的博客
08-23 1万+
通过一个简单的算法，来实现AI智能对弈的五子棋小游戏AI难点解析赢法数组赢法的统计数组判断胜负计算机的落子规则代码实现赢法数组赢法种类的索引横线赢法竖线赢法横线赢法斜线赢法反斜线赢法赢法的统计数组定义函数computerAI（）实现电脑对弈遍历棋盘与所有赢法，对黑棋/白棋落子行为进行加分记录并选出最高分数，即为获胜整体代码htmlCSSscript.js AI难点解析 赢法数组 三维数组，前两维是棋盘，第三维是赢法数组；每一种赢法对应一个二维棋盘，上面或许只有5个点是true，这5个点一定连成一条线 赢法的
electron安装+vue实现录屏的的demo
Z网球的博客
05-09 7658
github地址：https://github.com/zengwangqiu/electron-vue 安装electron最好采用cnpm 主进程 main/index.ts import path from "path"; import window from "./window"; import { dialog, app, ipcMain, globalShortcut, Notification, shell, screen } from "electron"; let mainWindow:
c++小游戏五子棋人机代码
09-04
这样，人机对战的五子棋游戏就可以开始了。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [C++五子棋人机对战]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值