注册 登录
编程论坛 → JavaScript论坛

替汁儿妹妹Javascript版块造势--HTML5之五子棋设计初步

wmf2014 发布于 2015-06-01 14:05， 2590 次点击
汁儿妹妹为振兴Javascript版而呕心沥血，实在令人钦佩。在汁儿妹妹的带动下，认真拜读汁儿妹妹近期所发的代码，发现HTML5之Javascript功能着实强大，为帮Javascript版块造势，特奉上五子棋游戏初步代码，所谓初步，就是画了棋盘，能下黑白子，没有判断胜负，不能自动走子，只起个抛砖引玉的作用，献丑了（360浏览器运行）：
程序代码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www. <meta charset="utf-8" />
    <title>五子棋</title>
</head>
<body>
    <canvas width="616" height="616" style="background-color:#A0A000;" id="am"></canvas>
    <script>
        var ostart=20,oend=596,gc=document.getElementById('am').getContext('2d'),qj=new Array(361),zc=-1;
        var mousexy=document.getElementById("am");  //用于鼠标点击坐标计算
        window.document.onmousedown=mouseDown;      //激活鼠标点击事件，为程序设计标准起见，建议放到后面执行（编译类型程序需要，否则必须前面声明）
        function drawqp()
        {//画棋盘
          var i,j,k;
          j=(oend-ostart)/18;
          gc.strokeStyle="#000000";
          gc.lineWidth=1;
          for(i=0;i<19;i++)
          {
            gc.moveTo(ostart+i*j,ostart);
            gc.lineTo(ostart+i*j,oend);   //画竖线
            gc.moveTo(ostart,ostart+i*j);
            gc.lineTo(oend,ostart+i*j);   //画横线
            gc.stroke();
          }
          for(i=3;i<=15;i+=6)
          {
            for(k=3;k<=15;k+=6)
            {
              gc.beginPath();
              gc.arc(ostart+i*j,ostart+k*j,5,0,2*3.14);
              gc.fill();   //画星位
            }
          }
        }
        function drawqz(x,y,c)
        {//画棋子，x/y为棋盘上坐标0-18，c为子色，-1黑棋，1白棋，0无棋子
          var i,j,ci,co,hls,hle,sls,sle,x1,y1,r,qz;
          j=(oend-ostart)/18;r=j*0.5-2;
          x1=x*j+ostart;y1=y*j+ostart;
          ci='rgb(250,250,250)';co='rgb(200,200,200)';
          if(c<0){ci='rgb(100,100,100)';co='rgb(20,20,20)';}
          if(c)
          {//画棋子
            gc.beginPath();
            gc.arc(x1,y1,r,0,2*3.14);
            qz=gc.createRadialGradient(x1,y1,0,x1,y1,r);
            qz.addColorStop(0, ci);
            qz.addColorStop(1, co);
            gc.fillStyle = qz;
            gc.fill();  //画棋子
            //gc.strokeStyle = 'rgb(255,255,255)';
            //gc.stroke();  //棋子勾白边
          }
          else
          {//消棋子
            hls=x1-r;hle=x1+r;sls=y1-r;sle=y1+r;
            gc.clearRect(hls,hls,2*r,2*r);
            if(!x)hls=x1;
            if(!y)sls=y1;
            if(x==18)hle=x1;
            if(y==18)sle=y1;
            //五子棋只处理走子，无需消棋子，后面的恢复线、星位的画图不处理，如编走围棋时在做处理
          }
        }
        function mouseDown()
        {
          if (event.button)return;   //非鼠标左键退出
          var b = mousexy.getBoundingClientRect(),x,y,x1,y1,i,j,k;
          j=(oend-ostart)/18
          x=event.x-b.left-ostart;
          y=event.y-b.top-ostart;  //获取鼠标在canvas标签里坐标
          if(x%j>10)x=x+2*(j-x%j);
          if(y%j>10)y=y+2*(j-y%j);
          x1=x%j;y1=y%j;
          if(x1<10&&y1<10)
          {//鼠标点击在下子的范围,处理下子
            x=parseInt(x/j);y=parseInt(y/j);
            drawqz(x,y,zc);
            zc*=-1;
          }
        }
        drawqp();
    </script>
</body>
</html>

只有本站会员才能查看附件，请 登录

11 回复
#2
wp2319572015-06-01 14:07
厉害
#3
wp2319572015-06-01 14:21
c代码下  cui或者gui 能实现类似的界面吗
#4
wmf20142015-06-01 14:56
回复 3楼 wp231957
当然可以，只要有作图引擎及资料，写这些都是小儿科了，可惜我还只会简单的c控制台程序设计，看到那些什么申请画布、属性方法等头就大，智商严重缺乏。汗~~~~~~
#5
wp2319572015-06-01 14:58
最关键的还是算法吧   我看有的象棋软件  把级别调整到大师级   那一步都得用时很长时间  计算机才能走一步  但是一般的菜鸟还真下不过计算机
#6
冰镇柠檬汁儿2015-06-01 16:20
嘻嘻，谢谢wmf2014，加个精先
#7
wmf20142015-06-02 23:26
现在可以判断输赢了，接下来会是AI部分，我会闭门造车一个算法，什么剪枝、二叉树我不懂的，不过递归可能要用。下面的代码可以自己跟自己走了,请有兴趣的检测是否有错：

------
程序代码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www. <meta charset="utf-8" />
    <title>五子棋</title>
