[源码]一个网页版的纯js写的五子棋

qiaoge--- 2014-03-25 10:25:25

加精

怎么做高手给点思路。。。。或者给个链接，，，主要是图怎么画（就和咱们下的一样），

...全文

10502 63 打赏收藏转发到动态举报

写回复

用AI写文章

63 条回复

切换为时间正序

请发表友善的回复…

发表回复

Program_the_ape_ 2016-08-06

打赏
举报

引用 16 楼 zhangxiaojie0321 的回复:

[quote=引用 14 楼 defonds 的回复:] [quote=引用 12 楼 zhangxiaojie0321 的回复:]


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        var canvas;
        var context;
        var isWhite = true;//设置是否该轮到白棋
        var isWell = false;//设置该局棋盘是否赢了，如果赢了就不能再走了
        var img_b = new Image();
        img_b.src = "images/b.png";//白棋图片
        var img_w = new Image();
        img_w.src = "images/w.png";//黑棋图片

        var chessData = new Array(15);//这个为棋盘的二维数组用来保存棋盘信息，初始化0为没有走过的，1为白棋走的，2为黑棋走的
        for (var x = 0; x < 15; x++) {
            chessData[x] = new Array(15);
            for (var y = 0; y < 15; y++) {
                chessData[x][y] = 0;
            }
        }

        function drawRect() {//页面加载完毕调用函数，初始化棋盘
            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");

            for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线
                context.beginPath();
                context.moveTo(0, i);
                context.lineTo(640, i);
                context.closePath();
                context.stroke();

                context.beginPath();
                context.moveTo(i, 0);
                context.lineTo(i, 640);
                context.closePath();
                context.stroke();
            }
        }
        function play(e) {//鼠标点击时发生
            var x = parseInt((e.clientX - 20) / 40);//计算鼠标点击的区域，如果点击了（65，65），那么就是点击了（1，1）的位置
            var y = parseInt((e.clientY - 20) / 40);

            if (chessData[x][y] != 0) {//判断该位置是否被下过了
                alert("你不能在这个位置下棋");
                return;
            }

            if (isWhite) {
                isWhite = false;
                drawChess(1, x, y);
            }
            else {
                isWhite = true;
                drawChess(2, x, y);
            }

        }
        function drawChess(chess, x, y) {//参数为，棋（1为白棋，2为黑棋），数组位置
            if (isWell == true) {
                alert("已经结束了，如果需要重新玩，请刷新");
                return;
            }
            if (x >= 0 && x < 15 && y >= 0 && y < 15) {
                if (chess == 1) {
                    context.drawImage(img_w, x * 40 + 20, y * 40 + 20);//绘制白棋
                    chessData[x][y] = 1;
                }
                else {
                    context.drawImage(img_b, x * 40 + 20, y * 40 + 20);
                    chessData[x][y] = 2;
                }
                judge(x, y, chess);
            }
        }
        function judge(x, y, chess) {//判断该局棋盘是否赢了
            var count1 = 0;
            var count2 = 0;
            var count3 = 0;
            var count4 = 0;

            //左右判断
            for (var i = x; i >= 0; i--) {
                if (chessData[i][y] != chess) {
                    break;
                }
                count1++;
            }
            for (var i = x + 1; i < 15; i++) {
                if (chessData[i][y] != chess) {
                    break;
                }
                count1++;
            }
            //上下判断
            for (var i = y; i >= 0; i--) {
                if (chessData[x][i] != chess) {
                    break;
                }
                count2++;
            }
            for (var i = y + 1; i < 15; i++) {
                if (chessData[x][i] != chess) {
                    break;
                }
                count2++;
            }
            //左上右下判断
            for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count3++;
            }
            for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count3++;
            }
            //右上左下判断
            for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count4++;
            }
            for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count4++;
            }

            if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
                if (chess == 1) {
                    alert("白棋赢了");
                }
                else {
                    alert("黑棋赢了");
                }
                isWell = true;//设置该局棋盘已经赢了，不可以再走了
            }
        }
    </script>
