Home

基于Django + Vue 的术士之战游戏

支持在线联机对战的简易版吃鸡游戏,前后端分离,前端支持小程序端和Web端。技术栈:Django,WebSocket,微服务,Vue,Redis,nginx。代码编写在云服务终端完成

功能包括:

  • 游戏菜单、游戏设置:熟悉http协议
  • 存储对局信息、账户信息:熟悉数据库操作
  • 在Redis中存储对局状态:熟悉内存数据库操作
  • 在线聊天室、实时移动、实时放技能:熟悉websocket协议
  • 在线匹配系统:熟悉thrift和微服务
  • 配置nginx:熟悉nginx部署云服务

项目逻辑:通过acapp/acapp/urls.pypath('', include('game.urls.index')),找到acapp/game/urls/index.py,通过该文件中的 from game.views.index import indexpath("", index, name="index")找到acapp/game/views/index.pyindex函数:

def index(request):                                                                              
    return render(request, "multiends/web.html") 

请求web.html结合,生成完整的 HTML 页面并返回给浏览器:

找到acapp/game/templates/multiends/web.html,该文件引入了acapp/game/static/js/dist/game.js(/acapp/scripts/compress_game_js.sh脚本将js/src/下的js文件打包得到一个js/dist/game.js文件,减少http请求js文件的数量)

通过game.js渲染web.html,看到前端页面:

game.js的主类先实例化了settings对象:构造器里执行start()函数,调用getinfo()函数,通过ajax向后端发送请求,通过url找到对应函数并执行,并向前端返回Json字典resp

Read more

Vue3框架

后端渲染模型:在服务器端完成渲染(用户输入 URL 发起请求 → 服务器返回 “带数据的完整 HTML 页面”)。典型技术栈:Java+JSP/Thymeleaf、PHP+Smarty、Node.js+Express+EJS。

前端渲染模型:在浏览器端完成渲染(用户输入 URL 发起请求 → 服务器仅返回无数据的静态 HTML 框架(含 CSS/JS),页面渲染、数据拼接由浏览器端的 JS完成)。典型技术栈:Vue/React/Angular + 后端 API(如 Spring Boot/Node.js)

Read more

Unity3D

前后端分离小游戏,技术栈:SpringBoot,WebSocket,微服务,Vue

Read more

Flask

前后端分离小游戏,技术栈:SpringBoot,WebSocket,微服务,Vue

Read more