欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用js canvas實(shí)現(xiàn)五子棋游戲

 更新時(shí)間:2020年10月11日 12:13:20   作者:weixin_51364599  
這篇文章主要為大家詳細(xì)介紹了利用js canvas實(shí)現(xiàn)五子棋游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了canvas實(shí)現(xiàn)五子棋游戲的具體代碼,供大家參考,具體內(nèi)容如下

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 //倍數(shù)
  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

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Bootstrap 過(guò)渡效果Transition 模態(tài)框(Modal)

    Bootstrap 過(guò)渡效果Transition 模態(tài)框(Modal)

    這篇文章主要介紹了Bootstrap 過(guò)渡效果Transition 模態(tài)框(Modal),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-03-03
  • JS實(shí)現(xiàn)json的序列化和反序列化功能示例

    JS實(shí)現(xiàn)json的序列化和反序列化功能示例

    這篇文章主要介紹了JS實(shí)現(xiàn)json的序列化和反序列化功能,結(jié)合具體實(shí)例形式分析了javascript針對(duì)json的序列化與反序列化相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
    2017-06-06
  • javascript中String對(duì)象的slice()方法分析

    javascript中String對(duì)象的slice()方法分析

    這篇文章主要介紹了javascript中String對(duì)象的slice()方法,以實(shí)例形式分析了slice()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2014-12-12
  • asp.net刷新本頁(yè)面的六種方法總結(jié)

    asp.net刷新本頁(yè)面的六種方法總結(jié)

    本篇文章主要是對(duì)asp.net刷新本頁(yè)面的六種方法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-01-01
  • 詳解嵌套命名空間在TypeScript中如何應(yīng)用

    詳解嵌套命名空間在TypeScript中如何應(yīng)用

    命名空間是TypeScript中非常有用的概念,可以幫助我們組織和管理代碼,避免命名沖突,下面小編就來(lái)和大家聊聊嵌套命名空間在TypeScript中是如何應(yīng)用的吧
    2023-06-06
  • JS前端圖片最優(yōu)化壓縮方案

    JS前端圖片最優(yōu)化壓縮方案

    這篇文章主要為大家介紹了JS前端圖片最優(yōu)化壓縮方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-09-09
  • JavaScript修剪字符串的方法和技巧

    JavaScript修剪字符串的方法和技巧

    你在?JavaScript?代碼編寫(xiě)中有遇到過(guò)一個(gè)你需要比較或操作處理字符串,但是在開(kāi)始或者結(jié)尾有額外空格的情況嗎?在這篇博客中,我將給你展示如何使用不同的方法在?JavaScript?中修剪字符串,需要的朋友可以參考下
    2024-02-02
  • JavaScript中實(shí)現(xiàn)繼承的三種方式和實(shí)例

    JavaScript中實(shí)現(xiàn)繼承的三種方式和實(shí)例

    這篇文章主要介紹了JavaScript中實(shí)現(xiàn)繼承的三種方式和實(shí)例,本文講解了類(lèi)式繼承、原型式繼承、使用擴(kuò)充方法實(shí)現(xiàn)多重繼承三種方式,需要的朋友可以參考下
    2015-01-01
  • js用正則表達(dá)式來(lái)驗(yàn)證表單(比較齊全的資源)

    js用正則表達(dá)式來(lái)驗(yàn)證表單(比較齊全的資源)

    在學(xué)習(xí)網(wǎng)頁(yè)中的表單驗(yàn)證,順便學(xué)習(xí)下正則表達(dá)式,在網(wǎng)上找了后發(fā)現(xiàn)了一個(gè)比較齊全的資源,稍微進(jìn)行了一下排版,喜歡的朋友可以收藏
    2013-11-11
  • Three.js的使用及繪制基礎(chǔ)3D圖形詳解

    Three.js的使用及繪制基礎(chǔ)3D圖形詳解

    這篇文章主要介紹了Three.js的使用及繪制基礎(chǔ)3D圖形的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考價(jià)值,需要的朋友們下面來(lái)一起看看吧。
    2017-04-04

最新評(píng)論