从零开始实现放置游戏(十一)——实现战斗挂机(2)注册登陆和游戏主界面

简介:  本章主要实现注册登陆功能和游戏的主界面。有了游戏的界面,大家能有更直观的认识。  本章我们主要开发的是idlewow-game模块,其实就是游戏的客户端展示层。因为是放置游戏,为了方便,主要使用spring-mvc来开发,整个游戏形式是类似web端的文字mud游戏,会稍带一些图形图片。当然,游戏的客户端可以是多种多样的,也可以使用U3D开发成移动端或者C++/flash/silver light,开发成PC端、网页端、微端等等形式,但需要更多的美术资源。

本章主要实现注册登陆功能和游戏的主界面。有了游戏的界面,大家能有更直观的认识。


  本章我们主要开发的是idlewow-game模块,其实就是游戏的客户端展示层。因为是放置游戏,为了方便,主要使用spring-mvc来开发,整个游戏形式是类似web端的文字mud游戏,会稍带一些图形图片。当然,游戏的客户端可以是多种多样的,也可以使用U3D开发成移动端或者C++/flash/silver light,开发成PC端、网页端、微端等等形式,但需要更多的美术资源。


一、注册登陆和角色创建


  首先,我们把idlewow-game的框架搭建好,因为也是spring-mvc项目,可以基本参照前面的rms模块。各种配置,这里就不再赘述了。可以先把源代码下载下来,对照着看。


  一)添加jsp页面


  为了便于理解,这里我们先添加个首页,即登陆页面。其实就是一个背景图,带上登陆输入框和注册、登陆按钮。如下图,是我从网上随便找的一个背景图。这里,注册和登陆页面的展示,不需要经过controller做什么处理,直接在"/webapp/"目录下添加jsp页面即可。代码如下,比较简单,注意里面引用的css和js就不粘贴了。


 index.jsp


register.jsp


502227-20191018185813327-168926509.png


 好了,现在页面有了,接下来,在注册页面点击“注册”和登陆页面点击“登陆”按钮时,就需要controller来做后台逻辑处理了。


 二)hessian客户端配置


  在添加controller前,我们先把hessian客户端配置好。注意,在调用hessian接口的客户端,同样需要在pom中引用hessian的包。


  因为game模块作为游戏的客户端展示层,本身不访问底层数据库,这里就需要调用上一章提供的hessian服务,来完成注册和登陆功能。hessian的服务端配置上一章已经讲过了,在调用时,上一章我们直接使用代码生成代理类进行测试。实际使用时,一般只需要配置一个xml文件,就可以在项目中引用对应的对象。


  在game模块的"/resources/properties"目录下,添加 hessian.properties 文件,用来存放 hessian 服务的url地址,内容如下:


 server.url=http://localhost:20000


  再在"/resources/spring"目录下,添加 hessian-client.xml 文件,用来配置需要引用的接口地址(即hessian服务端暴露出的接口),内容如下:


<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:util="http://www.springframework.org/schema/util"
       xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/util
        http://www.springframework.org/schema/util/spring-util.xsd">
    <util:properties location="classpath:/properties/hessian.properties" id="hessian"/>
    <bean id="userService" class="org.springframework.remoting.caucho.HessianProxyFactoryBean">
        <property name="serviceUrl" value="#{hessian['server.url']}/remoting/UserService"/>
        <property name="serviceInterface" value="com.idlewow.user.service.UserService"/>
    </bean>
    <bean id="characterService" class="org.springframework.remoting.caucho.HessianProxyFactoryBean">
        <property name="serviceUrl" value="#{hessian['server.url']}/remoting/CharacterService"/>
        <property name="serviceInterface" value="com.idlewow.character.service.CharacterService"/>
    </bean>
</beans>


 然后,在spring的上下文配置文件 applicationContext.xml 中,将这段配置引入即可,即:


<beans>        
        ........
        <import resource="hessian-client.xml"/>
        ........
</beans>


  全部配置完成,就可以在项目中引用并调用hessian服务了。注意,以后服务端每次添加新的接口,都需要在服务端和客户端的配置文件添加配置。


    三)添加controller


  页面完成后,点击“注册“和”登陆“按钮时,需要后台进行相应的逻辑处理,在spring-mvc框架下,就需要新建一个controller。


  在com.idlewow.game.controller包下,新建一个类GameController,内容如下:


GameController


其中,userService和characterService就是对hessian接口的引用。这里注解使用@Autowired或者@Resource均可。具体区别可以百度一下。


   @Autowired

   UserService userService;

   @Autowired

   CharacterService characterService;


  controller中的方法,对应提供了“注册”、“登陆”、“获取角色列表”、“创建角色”、“进入游戏主界面”、“错误页面”几个功能。其中,还需要对应的创建几个页面,目录结构如下图。页面代码就不粘贴了,可以下载源码查看。这里需要注意的是,由controller路由的页面,根目录是"/WEB-INF/views/”,这是我们在spring-mvc.xml中的视图解析节点配置的,属于mvc的路由机制。而前面的index.jsp和register.jsp,是直接从文件目录结构访问的,未参与mvc路由。


502227-20191021102011064-1590665363.png


四)数据库设计


  项目中用到的sql建表语句等,都在idlewow-doc目录下。这里账号表和角色表比较简单,sql里也有相应的注释。这里需要注意的是,角色表 user_character 中,有一个字段 extra_info。这个字段主要以json文本的形式存储一些缓存数据。比如角色身上的装备信息,角色所在的地图,等等等等。


  试想一下,在游戏世界中,一个角色可能会频繁的进行更换装备、切换地图等操作,这些信息都需要记录。如果游戏中每个角色有此类动作时,都进行更新写库,对数据库会造成巨大的压力。因此这部分数据,会在游戏一开始时,读取到缓存中(比如redis)。在游戏进行时,只需要更新缓存数据。在游戏退出时,再将缓存中的数据写回数据库。


二、效果演示


微信图片_20220423212541.gif


小结


  本章主要实现了游戏的主界面,但界面上的角色信息、战斗记录、地图信息及怪物信息等,目前都是静态文本,接下来只要一点点往上添加就行了。


  本章的代码可能会有部分冗余,因为是从我已经开发好的分支上,直接拷贝过来的。有些代码可能目前还用不到,或者后期会有改进,有些地方是我还没想好最终会怎么做还在思考。看代码的时候,重点关注本章需要实现的内容就可以了,有些不合理的地方也可以自己发挥。


相关文章
|
3月前
|
小程序 开发者
微信小程序狼人杀游戏代码及步骤
微信小程序狼人杀游戏代码及步骤
165 0
|
8月前
|
小程序 前端开发 JavaScript
微信小程序(十五)小程序回到顶部
<image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />
55 0
|
数据可视化
搭建完菜单后运行不显示菜单的原因及其解决方法(拼图小游戏)
在搭建完菜单以后,程序不报错也能运行,但是运行结果就是一个框,就跟没有搭建过菜单一样,如下图所示,没有我们想象中的菜单栏,更别说有下拉菜单了,但是如果将搭建菜单的代码单独放到一个测试类中去测试一下的话,会显示出来菜单,也就是说我们搭建菜单的核心代码是没有问题的
146 0
搭建完菜单后运行不显示菜单的原因及其解决方法(拼图小游戏)
|
缓存 运维 前端开发
从零开始实现放置游戏(十四)——实现战斗挂机(5)地图移动和聊天
上一节添加了websocket组件,实现了前后端通信。后面我们只需要根据游戏的业务逻辑,逐步实现各种功能即可。   另外,在实现具体业务逻辑时,发现上一章设计的消息对象有些不合理,由于粒度过粗,导致可以复用的部分很少,且这里的通信模型并不是一个请求对应一个响应的模式。比如:玩家a从地图A移动到地图B。此时,a发送移动请求。服务器返回B地图的信息和在线列表给A。同时还要发送最新的在线列表给地图B的其他玩家b,c,d....这里其他玩家并没有发送请求,但收到了响应消息。因此,将消息类型重构成由客户端发出的消息和由服务端发出的消息两类,分别以"3000"和"6000"开头。
从零开始实现放置游戏(十四)——实现战斗挂机(5)地图移动和聊天
|
存储 前端开发 算法
从零开始实现放置游戏(十五)——实现战斗挂机(6)在线打怪练级
 本章初步实现游戏的核心功能——战斗逻辑。   战斗系统牵涉的范围非常广,比如前期人物的属性、怪物的配置等,都是在为战斗做铺垫。   战斗中,人物可以施放魔法、技能,需要技能系统支持。   战斗胜利后,进行经验、掉落结算。又需要背包、装备系统支持。装备系统又需要随机词缀附魔系统。   可以说是本游戏最硬核的系统。   因为目前技能、背包、装备系统都还没有实现。我们先初步设计实现一个简易战斗逻辑。   战斗动作仅包括普通攻击,有可能产生未命中、闪避和暴击。
从零开始实现放置游戏(十五)——实现战斗挂机(6)在线打怪练级
|
缓存 前端开发 JavaScript
从零开始实现放置游戏(十三)——实现战斗挂机(4)添加websocket组件
前两张,我们已经实现了登陆界面和游戏的主界面。不过游戏主界面的数据都是在前端写死的文本,本章我们给game模块添加websocket组件,实现前后端通信,这样,前端的数据就可以从后端动态获取到了。
从零开始实现放置游戏(十三)——实现战斗挂机(4)添加websocket组件