利用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 相关文章推荐
document.all与WEB标准
May 13 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
react 原生实现头像滚动播放的示例
Apr 21 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
PHP 简单日历实现代码
2009/10/28 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php配置php-fpm启动参数及配置详解
2013/11/04 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php自定义分页类完整实例
2015/12/25 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
微信小程序开发探究
2016/12/27 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
JavaScript时间与时间戳的转换操作实例分析
2018/12/07 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
python两种遍历字典(dict)的方法比较
2014/05/29 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
校园十大歌手策划书
2014/02/01 职场文书
团委工作总结2015
2015/04/02 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
解除处分决定书
2015/06/25 职场文书
研讨会致辞
2015/07/31 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL