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

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

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

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

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

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

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

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

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