# Double-Tetris

**Repository Path**: coderEasy/Double-Tetris

## Basic Information

- **Project Name**: Double-Tetris
- **Description**: Double-Tetris 是一款双人俄罗斯方块游戏，在传统的俄罗斯方块游戏基础上增加了双人配合的玩法，增添了一些游戏技巧和乐趣。客户端（requireJS+jQuery+socket.io+PixiJS）+ 服务端（SpringBoot+Netty-SocketIO）。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 30
- **Created**: 2024-04-09
- **Last Updated**: 2024-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Double-Tetris (记得Star哦)
Double-Tetris 是一款双人俄罗斯方块游戏，我在传统的俄罗斯方块游戏基础上增加了双人配合玩法，增添了一些游戏技巧和乐趣。技术选型 客户端（requireJS+jQuery+socket.io+PixiJS）+ 服务端（SpringBoot+Netty-SocketIO）。

## 截图
![PC](https://gitee.com/ryanpenn/Double-Tetris/raw/master/screenshot/pc.jpeg)
-
![手机](https://gitee.com/ryanpenn/Double-Tetris/raw/master/screenshot/wx.png)

## 功能说明
- 游戏在经典版俄罗斯方块上进行改变,加入双人游戏的玩法,支持局域网游戏（目前只支持2个客户端连接）
- 先接入的客户端为P1, 使用绿色方块, 出现在屏幕左侧; 后接入的客户端为P2, 使用红色方块,出现在屏幕右侧
- 客户端对屏幕分辨率做了自适应处理,支持不同分辨率的设备.
- 同时支持 键盘(PC端) 和 触屏(移动端) 操作
- 键盘: W/A/S/D（或方向键 ↑ ← ↓ →）分别为 旋转/左移/下移/右移, 空格键 为直接下落
- 触屏: 左/右/下 滑手势 分别对应 左移/右移/下移, 上滑手势 为旋转, 触屏暂未支持直接下落

## 运行说明
- 配置服务端:resources/application.properties, 将server.host改为 本机IP（不要使用localhost或127.0.0.1）
- 运行服务端: cn.ryanpenn.game.tetris.Application.main
- 客户端代码在: webapp/tetris-client 目录中
- 客户端配置: js/main.js 中的连接地址IP、端口保持和服务器一致即可（不要使用localhost或127.0.0.1）
- 客户端需要运行多个,建议采用 browsersync 工具运行,方便在移动端看效果
    - 打开命令行, cd 到 tetris-client 目录中
    - 运行 browser-sync start --server --files "js/*.js"
    - 在浏览器中打开 http://本机IP:3000/tetris-client.html （服务端应该会输出日志: P1已连接）
    - 在 另一台电脑或手机 的浏览器中打开上面的地址,游戏就自动开始了
    - 如果需要查看在微信中的显示效果,可以使用 草料二维码生成器 将地址生成二维码,然后通过微信扫一扫就可以了
- 注意:所有设备必须和服务端在同一网段中
- 游戏难度可以在 js/tetris.js 中调整

## 技术说明
- 基于WebSocket实现通信,使用 netty-socketio(服务端) + socket.io.js(客户端) 实现.
- 服务端是基于 Maven 的Java Application,依赖 spring boot, 可以直接运行,不需要部署到Web容器.
- 客户端使用了 require.js 实现模块化,使用 jquery 来简化编码(其实很少用到...)
- 客户端使用了 pixi.js 游戏引擎. 由于本人对这个游戏引擎还不熟悉,只用很少一部分功能,界面是通过该引擎绘制的.

## 版本
- 后端
    - [spring boot 1.5.10.RELEASE](http://mvnrepository.com/artifact/org.springframework.boot/spring-boot-dependencies/1.5.10.RELEASE)
    - [netty-socketio-1.7.13](https://github.com/mrniko/netty-socketio/releases/tag/netty-socketio-1.7.13)
    - [netty-all 4.1.22.Final](http://mvnrepository.com/artifact/io.netty/netty-all/4.1.22.Final)

- 前端
    - [socket.io.min.js 1.7.4](https://cdn.bootcss.com/socket.io/1.7.4/socket.io.min.js)
    - [require.min.js 2.3.5](https://cdn.bootcss.com/require.js/2.3.5/require.min.js)
    - [jquery.min.js 3.3.1](https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js)
    - [pixi.min.js 4.7.0](https://cdn.bootcss.com/pixi.js/4.7.0/pixi.min.js)

## 参考资料
- [socket.io 中文文档](http://www.cnblogs.com/xiezhengcai/p/3956401.html)
- [socket.io cdn](https://cdnjs.com/libraries/socket.io/1.7.4)
- [PIXI 中文文档](https://github.com/Zainking/learningPixi)
- [PIXI 官方示例](http://pixijs.io/examples/#/basics/)
- [Spring Boot 非web应用程序实例](http://blog.csdn.net/lxh18682851338/article/details/78559595)
- [Netty-SocketIO 简单聊天室](http://blog.csdn.net/sun_t89/article/details/52060946)

## 实用工具
- [IntelliJ IDEA](https://www.jetbrains.com/idea/)
- [browsersync 前端调试神器](https://browsersync.io/)
- [草料二维码生成器](https://cli.im/text)

## 备注
- 本项目是在 [对战版俄罗斯方块](https://gitee.com/ryanpenn/Tetris) 项目基础上修改的,基本游戏实现原理可参考该项目.
- 项目还不完善,Bug肯定也不少,但希望能给大家一些参考,欢迎Star和Fork