如何制作网页端多人自走棋游戏原型3D编程小实验?
摘要:为解决常规自走棋游戏配置灵活度低且难以在局域网跨平台联机的问题,本文基于Babylon.js(以下简称bbl)和websocket(简称ws)技术实现了一个网页端多人自走棋游戏原型。该原型实现了棋盘地形设计、简单的棋子角色设计、自走棋操作U
摘要:为解决常规自走棋游戏配置灵活度低且难以在局域网跨平台联机的问题,本文基于Babylon.js(以下简称bbl)和websocket(简称ws)技术实现了一个网页端多人自走棋游戏原型。该原型实现了棋盘地形设计、简单的棋子角色设计、自走棋操作UI、双方对抗逻辑、角色生命周期管理和基于websoket的局域网多人互联。项目达成了最初设计目标,且前端代码以原生方式编写易于调试和扩展,编程者可以此原型为基础编写更复杂的多人自走棋类游戏。
1、程序运行效果
视频地址:https://www.bilibili.com/video/BV1tvPfzMETk
画面上方为红蓝双方的控制页面,下方为裁判页面,红蓝双方分别可通过自己的页面向场景中放置单位,裁判页面负责进行所有逻辑计算并向红蓝双方同步状态,ws服务器需运行在window PC上,前端页面可通过浏览器运行在PC或移动设备上。
页面默认为rts控制方式,鼠标左键拖动地图,滚轮缩放视角范围,左键在卡组中选取单位,右键放置。按o键可切换为自由相机进行场景调试(鼠标拖动视角,上下左右控制移动),按i键可恢复为rts控制方式。
1.1代码下载
该项目基于MIT协议开源,可通过以下链接下载全部运行环境和代码:
链接: https://yun.139.com/shareweb/#/w/i/2u8ooDGV0gA4g 提取码:wrkg
解压后目录如下图:
主目录由nginx服务器改造而成,其中html下为前端代码与资源,jdk-22为java运行库,websocket下为以java语言编写的ws服务器,start.bat为一键启动脚本。
1.2启动运行环境
start.bat脚本内容如下:
1 rem 关闭已有的nginx
2 nginx -s stop
3 rem 设置环境变量
4 set JAVA_HOME=jdk-22
5 set JRE_HOME=%JAVA_HOME%
6 set CLASSPATH=.;%JAVA_HOME%\lib
7 set Path=%JAVA_HOME%\bin;%JAVA_HOME%\lib
8 rem 启动netty服务
9 start "startWS" java -jar websocket\target\websocket-0.0.1.jar 192.168.43.220-2323-80-routeWH.html >netty.log
10 timeout 5
其中websocket-0.0.1.jar为ws服务器的jar包,192.168.43.220为当前电脑的局域网IP,如不手动设置则程序将尝试自动检测IP地址,2323为ws服务监听端口,80为http服务监听端口,routeWH.html为启动服务器后自动打开的网页。
