| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 2590 人关注过本帖, 1 人收藏
标题:替汁儿妹妹Javascript版块造势--HTML5之五子棋设计初步
只看楼主 加入收藏
wmf2014
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
等 级:贵宾
威 望:216
帖 子:2039
专家分:11273
注 册:2014-12-6
结帖率:100%
收藏(1)
已结贴  问题点数:20 回复次数:11 
替汁儿妹妹Javascript版块造势--HTML5之五子棋设计初步
汁儿妹妹为振兴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> 

图片附件: 游客没有浏览图片的权限,请 登录注册

搜索更多相关主题的帖子: 360浏览器 HTML5 五子棋游戏 title 黑白 
2015-06-01 14:05
wp231957
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:神界
等 级:贵宾
威 望:423
帖 子:13688
专家分:53332
注 册:2012-10-18
收藏
得分:7 
厉害

DO IT YOURSELF !
2015-06-01 14:07
wp231957
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:神界
等 级:贵宾
威 望:423
帖 子:13688
专家分:53332
注 册:2012-10-18
收藏
得分:0 
c代码下  cui或者gui 能实现类似的界面吗

DO IT YOURSELF !
2015-06-01 14:21
wmf2014
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
等 级:贵宾
威 望:216
帖 子:2039
专家分:11273
注 册:2014-12-6
收藏
得分:0 
回复 3楼 wp231957
当然可以,只要有作图引擎及资料,写这些都是小儿科了,可惜我还只会简单的c控制台程序设计,看到那些什么申请画布、属性方法等头就大,智商严重缺乏。汗~~~~~~

能编个毛线衣吗?
2015-06-01 14:56
wp231957
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:神界
等 级:贵宾
威 望:423
帖 子:13688
专家分:53332
注 册:2012-10-18
收藏
得分:0 
最关键的还是算法吧   我看有的象棋软件  把级别调整到大师级   那一步都得用时很长时间  计算机才能走一步  但是一般的菜鸟还真下不过计算机

DO IT YOURSELF !
2015-06-01 14:58
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8078
专家分:6657
注 册:2005-11-7
收藏
得分:0 
嘻嘻,谢谢wmf2014,加个精先

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-06-01 16:20
wmf2014
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
等 级:贵宾
威 望:216
帖 子:2039
专家分:11273
注 册:2014-12-6
收藏
得分:0 
现在可以判断输赢了,接下来会是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> 


能编个毛线衣吗?
2015-06-02 23:26
tlliqi
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
等 级:贵宾
威 望:204
帖 子:15453
专家分:65956
注 册:2006-4-27
收藏
得分:7 
学习
2015-06-03 08:23
冰镇柠檬汁儿
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:北京
等 级:版主
威 望:120
帖 子:8078
专家分:6657
注 册:2005-11-7
收藏
得分:0 
太厉害了,wmf2014你还说你没怎么用过javascript,这么厉害,瞎谦虚啥

本来无一物,何处惹尘埃
It is empty at all here, Why pm 2.5 is so TMD high!
2015-06-03 11:32
wmf2014
Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19Rank: 19
等 级:贵宾
威 望:216
帖 子:2039
专家分:11273
注 册:2014-12-6
收藏
得分:0 
哪有啊,不过javascript是类c格式,所以写起来还比较好入手。其实我根本不知道document有哪些属性方法,你看关键部分都是你的定义。不过,不管用什么语言,只要有实例和部分文档,我还是比较有信心很快写一些简单应用的。

能编个毛线衣吗?
2015-06-03 15:12
快速回复:替汁儿妹妹Javascript版块造势--HTML5之五子棋设计初步
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.025291 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved