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

[stcasshern]

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

[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]

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