Code Monkey home page Code Monkey logo

go-space-chat's Introduction

孤独 Lonely

d2139b33a9868d1f17a471201d1272371588868902.jpg

Demo

http://chat.osinger.com/

特色

  1. 支持性别修改、并且有颜色替换
  2. 支持敏感词过滤
  3. 支持姓名修改

介绍

通过canvas 2d来模拟了3D的视觉效果。

并且在该项目中使用了protobuf来进行前端和后端的通讯协议,这一点非常方便!

操作

  1. 项目使用传统WASD按键来控制上下左右
  2. 眼睛可以跟随鼠标的位置进行转动
  3. 按下space 空格可以输入消息,按下回车发送消息
  4. 左上角按钮可以输入名称,点击空白处名称生效

运行

go run main.go

该命令会启动web-server作为静态服务,默认80端口,如果需要修改端口,用下面的命令

go run main.go -web_server 8081

项目启动默认websocket服务端口为9000端口,如果需要修改

go run main.go -socket_server 9001

注意:如果修改websocket端口,同时需要修改js里面的socket端口

技术工具

前端 Vue+canvas+websocket+protobuf

后端 Golang+websocket+protobuf+goroutine

有意思的难点

这里列举几个在实现过程中,遇到的很有意思的问题

  1. 如何实现无限画布?
  2. 如何实现游戏状态同步?

相关链接

Canvas 基本用法

Protobuf Guide

Vue.js

go-space-chat's People

Contributors

sunshinev avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.