利用js canvas实现五子棋游戏


Posted in Javascript onOctober 11, 2020

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

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>
</head>
<body style="margin: 0;">
  <canvas style="margin-left: 20px;" id="five"></canvas>
  <h1 style="font-size: 40px;font-weight: bolder;margin-left: 200px;margin-top: 0;margin-bottom: 0;">五子棋</h1>
  <h2 style="font-size: 40px;font-weight: bolder;margin-left: 200px;margin-top: 0;" id="currole">轮到:黑</h2>
  <div id="res" style="font-size: 40px;font-weight: bolder;margin-left: 200px;">胜者:</div>
</body>
<script>
  let cav = document.getElementById('five')
  let ctx = cav.getContext('2d')
  let k = 50 //倍数
  let r = k/4
  cav.width = cav.height = 16*k
  ctx.strokeStyle="#000000";
  for(let i = 0;i<15;i++){
    ctx.beginPath();
    ctx.moveTo((i+1)*k,k);
    ctx.lineTo((i+1)*k,15*k);
    ctx.stroke();
  }
  for(let i = 0;i<15;i++){
    ctx.beginPath();
    ctx.moveTo(k,(i+1)*k);
    ctx.lineTo(15*k,(i+1)*k);
    ctx.stroke();
  }
  function initer(event){
    let x = event.offsetX - k
    let y = event.offsetY - k
    let xclose = close(x,0,14)
    let yclose = close(y,0,14)
    let nodearr = []
    let minxd = Math.abs(x-xclose[0]*k)<Math.abs(x-xclose[1]*k)?
      Math.abs(x-xclose[0]*k)<r?xclose[0]*k:undefined
      :
      Math.abs(x-xclose[1]*k)<r?xclose[1]*k:undefined
    let maxyd = Math.abs(y-yclose[0]*k)<Math.abs(y-yclose[1]*k)?
    Math.abs(y-yclose[0]*k)<r?yclose[0]*k:undefined
    :
    Math.abs(y-yclose[1]*k)<r?yclose[1]*k:undefined
    if((minxd!==undefined)&&(maxyd!==undefined)){
      nodearr = [minxd,maxyd]
    }
    if(nodearr.length!==0){
      setNode(nodearr)
    }
  }
  cav.addEventListener("click",initer)
  function close(coo,lort,rorb){
    coo<0?coo=0:coo=coo
    coo>14*k?coo=14*k:coo=coo
    let dect = rorb - lort
    if(dect===1){
      return [lort,rorb]
    }else{
      if(coo<(lort+Math.ceil(dect/2))*k){
        let nlort=lort
        let nrorb=lort+Math.ceil(dect/2)
        return close(coo,nlort,nrorb)
      }else{
        let nlort=lort+Math.ceil(dect/2)
        let nrorb=rorb
        return close(coo,nlort,nrorb)
      }
    }
  }
  let colorflag = 0
  function setNode(arr){
    if(gomoku[arr[0]/k][arr[1]/k]!==undefined){
      return
    }
    if(colorflag===0){
      ctx.fillStyle="black"
      ctx.beginPath();
      ctx.arc(arr[0]+k,arr[1]+k,r,0,2*Math.PI);
      ctx.stroke();
      ctx.fill();
      checkFinish([arr[0]/k,arr[1]/k])
      gomoku[arr[0]/k][arr[1]/k] = colorflag
      colorflag = 1
      document.getElementById('currole').innerHTML="轮到:白"
    }else{
      ctx.fillStyle="white"
      ctx.beginPath();
      ctx.arc(arr[0]+k,arr[1]+k,r,0,2*Math.PI);
      ctx.stroke();
      ctx.fill();
      checkFinish([arr[0]/k,arr[1]/k])
      gomoku[arr[0]/k][arr[1]/k] = colorflag
      colorflag = 0
      document.getElementById('currole').innerHTML="轮到:黑"
    }
  }

</script>
<script src="./five.js"></script>
</html>

外部js文件部分

let gomoku = new Array(15)
for(let i = 0;i<gomoku.length;i++){
  gomoku[i]=new Array(15)
}
//black 0 white 1

function checkFinish(curnode){
  for(let i =0;i<4;i++){
    let totalLength = 1
    let aflag = true
    let bflag = true
    for(let j=0;j<4;j++){
      let dictNum = j+1
      switch(i){
        case 0:
          if(aflag){
            (gomoku[curnode[0]+dictNum][curnode[1]]===colorflag)
            &&((curnode[0]+dictNum)<=14)?
            totalLength++:aflag=false
          }
          if(bflag){
            (gomoku[curnode[0]-dictNum][curnode[1]]===colorflag)
            &&((curnode[0]-dictNum)>=0)?
            totalLength++:bflag=false
          }
          break;
        case 1:
          if(aflag){
            (gomoku[curnode[0]][curnode[1]+dictNum]===colorflag)
            &&((curnode[1]+dictNum)<=14)?
            totalLength++:aflag=false
          }
          if(bflag){
            (gomoku[curnode[0]][curnode[1]-dictNum]===colorflag)
            &&((curnode[1]-dictNum)>=0)?
            totalLength++:bflag=false
          }
          break;
        case 2:
          if(aflag){
            (gomoku[curnode[0]+dictNum][curnode[1]+dictNum]===colorflag)
            &&((curnode[1]+dictNum)<=14)
            &&((curnode[0]+dictNum)<=14)?
            totalLength++:aflag=false
          }
          if(bflag){
            (gomoku[curnode[0]-dictNum][curnode[1]-dictNum]===colorflag)
            &&((curnode[1]-dictNum)>=0)
            &&((curnode[0]-dictNum)>=0)?
            totalLength++:bflag=false
          }
          break;
        case 3:
          if(aflag){
            (gomoku[curnode[0]+dictNum][curnode[1]-dictNum]===colorflag)
            &&((curnode[1]-dictNum)>=0)
            &&((curnode[0]+dictNum)<=14)?
            totalLength++:aflag=false
          }
          if(bflag){
            (gomoku[curnode[0]-dictNum][curnode[1]+dictNum]===colorflag)
            &&((curnode[1]+dictNum)<=14)
            &&((curnode[0]-dictNum)>=0)?
            totalLength++:bflag=false
          }
          break;
      }
      if(totalLength>=5){
        if(colorflag===0){
          document.getElementById('res').innerHTML='胜者:黑方'
          cav.removeEventListener("click",initer)
        }else{
          document.getElementById('res').innerHTML='胜者:白方'
          cav.removeEventListener("click",initer)
        }
        break;
      }
      if((aflag===false)&&(bflag===false)){
        break;
      }
    }
    if(totalLength>=5){
      break;
    }
  }
}
//all work and no play makes jack a dull boy

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

Javascript 相关文章推荐
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
ReactNative页面跳转实例代码
Sep 27 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
javascript实现简易计算器
Feb 01 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 #Javascript
原生js生成图片验证码
Oct 11 #Javascript
js实现石头剪刀布游戏
Oct 11 #Javascript
js+h5 canvas实现图片验证码
Oct 11 #Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 #Javascript
如何手写简易的 Vue Router
Oct 10 #Javascript
如何手写一个简易的 Vuex
Oct 10 #Javascript
You might like
DC这些乐高系列动画电影你看过几部?
2020/04/09 欧美动漫
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
PHP中文汉字验证码
2007/04/08 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JavaScript实现换肤功能
2017/09/15 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
北大自主招生自荐信
2013/10/19 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
机电专业求职信
2014/06/14 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
opencv检测动态物体的实现
2021/07/21 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python