48.帮学弟做题--WebSocket和Vue的五子棋 about cc HOT 29 OPEN

厉害了office哥，不过还有优化空间，棋子加上渐变、棋盘四周搞上跑马灯、出棋发出拔剑的声音基本就差不多了。

from cc.

厉害了我的天

from cc.

既然vue提供了mvvm的思路，
那么维护 一个vue数组就好，数据模型同步到view上面，

const map = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];

from cc.

牛逼

from cc.

厉害了我的哥

from cc.

吊炸天！！

from cc.

一个字，吊

from cc.

好玩好玩

from cc.

相当6，咳咳

from cc.

厉害厉害，学习了！

from cc.

献上膝盖

from cc.

你好，仔细学习了一下你的源码，感觉你的思路好清晰。我自己实现的时候，我发觉对于斜线的分析还是有一些吃力，这种思维方面的训练有好的推荐吗？基础不是很好，这是我的弱项。还有一个小疑问就是这种判断的算法其实不是最优的对吗？比如说，我现在把棋盘扩大，其实我只是需要判断以落子的位置以最大可能为5的范围来判断就行，是吗？

from cc.

@cangku
训练的话 建议你去做做 leetcode 上面的题目 绝大多数都可用js实现 顺带着去看看算法和数据结构，算法的思维还是个长时间慢慢的积累的东西

关于落子的判断范围，其实可以做到5次最少判断的，就是需要考虑更多的情况，尤其是在边界上的判断，这就需要更详细的算法了。因为实际情况下棋盘也不是很大，以现在的算法对性能影响微乎其微，所以也没做优化了。

from cc.

@ccforward 好的，谢谢

from cc.

厉害了我的哥，献上膝盖的同时，推荐其它vue的实例,http://www.17shulihua.com/archives/category/frontend-demo/vue-demo

from cc.

66

from cc.

PS：你的判断输赢逻辑有bug吧，[2][4],[3][3],[4][2],[5][1],[6][0]不会判断为赢

from cc.

厉害，值得学习。

from cc.

厉害了我的哥

from cc.

demo挂了

from cc.

@hejingscu

demo地址是 http://ccforward.github.io/game/chess/chess.html

我这没问题 能给个截图看看嘛

from cc.

厉害了我的哥！

from cc.

可联机demo 4个文件拷到本地文件夹 然后npm install下载之后 再node socket.js 发现跑不起来啊 题主能说说怎么在本地跑吗 漏了什么 http://localhost:8888/ 打不开无法运行啊

from cc.

@shacai

不要访问 http://localhost:8888/

应该访问 chess-connect.html

from cc.

@ccforward 但是访问 chess-connect.html 打开这个页面是一片空白啊...

from cc.

@shacai

你看看源码 里面两个外部js文件的引用方式没有加 schema

你改成自己本地的服务器访问或者给两个外部的js 加上 http:

from cc.

@ccforward 真的是 谢谢大神指点 原来是没有加 http: 难怪空白

from cc.

大神很厉害啊！不过有 BUG：

from cc.

厉害，思路好清晰...自己的五子棋拖了很久也没把联机功能加上，不过这里的五子棋是用canvas画的，当时还用了vue，然后用canvas画的话..基本也展现不出vue的优点了...

from cc.