本章主要實作注冊登陸功能和游戲的主界面，有了游戲的界面，大家能有更直觀的認識，
本章我們主要開發的是idlewow-game模塊，其實就是游戲的客戶端展示層，因為是放置游戲，為了方便，主要使用spring-mvc來開發，整個游戲形式是類似web端的文字mud游戲，會稍帶一些圖形圖片，當然，游戲的客戶端可以是多種多樣的，也可以使用U3D開發成移動端或者C++/flash/silver light，開發成PC端、網頁端、微端等等形式，但需要更多的美術資源，
一、注冊登陸和角色創建
首先，我們把idlewow-game的框架搭建好，因為也是spring-mvc專案，可以基本參照前面的rms模塊，各種配置，這里就不再贅述了，可以先把源代碼下載下來，對照著看，
一）添加jsp頁面
為了便于理解，這里我們先添加個首頁，即登陸頁面，其實就是一個背景圖，帶上登陸輸入框和注冊、登陸按鈕，如下圖，是我從網上隨便找的一個背景圖，這里，注冊和登陸頁面的展示，不需要經過controller做什么處理，直接在"/webapp/"目錄下添加jsp頁面即可，代碼如下，比較簡單，注意里面參考的css和js就不粘貼了，
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% String path = request.getContextPath();%> <html> <head> <title>掛機魔獸</title> <link rel="stylesheet" href="<%=path%>/css/wow/base.css?v=0714"> <script type="text/javascript" src="/js/jquery.min.js"></script> <style> .input-wow { background: rgb(80, 80, 80); border: gray; border-radius: 4px; color: white; } </style> </head> <body> <div class="bg bg-index"></div> <div style="text-align:center; width:100%;position:relative;top:58%;"> <form id="form-login" method="post"> <div style="margin: 10px;"> <input type="text" name="username" placeholder="請輸入賬號" class="input-wow"/> </div> <div style="margin-top: 50px;"> <input type="password" name="password" placeholder="請輸入密碼" class="input-wow"/> </div> <div style="margin: 20px;"> <button type="button" class="btn-wow" onclick="login();">登 陸</button> <button type="button" class="btn-wow" onclick="location.href='https://www.cnblogs.com/register.jsp';">注 冊</button> </div> </form> </div> <script type="text/javascript" src="<%=path%>/js/wow/index.js?v=0714"></script> </body> </html>index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>注冊賬號</title> <script type="text/javascript" src="/js/jquery.min.js"></script> </head> <body> <form id="form-register" method="post"> <div> <label>賬號：</label> <input type="text" name="username" id="username"/> </div> <div> <label>密碼：</label> <input type="password" name="password" id="password"/> </div> <div> <label>確認密碼：</label> <input type="password" name="password2" id="password2"/> </div> <div> <button type="button" onclick="register();">注冊</button> <button type="button" onclick="history.go(-1);">回傳</button> </div> </form> <script type="text/javascript" src="/js/wow/register.js"></script> </body> </html>register.jsp
好了，現在頁面有了，接下來，在注冊頁面點擊“注冊”和登陸頁面點擊“登陸”按鈕時，就需要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，內容如下：
package com.idlewow.game.controller; import com.idlewow.character.model.Character; import com.idlewow.character.service.CharacterService; import com.idlewow.common.model.CommonResult; import com.idlewow.game.GameWorld; import com.idlewow.user.model.UserAccount; import com.idlewow.user.service.UserService; import com.idlewow.util.cipher.MD5Util; import org.apache.commons.lang3.StringUtils; import org.apache.logging.log4j.LogManager; import org.apache.logging.log4j.Logger; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.mvc.support.RedirectAttributes; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import java.util.List; import java.util.regex.Pattern; @Controller @RequestMapping("/game") public class GameController { private static final Logger logger = LogManager.getLogger(GameController.class); @Autowired UserService userService; @Autowired CharacterService characterService; @Autowired private HttpSession httpSession; @Autowired private HttpServletRequest request; @ResponseBody @RequestMapping("/register") public Object register(String username, String password) { String ip = request.getRemoteAddr(); String regex = "[a-zA-Z0-9]{6,20}"; if (!Pattern.matches(regex, username)) { return CommonResult.fail("用戶名應為6-20位英文字母、數字"); } if (!Pattern.matches(regex, password)) { return CommonResult.fail("密碼應為6-20位英文字母、數字"); } String cipher = MD5Util.md5(password); CommonResult commonResult = userService.register(username, cipher, ip); return commonResult; } @ResponseBody @RequestMapping(value = "/login", method = RequestMethod.POST) public Object login(String username, String password) { String cipher = MD5Util.md5(password); CommonResult commonResult = userService.login(username, cipher); if (commonResult.isSuccess()) { UserAccount userAccount = (UserAccount) commonResult.getData(); httpSession.setAttribute(GameWorld.SK_User, userAccount); } return commonResult; } @RequestMapping("/characters") public Object characterList(RedirectAttributes redirectAttributes) { try { UserAccount userAccount = (UserAccount) httpSession.getAttribute(GameWorld.SK_User); String userId = userAccount.getId(); CommonResult commonResult = characterService.getUserCharacters(userId); if (!commonResult.isSuccess()) { throw new Exception("獲取角色串列失敗！" + commonResult.getMessage()); } List<Character> list = (List<Character>) commonResult.getData(); request.setAttribute("characters", list); return "/game/characters"; } catch (Exception ex) { redirectAttributes.addFlashAttribute("error", ex.getMessage()); return "redirect:/game/error"; } } @RequestMapping("/createChar") public Object createChar() { return "/game/createChar"; } @ResponseBody @RequestMapping(value = "/createChar", method = RequestMethod.POST) public Object createChar(String name, Integer faction, Integer race, Integer job) { UserAccount userAccount = (UserAccount) httpSession.getAttribute(GameWorld.SK_User); String userId = userAccount.getId(); if (StringUtils.isBlank(name)) { return CommonResult.fail("角色昵稱不能為空！"); } if (name.length() < 2 || name.length() > 10) { return CommonResult.fail("角色昵稱應為 2-10 個字符！"); } String pattern = "^[\\u4e00-\\u9fa5_a-zA-Z0-9]+$"; if (!Pattern.matches(pattern, name)) { return CommonResult.fail("角色名稱只能包含漢字、英文字母、數字、下劃線！"); } if (faction == null) { return CommonResult.fail("請選擇陣營！"); } if (race == null) { return CommonResult.fail("請選擇種族！"); } if (job == null) { return CommonResult.fail("請選擇職業！"); } CommonResult commonResult = characterService.createCharacter(userId, name, faction, race, job); return commonResult; } @RequestMapping("/main") public Object main(String characterId, RedirectAttributes redirectAttributes) { if (characterId == null) { characterId = httpSession.getAttribute(GameWorld.SK_CharId).toString(); } CommonResult commonResult = characterService.find(characterId); if (commonResult.isSuccess()) { Character character = (Character) commonResult.getData(); httpSession.setAttribute(GameWorld.SK_CharId, characterId); request.setAttribute("character", character); return "/game/main"; } else { redirectAttributes.addFlashAttribute("error", commonResult.getMessage()); return "redirect:/game/error"; } } @RequestMapping("/error") public Object error() { return "/game/error"; } }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路由，
四）資料庫設計
專案中用到的sql建表陳述句等，都在idlewow-doc目錄下，這里賬號表和角色表比較簡單，sql里也有相應的注釋，這里需要注意的是，角色表 user_character 中，有一個欄位 extra_info，這個欄位主要以json文本的形式存盤一些快取資料，比如角色身上的裝備資訊，角色所在的地圖，等等等等，
試想一下，在游戲世界中，一個角色可能會頻繁的進行更換裝備、切換地圖等操作，這些資訊都需要記錄，如果游戲中每個角色有此類動作時，都進行更新寫庫，對資料庫會造成巨大的壓力，因此這部分資料，會在游戲一開始時，讀取到快取中（比如redis），在游戲進行時，只需要更新快取資料，在游戲退出時，再將快取中的資料寫回資料庫，
二、效果演示
小結
本章主要實作了游戲的主界面，但界面上的角色資訊、戰斗記錄、地圖資訊及怪物資訊等，目前都是靜態文本，接下來只要一點點往上添加就行了，
本章的代碼可能會有部分冗余，因為是從我已經開發好的分支上，直接拷貝過來的，有些代碼可能目前還用不到，或者后期會有改進，有些地方是我還沒想好最侄訓怎么做還在思考，看代碼的時候，重點關注本章需要實作的內容就可以了，有些不合理的地方也可以自己發揮，
原始碼下載地址：https://545c.com/file/14960372-403554557
本文原文地址：https://www.cnblogs.com/lyosaki88/p/idlewow_11.html
專案交流群：329989095
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/14575.html
標籤：其他
下一篇：lua行為樹設計與實作