首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Game Engines
Unreal Engine
MyCryENGINE
V2EX  ›  游戏开发

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

  •  
  •   stcasshern · 2016-07-20 09:55:55 +08:00 · 4324 次点击
    这是一个创建于 1234 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    25 回复  |  直到 2016-07-20 17:16:10 +08:00
        1
    Imivan   2016-07-20 09:59:08 +08:00
    花样秀恩爱
        2
    coderluan   2016-07-20 09:59:30 +08:00
    不困难,可以试试现有的 h5 引擎
        3
    wenzichel   2016-07-20 10:01:20 +08:00
    其实这就相当于一个网页版的聊天系统+五子棋规则。

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

    难点就是双方之前的互相通信
        4
    GreatMartial   2016-07-20 10:06:14 +08:00 via Android
    微信里搜“微五子棋”,直接就能联网对战
        5
    zhouyg   2016-07-20 10:07:26 +08:00
    做过类似的,注意好 websocket 相关的编程就好了。
        6
    justfindu   2016-07-20 10:09:38 +08:00
    可是有 app 呀~
        7
    p1llar   2016-07-20 10:13:29 +08:00 via Android
        8
    luckyscript   2016-07-20 10:15:14 +08:00
    顺便做个五子棋 AI
        9
    stcasshern   2016-07-20 10:20:27 +08:00
    @coderluan @wenzichel @zhouyg @p1llar 多谢指点,打算先看下网页对战 AI 怎么实现的,多谢!
    @justfindu 并没有找到相关的。。。
    @GreatMartial 多谢= =发现真的是= =
        10
    mars0prince   2016-07-20 10:22:17 +08:00
    花式虐狗啊
        11
    GreatMartial   2016-07-20 10:22:48 +08:00 via Android
    @stcasshern 有空匹配对战一把,到现在我还没输过呢😅
        12
    tvallday   2016-07-20 10:23:25 +08:00
    这种游戏很简单的,不过等你做出来了她说不定移情别恋到别的游戏上了。
        13
    stcasshern   2016-07-20 10:26:10 +08:00
    @tvallday 那就当练手了哈哈
        15
    coderluan   2016-07-20 10:49:25 +08:00   ♥ 2
    楼主你逗我,对战游戏你看什么 AI...
        16
    tangzx   2016-07-20 10:52:05 +08:00 via iPhone
    @coderluan 我喜欢 coop 胜过对战,能攀比又不伤感情
        17
    learnshare   2016-07-20 10:52:24 +08:00
    单机版我已经做出来了,联机版可以在这个基础上搞一搞
    https://github.com/learnshare/wuziqi
        18
    learnshare   2016-07-20 10:56:12 +08:00
    @learnshare 上图

        19
    0x5010   2016-07-20 11:17:33 +08:00
    @learnshare 棋一般是落在十字不是格子内, 黑白棋才是放在格子内的
        20
    learnshare   2016-07-20 11:19:41 +08:00
    @0x5010 只是个 demo ,不要太在乎细节 :)
        21
    Eymard   2016-07-20 11:26:53 +08:00
    微信里有现成的公众号提供这种服务啊 还能玩你画我猜 = =
        22
    xieguanglei   2016-07-20 11:32:52 +08:00
    很简单,都不用自己架服务器,用一些简单的实时云服务(比如 V2 右边广告位总是向我推荐的「野狗后端云」)就可以完成。

    我写过一个 [小 demo]( https://xieguanglei.github.io/code-whiteboard/),可以多人远程在同一块白板上写代码的,就是用的这个「野狗后端云」,挺好用的还。
        23
    stcasshern   2016-07-20 11:43:01 +08:00
    多谢各位,虽然已经找到解决办法了哈哈,但还是决定自己搞一搞
        24
    coderluan   2016-07-20 17:13:48 +08:00
    刚才闲着无论,用 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
        25
    coderluan   2016-07-20 17:16:10 +08:00
    不用一个小时就写完了,这类引擎现学现用的话,我感觉一天也足够了。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4167 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 25ms · UTC 08:33 · PVG 16:33 · LAX 00:33 · JFK 03:33
    ♥ Do have faith in what you're doing.