</head>
<body>
    <canvas width="616" height="616" style="background-color:#A0A000;" id="am"></canvas>
    <script>
        var ostart=20,oend=596,gc=document.getElementById('am').getContext('2d'),qj=new Array(361),zc=-1,runflg=0;
        var mousexy=document.getElementById("am");  //用于鼠标点击坐标计算
        window.document.onmousedown=mouseDown;      //激活鼠标点击事件，为程序设计标准起见，建议放到后面执行（编译类型程序需要，否则必须前面声明）
        function drawqp()
        {//画棋盘
          var i,j,k;
          for(i=0;i<361;i++)qj[i]=0;
          j=(oend-ostart)/18;
          gc.strokeStyle="#000000";
          gc.lineWidth=1;
          for(i=0;i<19;i++)
          {
            gc.moveTo(ostart+i*j,ostart);
            gc.lineTo(ostart+i*j,oend);   //画竖线
            gc.moveTo(ostart,ostart+i*j);
            gc.lineTo(oend,ostart+i*j);   //画横线
            gc.stroke();
          }
          for(i=3;i<=15;i+=6)
          {
            for(k=3;k<=15;k+=6)
            {
              gc.beginPath();
              gc.arc(ostart+i*j,ostart+k*j,5,0,2*3.14);
              gc.fill();   //画星位
            }
          }
        }
        function drawqz(x,y,c)
        {//画棋子，x/y为棋盘上坐标0-18，c为子色，-1黑棋，1白棋，0无棋子
          var i,j,ci,co,hls,hle,sls,sle,x1,y1,r,qz;
          j=(oend-ostart)/18;r=j*0.5-2;
          x1=x*j+ostart;y1=y*j+ostart;
          ci='rgb(250,250,250)';co='rgb(200,200,200)';
          if(c<0){ci='rgb(100,100,100)';co='rgb(20,20,20)';}
          if(c)
          {//画棋子
            gc.beginPath();
            gc.arc(x1,y1,r,0,2*3.14);
            qz=gc.createRadialGradient(x1,y1,0,x1,y1,r);
            qz.addColorStop(0, ci);
            qz.addColorStop(1, co);
            gc.fillStyle = qz;
            gc.fill();  //画棋子
          }
          else
          {//消棋子
            //五子棋只处理走子，无需消棋子，如编走围棋程序时在做处理
          }
        }
        function testwin(fqj,c)
        {//判断赢棋
          var i,j,k,l,x,y;
          for(l=0;l<361;l++)
          {
            if(fqj[l]==c)
            {
              i=parseInt(l/19);j=l%19;
              for(x=j,k=0,y=i;x<19&&fqj[y*19+x]==c;x++,k++);
              for(x=j,y=i;x>=0&&fqj[y*19+x]==c;x--,k++);  //横向棋子数目判断
              if(k>5)return 1;
              for(x=j,k=0,y=i;y<19&&fqj[y*19+x]==c;y++,k++);
              for(x=j,y=i;y>=0&&fqj[y*19+x]==c;y--,k++);  //竖向棋子数目判断
              if(k>5)return 1;
              for(x=j,k=0,y=i;x<19&&y<19&&fqj[y*19+x]==c;x++,y++,k++);
              for(x=j,y=i;x>=0&&y>=0&&fqj[y*19+x]==c;x--,y--,k++);  //左上右下斜向棋子数目判断
              if(k>5)return 1;
              for(x=j,k=0,y=i;x>=0&&y<19&&fqj[y*19+x]==c;x--,y++,k++);
              for(x=j,y=i;x<19&&y>=0&&fqj[y*19+x]==c;x++,y--,k++);  //右上左下斜向棋子数目判断
              if(k>5)return 1;
            }
          }
          return 0;
        }
        function mouseDown()
        {
          if (event.button||runflg)return;   //非鼠标左键退出
          var b = mousexy.getBoundingClientRect(),x,y,x1,y1,i,j,k;
          j=(oend-ostart)/18
          x=event.x-b.left-ostart;
          y=event.y-b.top-ostart;  //获取鼠标在canvas标签里坐标
          if(x%j>10)x=x+2*(j-x%j);
          if(y%j>10)y=y+2*(j-y%j);
          x1=x%j;y1=y%j;
          if(x1<10&&y1<10)
          {//鼠标点击在下子的范围,处理下子
            x=parseInt(x/j);y=parseInt(y/j);
            i=x*19+y;
            if(qj[i])alert("该位置有子，不能下棋");
            else
            {
              drawqz(x,y,zc);
              qj[i]=zc;
              if(testwin(qj,zc))
              {
                if(zc<0)alert("黑棋赢，继续游戏请刷新！");
                else
                  alert("白棋赢，继续游戏请刷新！");
                runflg=1;
                return ;
              }
              zc*=-1;
            }
          }
        }
        drawqp();
    </script>
</body>
</html>

#8
tlliqi2015-06-03 08:23
学习
#9
冰镇柠檬汁儿2015-06-03 11:32
太厉害了，wmf2014你还说你没怎么用过javascript，这么厉害，瞎谦虚啥
#10
wmf20142015-06-03 15:12
哪有啊，不过javascript是类c格式，所以写起来还比较好入手。其实我根本不知道document有哪些属性方法，你看关键部分都是你的定义。不过，不管用什么语言，只要有实例和部分文档，我还是比较有信心很快写一些简单应用的。
#11
冰镇柠檬汁儿2015-06-03 16:52
反正你是高手，我比不了
#12
醒山2015-08-19 09:45
给楼主点个赞
1
©2025, BC-CN.NET
电脑版