利用js canvas实现五子棋游戏

今天带来利用js canvas实现五子棋游戏教程详解

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

html部分




  
  
  
  
  Document


  
  
  

五子棋

轮到:黑

胜者:

外部js文件部分

let gomoku = new Array(15)
for(let i = 0;i
  
   =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
  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学php网。


以上就是关于利用js canvas实现五子棋游戏全部内容,感谢大家支持自学php网。
返回顶部
跳到底部

Copyright 2011-2024 南京追名网络科技有限公司 苏ICP备2023031119号-6 乌徒帮 All Rights Reserved Powered by Z-BlogPHP Theme By open开发

请先 登录 再评论,若不是会员请先 注册