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

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

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

一、注册登陆和角色创建

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

  一)添加jsp页面

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

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

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

<%@ 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='/register.jsp';">注 册</button> </div> </form> </div> <script type="text/javascript" src="<%=path%>/js/wow/index.js?v=0714"></script> </body> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgfzzp.html