• html+js+node实现五子棋线上对战,五子棋最简易算法


    首先附上我的github地址,https://github.com/jiangzhenfei/five,线上实例:http://47.93.103.19:5900/client/

    线上实例,你可以随意起用户名,房间号,然后让你同事或者自己再打开一个网页,输入任意用户名,但是房间号一样才可以进入同一个房间对战

    本地运行,拷贝代码,npm install依赖,进入server文件夹,执行 node index.js,然后直接在页面打开client里面的index.html文件夹即可

    详细的源码和解释都是在那里,本次实现的是五子棋线上对战,

    技术点:

    1.client/chess.js 该文件是五子棋算法,算法也很简单,棋盘的每一行个数一样,那么当你落子那一刻(左边为 x ),该左边边上的坐标都是知道的,比如我一行11个子,那么该落子右边为x+1,左边x-1,正头顶x-11,正下方x+11,左上x-10 ...,于是我们只要计算包括该落子在内的米子线上是否满足5个,下面我举一条线上算法,一条线上只要满足图中5个情况的一个即为该棋子赢了

    2.后端在server文件夹,使用socket.io长连接持续推送给前端,要点是使用发布订阅模式,订阅一个房间的用户,给该房间的用户信息同步。

    3.client/checkerboard.js 该文件是使用canvas绘制棋盘

    4.client/resolve.js 该文件是页面操作处理,包括进入房间,棋盘点击,棋子渲染

    5.server/index.js 该文件是后端处理,包括房间的订阅,房间信息的同步

    6.server/subscrible.js 该文件是发布订阅模式代码

  • 相关阅读:
    使用css制作三角
    BZOJ3029: 守卫者的挑战
    Codeforces 442B. Andrey and Problem
    嘴巴题8 BZOJ2318: Spoj4060 game with probability Problem
    嘴巴题7 BZOJ1426: 收集邮票
    嘴巴题6 BZOJ3450JoyOI1952 Easy
    BZOJ1453: [Wc]Dface双面棋盘
    BZOJ2957: 楼房重建
    BZOJ4515: [Sdoi2016]游戏
    BZOJ3679: 数字之积
  • 原文地址:https://www.cnblogs.com/zhenfei-jiang/p/9395722.html
Copyright © 2020-2023  润新知