五子棋online---React.js+Socket.io+Node.js

本文介绍了作者使用React.js、Socket.io和Node.js实现五子棋在线对战的过程。首先,作者完成了React的单机版五子棋,随后通过Socket.io将其升级为联机对战版。在开发中,作者遇到了React编译问题并分享了解决方案,同时提供了后台Node.js简单代码示例,以及项目的GitHub链接,供感兴趣的人参考学习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前段时间,在做项目上线前的准备,有bug就改bug,没bug就优化一些性能,自己也有时间胡乱看一些东西。群里都说React火到没朋友,就跟着React的Tutorial敲了一遍,感觉它的组织形式跟之前的jq和ng都不一样,光说不练假把式,就模仿turorial做个五子棋吧,正好朋友们也喜欢玩,就说干就干。

这里写图片描述

很快单机版的五子棋就完事了,感觉很不爽啊,不切合实际,五子棋明明是对战的嘛。完事了就迅速做成联机对战版的。因为涉及到了实时通讯,在朋友的推荐下了解到了socket.io这个基于websocket的实时通讯工具,非常的nice,跟着它的getting-started走一遍,就能上手了。

这里写图片描述

其间遇到了通过grunt编译react的问题,记录在http://blog.youkuaiyun.com/baidu_35407267/article/details/54173001,界面很简单,jsx代码较长,就贴个主要的component。

//主棋盘
class Board extends React.Component{
   
   
  constructor() {
    super();
    this.state = {
      'styleArr': Array(225).fill('unit'),//初始化每个坐标
      isBlacksTurn:true,//记录此时黑方走棋还是白方走棋
      point:-1,//下棋的坐标
      urBlack:null,//初始化本玩家的角色,黑方还是白方
      online:{}//记录在线人数
    };
  }
  componentWillMount() {
    var that = this;
    socket.on('role', function(msg){
        if(msg.hasOwnProperty('role') && msg.role){
             that.setState({
  
  urBlack: true,})
             console.log(
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值