</head>
<body onload="drawRect()">
    <div>
        <canvas width="640" id="canvas" onmousedown="play(event)" height="640">你的浏览器不支持HTML5 canvas  ，请使用 google chrome 浏览器 打开.
        </canvas>
    </div>

</body>
</html>

由于公司网限制，图片上传不了。代码可以直接运行，只需要找两张棋子的图片，黑棋b.png 白棋w.png

感谢老兄分享源码，推荐了[/quote] 太有用啦，谢谢啊！

qq_35747643 2016-07-30

打赏
举报

我在楼主的代码基础上增加了先后手提醒和悔棋的功能和大家一起分享

dai_mo 2016-01-18

打赏
举报

学习了

qq_29829169 2015-12-11

打赏
举报

谢谢你的源代码学习学习

艺俊 2015-10-11

打赏
举报

好厉害~正在学习JS~学习了~

种个小果园 2015-10-09

打赏
举报

太厉害了

xfzzf 2014-05-08

打赏
举报

不错.

鸥翔鱼游1 2014-04-28

打赏
举报

且学且珍惜，得认学习真正消化

xiaoxiangqing 2014-04-01

打赏
举报

据说有人纯 js 写出来一个魔兽-->不可能吧

bbjiabcd 2014-04-01

打赏
举报

引用 29 楼 zhouren1314 的回复:

[quote=引用 22 楼 zhulin2012 的回复:] 测试了一下可以

高手。。现在 js刚刚学会了你这种写法。但是还是不熟悉。。。能推荐几本书，或者资料什么的学习学习，然后在试试写东西我刚试了试。。。你这算法是怎么实现的。。。怎么我赢不了他（本来就下的不好。。）

[/quote]

第一次就赢了

itzgs 2014-04-01

打赏
举报

高大上，必须顶一个。

blueink_200451 2014-03-30

打赏
举报

绯阳 2014-03-30

打赏
举报

引用 16 楼 zhangxiaojie0321 的回复:

