前端小白想写一个网页对战五子棋游戏

[stcasshern]

RT ，想法来自和 gf 聊天，因为异地，她想玩五子棋，但是找了半天没找到那种支持网页版联机对战的，当然什么 qq 游戏大厅这种可以，但是只为了一个五子棋就下载 qq 太过于浪费，而且得一直带着电脑。 所以现在想法就是自己写一个网页五子棋，双方随机生成两个匹配码，输入对方的码就可以连接对战，嗯，大概想法是这样，不知道这个网页实现困不困难，打算有空做出来。

[Imivan]

花样秀恩爱

[coderluan]

不困难，可以试试现有的 h5 引擎

[wenzichel]

其实这就相当于一个网页版的聊天系统+五子棋规则。

1. 可以创建房间，并可以配对
2. 将你的棋子位置传送给对方的浏览器（ websocket ）
3. 使用五子棋的规则判定双方谁赢

难点就是双方之前的互相通信

[GreatMartial]

微信里搜“微五子棋”，直接就能联网对战

[zhouyg]

做过类似的，注意好 websocket 相关的编程就好了。

[justfindu]

可是有 app 呀~

[p1llar]

socket.io

[luckyscript]

顺便做个五子棋 AI

[stcasshern]

@coderluan @wenzichel @zhouyg @p1llar 多谢指点，打算先看下网页对战 AI 怎么实现的，多谢！
@justfindu 并没有找到相关的。。。
@GreatMartial 多谢= =发现真的是= =

[mars0prince]

花式虐狗啊

[GreatMartial]

@stcasshern 有空匹配对战一把，到现在我还没输过呢😅

[tvallday]

这种游戏很简单的，不过等你做出来了她说不定移情别恋到别的游戏上了。

[stcasshern]

@tvallday 那就当练手了哈哈

[justfindu]

https://itunes.apple.com/cn/app/qq-wu-zi-qi/id874153886?mt=8

[coderluan]

楼主你逗我，对战游戏你看什么 AI...

[tangzx]

@coderluan 我喜欢 coop 胜过对战，能攀比又不伤感情

[learnshare]

单机版我已经做出来了，联机版可以在这个基础上搞一搞
https://github.com/learnshare/wuziqi

[learnshare]

@learnshare 上图

[0x5010]

@learnshare 棋一般是落在十字不是格子内, 黑白棋才是放在格子内的

[learnshare]

@0x5010 只是个 demo ，不要太在乎细节 :)

[Eymard]

微信里有现成的公众号提供这种服务啊 还能玩你画我猜 = =

[xieguanglei]

很简单，都不用自己架服务器，用一些简单的实时云服务（比如 V2 右边广告位总是向我推荐的「野狗后端云」）就可以完成。

我写过一个 [小 demo]( https://xieguanglei.github.io/code-whiteboard/)，可以多人远程在同一块白板上写代码的，就是用的这个「野狗后端云」，挺好用的还。

[stcasshern]

多谢各位，虽然已经找到解决办法了哈哈，但还是决定自己搞一搞

[coderluan]

刚才闲着无论，用 LayaAir 帮楼主写了个三子棋
没优化数据结构和算法，没添加网络功能， LayaAir 也有现成的网络通信接口，懒的加了。
楼主随便看看，了解到这个很简单就行了。

var flag = 0;//用来决定谁先手
var pause = false;

var block = [[], [], []];

for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
block[i][j] = new Laya.Sprite();
Laya.stage.addChild(block[i][j]);
block[i][j].pos(i * 200, j * 200);
block[i][j].size(200, 200);
block[i][j].graphics.drawRect(0, 0, 200, 200, "white", "black", 3);//画格子
block[i][j].piece = -1;//-1 未放置棋子， 0 放置圈， 1 放置叉
block[i][j].on(Laya.Event.CLICK, this, function (e) {

if (e.target.piece == -1&&!pause) {//确保格子未放棋子
e.target.piece = flag;
if (flag) {
e.target.graphics.drawLine(20, 20, 180, 180, "black", 5);//画叉
e.target.graphics.drawLine(20, 180, 180, 20, "black", 5);//画叉
}
else {
e.target.graphics.drawCircle(100, 100, 80, "white", "black", 5);//画圈
}

//判断游戏结果，偷懒:-D ，用枚举
for (var i = 0; i < 3; i++) {
if (block[i][0].piece == 0 && block[i][1].piece == 0 && block[i][2].piece == 0) { logo.text = "Circle win!!!"; pause = true; }
if (block[i][0].piece == 1 && block[i][1].piece == 1 && block[i][2].piece == 1) { logo.text = "Cross win!!!"; pause = true; }
}

for (var j = 0; j < 3; j++) {
if (block[0][j].piece == 0 && block[1][j].piece == 0 && block[2][j].piece == 0) { logo.text = "Circle win!!!"; pause = true; }
if (block[0][j].piece == 1 && block[1][j].piece == 1 && block[2][j].piece == 1) { logo.text = "Cross win!!!"; pause = true; }
}

if (block[0][0].piece == 0 && block[1][1].piece == 0 && block[2][2].piece == 0) { logo.text = "Circle win!!!"; pause = true; }
if (block[2][0].piece == 0 && block[1][1].piece == 0 && block[0][2].piece == 0) { logo.text = "Circle win!!!"; pause = true; }

if (block[0][0].piece == 1 && block[1][1].piece == 1 && block[2][2].piece == 1) { logo.text = "Cross win!!!"; pause = true; }
if (block[2][0].piece == 1 && block[1][1].piece == 1 && block[0][2].piece == 1) { logo.text = "Cross win!!!"; pause = true; }

flag = !flag;//换人
}
}
)
}
}

在线地址 http://www.coderluan.com/gameluan/TicTacToe.html

[coderluan]

不用一个小时就写完了，这类引擎现学现用的话，我感觉一天也足够了。