基于微信小程序的联机游戏代码

这里给出一个简单的基于微信小程序的联机游戏代码，供参考：

1. app.js文件

App({
  globalData: {
    userInfo: null,
    socketOpen: false,
    socketMsgQueue: []
  },
  onLaunch: function () {
    // 初始化socket连接
    wx.connectSocket({
      url: 'wss://xxx.xxx.xxx.xxx:xxxx', // 这里填写你的服务器地址和端口号
      success: function () {
        console.log('socket连接成功')
      },
      fail: function () {
        console.log('socket连接失败')
      }
    })
    // 监听socket连接状态
    wx.onSocketOpen(() => {
      console.log('socket连接已打开')
      this.globalData.socketOpen = true
      // 发送socket消息队列中的消息
      for (let i = 0; i < this.globalData.socketMsgQueue.length; i++) {
        this.sendSocketMessage(this.globalData.socketMsgQueue[i])
      }
      this.globalData.socketMsgQueue = []
    })
    wx.onSocketError((res) => {
      console.log('socket连接错误', res)
      this.globalData.socketOpen = false
    })
    wx.onSocketClose((res) => {
      console.log('socket连接已关闭', res)
      this.globalData.socketOpen = false
    })
    wx.onSocketMessage((res) => {
      console.log('收到服务器内容：' + res.data)
      // 处理收到的消息
    })
  },
  sendSocketMessage: function (msg) {
    if (this.globalData.socketOpen) {
      wx.sendSocketMessage({
        data: msg
      })
    } else {
      this.globalData.socketMsgQueue.push(msg)
    }
  }
})

2. index.js文件

const app = getApp()

Page({
  data: {
    inputValue: ''
  },
  onLoad: function () {
    wx.getUserInfo({
      success: (res) => {
        app.globalData.userInfo = res.userInfo
      }
    })
  },
  bindKeyInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  sendSocketMessage: function () {
    app.sendSocketMessage(this.data.inputValue)
    this.setData({
      inputValue: ''
    })
  }
})

3. index.wxml文件

<view class="container">
  <view class="input-box">
    <input class="input" type="text" placeholder="请输入消息" bindinput="bindKeyInput" value="{{inputValue}}"/>
    <button class="send-btn" bindtap="sendSocketMessage">发送</button>
  </view>
</view>

4. index.wxss文件

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.input-box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 50px;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0px 0px 10px #e0e0e0;
}

.input {
  flex: 1;
  height: 40px;
  margin-left: 20px;
  font-size: 16px;
  border: none;
  outline: none;
}

.send-btn {
  width: 60px;
  height: 30px;
  margin-left: 20px;
  font-size: 16px;
  color: #fff;
  background-color: #4caf50;
  border: none;
  outline: none;
  border-radius: 15px;
  box-shadow: 0px 0px 5px #e0e0e0;
}

以上代码是一个简单的聊天室应用，用户可以在输入框中输入消息并发送，发送的消息会通过WebSocket连接发送给服务器。您可以在此基础上进行扩展，实现更多有趣的联机游戏功能。