[quote=引用 14 楼 defonds 的回复:] [quote=引用 12 楼 zhangxiaojie0321 的回复:]


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        var canvas;
        var context;
        var isWhite = true;//设置是否该轮到白棋
        var isWell = false;//设置该局棋盘是否赢了，如果赢了就不能再走了
        var img_b = new Image();
        img_b.src = "images/b.png";//白棋图片
        var img_w = new Image();
        img_w.src = "images/w.png";//黑棋图片

        var chessData = new Array(15);//这个为棋盘的二维数组用来保存棋盘信息，初始化0为没有走过的，1为白棋走的，2为黑棋走的
        for (var x = 0; x < 15; x++) {
            chessData[x] = new Array(15);
            for (var y = 0; y < 15; y++) {
                chessData[x][y] = 0;
            }
        }

        function drawRect() {//页面加载完毕调用函数，初始化棋盘
            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");

            for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线
                context.beginPath();
                context.moveTo(0, i);
                context.lineTo(640, i);
                context.closePath();
                context.stroke();

                context.beginPath();
                context.moveTo(i, 0);
                context.lineTo(i, 640);
                context.closePath();
                context.stroke();
            }
        }
        function play(e) {//鼠标点击时发生
            var x = parseInt((e.clientX - 20) / 40);//计算鼠标点击的区域，如果点击了（65，65），那么就是点击了（1，1）的位置
            var y = parseInt((e.clientY - 20) / 40);

            if (chessData[x][y] != 0) {//判断该位置是否被下过了
                alert("你不能在这个位置下棋");
                return;
            }

            if (isWhite) {
                isWhite = false;
                drawChess(1, x, y);
            }
            else {
                isWhite = true;
                drawChess(2, x, y);
            }

        }
        function drawChess(chess, x, y) {//参数为，棋（1为白棋，2为黑棋），数组位置
            if (isWell == true) {
                alert("已经结束了，如果需要重新玩，请刷新");
                return;
            }
            if (x >= 0 && x < 15 && y >= 0 && y < 15) {
                if (chess == 1) {
                    context.drawImage(img_w, x * 40 + 20, y * 40 + 20);//绘制白棋
                    chessData[x][y] = 1;
                }
                else {
                    context.drawImage(img_b, x * 40 + 20, y * 40 + 20);
                    chessData[x][y] = 2;
                }
                judge(x, y, chess);
            }
        }
        function judge(x, y, chess) {//判断该局棋盘是否赢了
            var count1 = 0;
            var count2 = 0;
            var count3 = 0;
            var count4 = 0;

            //左右判断
            for (var i = x; i >= 0; i--) {
                if (chessData[i][y] != chess) {
                    break;
                }
                count1++;
            }
            for (var i = x + 1; i < 15; i++) {
                if (chessData[i][y] != chess) {
                    break;
                }
                count1++;
            }
            //上下判断
            for (var i = y; i >= 0; i--) {
                if (chessData[x][i] != chess) {
                    break;
                }
                count2++;
            }
            for (var i = y + 1; i < 15; i++) {
                if (chessData[x][i] != chess) {
                    break;
                }
                count2++;
            }
            //左上右下判断
            for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count3++;
            }
            for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count3++;
            }
            //右上左下判断
            for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count4++;
            }
            for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count4++;
            }

            if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
                if (chess == 1) {
                    alert("白棋赢了");
                }
                else {
                    alert("黑棋赢了");
                }
                isWell = true;//设置该局棋盘已经赢了，不可以再走了
            }
        }
    </script>
</head>
<body onload="drawRect()">
    <div>
        <canvas width="640" id="canvas" onmousedown="play(event)" height="640">你的浏览器不支持HTML5 canvas  ，请使用 google chrome 浏览器 打开.
        </canvas>
    </div>

</body>
</html>

由于公司网限制，图片上传不了。代码可以直接运行，只需要找两张棋子的图片，黑棋b.png 白棋w.png

感谢老兄分享源码，推荐了[/quote] 呵呵。客气客气[/quote]

乔不思 2014-03-30

打赏
举报

引用 47 楼 xzy88 的回复:

[quote=引用 29 楼 zhouren1314 的回复:] [quote=引用 22 楼 zhulin2012 的回复:] 测试了一下可以

[/quote] 这个很好赢啊，稍认真点下就赢了，只相当于其它一些五子棋初步水准吧，一些五子棋的单机版，大师级的，真的很难赢，算不过电脑，走错一步就输了，没走错，最后也挺多是平局。[/quote] 我的水准打不到啊

乔不思 2014-03-30

打赏
举报

引用 19 楼 aspwebchh 的回复:

http://chhblog.com/upload/1/files/games/gobang-1.1-beta/gobang.html

这么吊，，佩服

loobyboy1 2014-03-29

打赏
举报

正在学习js中。

网络科技 2014-03-29

打赏
举报

引用 29 楼 zhouren1314 的回复:

[quote=引用 22 楼 zhulin2012 的回复:] 测试了一下可以

[/quote] 这个很好赢啊，稍认真点下就赢了，只相当于其它一些五子棋初步水准吧，一些五子棋的单机版，大师级的，真的很难赢，算不过电脑，走错一步就输了，没走错，最后也挺多是平局。

final7tifa 2014-03-27

打赏
举报

引用 12 楼 zhangxiaojie0321 的回复:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        body {
            margin: 10px;
        }
    </style>
    <script type="text/javascript">
        var canvas;
        var context;
        var isWhite = true;//设置是否该轮到白棋
        var isWell = false;//设置该局棋盘是否赢了，如果赢了就不能再走了
        var img_b = new Image();
        img_b.src = "images/b.png";//白棋图片
        var img_w = new Image();
        img_w.src = "images/w.png";//黑棋图片

        var chessData = new Array(15);//这个为棋盘的二维数组用来保存棋盘信息，初始化0为没有走过的，1为白棋走的，2为黑棋走的
        for (var x = 0; x < 15; x++) {
            chessData[x] = new Array(15);
            for (var y = 0; y < 15; y++) {
                chessData[x][y] = 0;
            }
        }

        function drawRect() {//页面加载完毕调用函数，初始化棋盘
            canvas = document.getElementById("canvas");
            context = canvas.getContext("2d");

            for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线
                context.beginPath();
                context.moveTo(0, i);
                context.lineTo(640, i);
                context.closePath();
                context.stroke();

                context.beginPath();
                context.moveTo(i, 0);
                context.lineTo(i, 640);
                context.closePath();
                context.stroke();
            }
        }
        function play(e) {//鼠标点击时发生
            var x = parseInt((e.clientX - 20) / 40);//计算鼠标点击的区域，如果点击了（65，65），那么就是点击了（1，1）的位置
            var y = parseInt((e.clientY - 20) / 40);

            if (chessData[x][y] != 0) {//判断该位置是否被下过了
                alert("你不能在这个位置下棋");
                return;
            }

            if (isWhite) {
                isWhite = false;
                drawChess(1, x, y);
            }
            else {
                isWhite = true;
                drawChess(2, x, y);
            }

        }
        function drawChess(chess, x, y) {//参数为，棋（1为白棋，2为黑棋），数组位置
            if (isWell == true) {
                alert("已经结束了，如果需要重新玩，请刷新");
                return;
            }
            if (x >= 0 && x < 15 && y >= 0 && y < 15) {
                if (chess == 1) {
                    context.drawImage(img_w, x * 40 + 20, y * 40 + 20);//绘制白棋
                    chessData[x][y] = 1;
                }
                else {
                    context.drawImage(img_b, x * 40 + 20, y * 40 + 20);
                    chessData[x][y] = 2;
                }
                judge(x, y, chess);
            }
        }
        function judge(x, y, chess) {//判断该局棋盘是否赢了
            var count1 = 0;
            var count2 = 0;
            var count3 = 0;
            var count4 = 0;

            //左右判断
            for (var i = x; i >= 0; i--) {
                if (chessData[i][y] != chess) {
                    break;
                }
                count1++;
            }
            for (var i = x + 1; i < 15; i++) {
                if (chessData[i][y] != chess) {
                    break;
                }
                count1++;
            }
            //上下判断
            for (var i = y; i >= 0; i--) {
                if (chessData[x][i] != chess) {
                    break;
                }
                count2++;
            }
            for (var i = y + 1; i < 15; i++) {
                if (chessData[x][i] != chess) {
                    break;
                }
                count2++;
            }
            //左上右下判断
            for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count3++;
            }
            for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count3++;
            }
            //右上左下判断
            for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count4++;
            }
            for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
                if (chessData[i][j] != chess) {
                    break;
                }
                count4++;
            }

            if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
                if (chess == 1) {
                    alert("白棋赢了");
                }
                else {
                    alert("黑棋赢了");
                }
                isWell = true;//设置该局棋盘已经赢了，不可以再走了
            }
        }
    </script>
</head>
<body onload="drawRect()">
    <div>
        <canvas width="640" id="canvas" onmousedown="play(event)" height="640">你的浏览器不支持HTML5 canvas  ，请使用 google chrome 浏览器 打开.
        </canvas>
    </div>

</body>
</html>

由于公司网限制，图片上传不了。代码可以直接运行，只需要找两张棋子的图片，黑棋b.png 白棋w.png

非常感谢，对我这种从没搞过游戏开发但感兴趣的人非常有帮助

唯有努力 2014-03-27