client端使用简单的h5+js实现了棋局的总体布局。 server端使用node的socket.io模块与客户端进行数据交互,棋子的落点和输赢校验均是在server端完成。
client端的界面这里就不做过多解释了,只要稍微懂点h5就可以自行去 下载源代码观看,因为今天的主题主要是socket.io这一块,所以本章只概述client和server是如何通过tcp连接进行交互的。
首先先带大家看一下目录结构
页面)
| index.html (是用户登陆界面)
| home.html (是用户大厅界面,用来匹配等待的 如果在线人数少于2人,则匹配失败,并会返回错误信息)
| game.html (client端程序的入口,内嵌iframe来显示各个页面,通过改变iframe的src属性,来达成伪页面跳转)
| img (图片资源文件夹)
| tou.jpg (棋盘界面用户的头像,因为登录界面只要输入用户名就可以开始游戏了,所以所有用户的头像都是一样的)
game.html主界面
<Meta charset="UTF-8">
Title