JS+Canvas实现五子棋游戏


Posted in Javascript onAugust 26, 2020

本文实例为大家分享了JS+Canvas实现五子棋游戏的具体代码,供大家参考,具体内容如下

布局+样式部分代码 :

<style type='text/css'>
 canvas {
  display: block;
  margin: 50px auto;
  box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
  cursor: pointer;
 }

 .btn-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
 }

 .btn-wrap div {
  margin: 0 10px;
 }

 div>span {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #EE82EE;
  border-radius: 5px;
  cursor: pointer;
 }
 
 div.unable span {
  background: #D6D6D4;
  color: #adacaa;
 }
 
 #result-wrap {
  text-align: center;
 }
 </style>
 
 <h3 id="result-wrap">--五子棋--</h3>
 <canvas id="chess" width="450px" height="450px"></canvas>
 <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>

js部分代码:

<script>
 var over = false;
 var me = true; //我 
 var _nowi = 0, _nowj = 0; //记录自己下棋的坐标 
 var _compi = 0, _compj = 0; //记录计算机当前下棋的坐标 
 var _myWin = [], _compWin = []; //记录我,计算机赢的情况 
 var backAble = false, returnAble = false;
 var resultTxt = document.getElementById('result-wrap');
 var chressBord = [];//棋盘 
 for (var i = 0; i < 15; i++) {
  chressBord[i] = [];
  for (var j = 0; j < 15; j++) {
  chressBord[i][j] = 0;
  }
 }
 //赢法的统计数组 
 var myWin = [];
 var computerWin = [];
 //赢法数组 
 var wins = [];
 for (var i = 0; i < 15; i++) {
  wins[i] = [];
  for (var j = 0; j < 15; j++) {
  wins[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++) {
   wins[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++) {
   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++;
  }
 }
 // debugger; 
 for (var i = 0; i < count; i++) {
  myWin[i] = 0;
  _myWin[i] = 0;
  computerWin[i] = 0;
  _compWin[i] = 0;
 }
 var chess = document.getElementById("chess");
 var context = chess.getContext('2d');
 context.strokeStyle = '#bfbfbf'; //边框颜色 
 var backbtn = document.getElementById("goback");
 var returnbtn = document.getElementById("return");
 window.onload = function () {
  drawChessBoard(); // 画棋盘 
 }
 document.getElementById("restart").onclick = function () {
  window.location.reload();
 }
 // 我,下棋 
 chess.onclick = function (e) {
  if (over) {
  return;
  }
  if (!me) {
  return;
  }
  // 悔棋功能可用 
  backbtn.className = backbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
  var x = e.offsetX;
  var y = e.offsetY;
  var i = Math.floor(x / 30);
  var j = Math.floor(y / 30);
  _nowi = i;
  _nowj = j;
  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]) {
   // debugger; 
   myWin[k]++;
   _compWin[k] = computerWin[k];
   computerWin[k] = 6;//这个位置对方不可能赢了 
   if (myWin[k] == 5) {
    // window.alert('你赢了'); 
    resultTxt.innerHTML = '恭喜,你赢了!';
    over = true;
   }
   }
  }
  if (!over) {
   me = !me;
   computerAI();
  }
  }
 }
 // 悔棋 
 backbtn.onclick = function (e) {
  if (!backAble) { return; }
  over = false;
  me = true;
  // resultTxt.innerHTML = 'o(?□?)o,悔棋中'; 
  // 撤销悔棋功能可用 
  returnbtn.className = returnbtn.className.replace(new RegExp("(\\s|^)unable(\\s|$)"), " ");
  // 我,悔棋 
  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];//这个位置对方可能赢 
  }
  }
  resultTxt.innerHTML = '益智五子棋';
  returnAble = true;
  backAble = false;
 }
 // 撤销悔棋 
 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) {
   resultTxt.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) {
   resultTxt.innerHTML = '计算机赢了,继续加油哦!';
   over = true;
  }
  }
  returnbtn.className += ' ' + 'unable';
  returnAble = false;
  backAble = true;
 }
 // 计算机下棋 
 var computerAI = function () {
  var myScore = [];
  var computerScore = [];
  var max = 0;
  var 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 (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;
    }
    }
   }

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

   }
  }
  }
  _compi = u;
  _compj = v;
  oneStep(u, v, false);
  chressBord[u][v] = 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) {
   resultTxt.innerHTML = '计算机赢了,继续加油哦!';
   over = true;
   }
  }
  }
  if (!over) {
  me = !me;
  }
  backAble = true;
  returnAble = false;
  var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ');
  if (!hasClass) {
  returnbtn.className += ' ' + 'unable';
  }
 }
 //绘画棋盘 
 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();
 }
 //销毁棋子 
 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.stroke();
 } 
</script>

更多有趣的经典小游戏实现专题,分享给大家:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
基于jQuery拖拽事件的封装
Nov 29 jQuery
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 #Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 #Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
Aug 25 #Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 #Javascript
prettier自动格式化去换行的实现代码
Aug 25 #Javascript
Vue中 axios delete请求参数操作
Aug 25 #Javascript
React实现轮播效果
Aug 25 #Javascript
You might like
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php通过各种函数判断0和空
2020/07/04 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
js的2种继承方式详解
2014/03/04 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
2015/11/24 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Linux下多个Python版本安装教程
2018/08/15 Python
详解python中的模块及包导入
2019/08/30 Python
Python换行与不换行的输出实例
2020/02/19 Python
Python网页解析器使用实例详解
2020/05/30 Python
python如何编写win程序
2020/06/08 Python
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
小学毕业感言150字
2014/02/05 职场文书
安卓程序员求职信
2014/02/28 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
英语教师个人工作总结
2015/02/09 职场文书
2015年工商所工作总结
2015/05/21 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle