从零开始实现放置游戏(九)——实现后台管理系统(7)地图选择控件

简介: 前面做了地图怪物的添加,删除,查询等功能。但添加怪物的时候,需要选择怪物所在地图。前几张的源代码中,我忘了把这部分改回去,所以如果想要成功添加,需要自己改一下html界面,手动填写怪物所在地图的ID。然而,我们配置的时候,地图ID并不是固定的,而是数据库自增的。所以这里最好做成一个弹窗,点击后弹出一个地图列表,让我们手动选择怪物所在地图。  本章我们就实现这样一个弹窗控件,实现对地图的选择。后面如果有选择怪物,选择装备等需求,都可照猫画虎。

前面做了地图怪物的添加,删除,查询等功能。但添加怪物的时候,需要选择怪物所在地图。前几张的源代码中,我忘了把这部分改回去,所以如果想要成功添加,需要自己改一下html界面,手动填写怪物所在地图的ID。然而,我们配置的时候,地图ID并不是固定的,而是数据库自增的。所以这里最好做成一个弹窗,点击后弹出一个地图列表,让我们手动选择怪物所在地图。


  本章我们就实现这样一个弹窗控件,实现对地图的选择。后面如果有选择怪物,选择装备等需求,都可照猫画虎。整个过程的流程大致如下:


502227-20190709111505329-480866091.png

实现步骤


  首先,我们给弹出的地图列表界面,添加相应的Controller和jsp页面。


  在com.idlewow.rms.controller包下新建UserControlController类,如下:


 UserControlController.java


 在/webapp/WEB-INF/views/userControl路径下,新建chooseMap.jsp:


chooseMap.jsp


 跟弹窗赋值相关的代码,为了代码简洁,我们还是封装成一个类,写在helper.js里:


Helper.js


这里,主要封装了两个事件。chooseMap对应了点击选择地图按钮的弹窗事件,chooseMapCallBack对应选择后的回调事件,这里回调时,默认赋值给id为mapId和mapName的dom。如果同一页面,有多出需要选择地图的地方,可以指定回调赋值的dom id。


  最后,在/webapp/js/wow/userControl目录下,新建chooseMap.js,添加对应的业务js代码:


 chooseMap.js


html页面中,对应的添加选择按钮即可,这里由于前面提供的源代码我忘记处理,所以应该是已经添加好的:


add.jsp


运行效果


微信图片_20220423210526.gif


小结


本章简要实现了一个前端的小功能。感觉最近几张比较枯燥,都是实际业务代码,没有什么需要特别介绍。


到这里,后台管理系统基本实现完毕。下一张预计开始开发idlewow-game模块。



相关文章
|
2月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
60 1
|
1月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
187 0
|
容器
游戏开发实战教程(6):把图形放置到网格上
在第四节中我们实现了图形的拖拽功能,拖拽的图形最终需要被放置在网格的对应位置上。 先说一下实现思路: 使用拖拽图形上的左下角的位置作为图形位置,与整个网格的位置进行比对。如果图形位置与当前单元格的位置匹配,则根据图形的数据从当前的单元格开始填充,直到填充完整个图形为止。 看不懂?没关系。接着往下我会一步一步的进行拆解和分析。
81 0
|
容器
微信小游戏开发实战6-把图形放置到网格上
本篇主要内容包括如何将拖拽的图形安放到网格的对应位置上。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
62 0
|
定位技术
制作地图的布局、元素和设计介绍
制作地图的布局、元素和设计介绍
221 0
制作地图的布局、元素和设计介绍
html+css实战179-快捷导航布局-内容
html+css实战179-快捷导航布局-内容
95 0
html+css实战179-快捷导航布局-内容
|
缓存 运维 前端开发
从零开始实现放置游戏(十四)——实现战斗挂机(5)地图移动和聊天
上一节添加了websocket组件,实现了前后端通信。后面我们只需要根据游戏的业务逻辑,逐步实现各种功能即可。   另外,在实现具体业务逻辑时,发现上一章设计的消息对象有些不合理,由于粒度过粗,导致可以复用的部分很少,且这里的通信模型并不是一个请求对应一个响应的模式。比如:玩家a从地图A移动到地图B。此时,a发送移动请求。服务器返回B地图的信息和在线列表给A。同时还要发送最新的在线列表给地图B的其他玩家b,c,d....这里其他玩家并没有发送请求,但收到了响应消息。因此,将消息类型重构成由客户端发出的消息和由服务端发出的消息两类,分别以"3000"和"6000"开头。
从零开始实现放置游戏(十四)——实现战斗挂机(5)地图移动和聊天
|
Web App开发 JavaScript 前端开发
分享25个优秀的网站底部设计案例
  相对于网站头部来说,关注网站底部设计的人很少。我们平常也能碰到有些网站的底部设计得很漂亮,给网站的呈现来一个完美的结尾。这篇文章收集了25个优秀的网站底部设计案例,一起欣赏。 me & oli La Bubbly Poogan’s Porch GiftRocket Li...
1517 0
|
SQL 设计模式 缓存
从零开始实现放置游戏(八)——实现后台管理系统(6)代码重构
  前几张,我们主要实现了升级经验、人物等级属性、地图、地图怪物,这四种配置的增删查改以及Excel导入功能。我们主要以地图怪物为例,因此在文章末尾提供的源代码中只实现了地图怪物这部分的逻辑功能。   如果你照猫画虎,把4种配置功能的逻辑全部实现的话,就会发现,增删查改的代码基本相同,除了SQL语句和模型对象不同,其他地方变化不大。   本章我们利用泛型模板,对整个系统就行重构。在重构结束后,你就会发现写代码简直就是特喵的艺术!
|
SQL JavaScript 前端开发
【自然框架】之鼠标点功能现(二):表单控件的“应用”—— 代码?只写需要的!
  【自然框架】之鼠标点功能现(一):单表的增删改查(即上次5月23日活动的一个主题)【Demo、源码下载】           看了大家的回复,好像不少人误会了,我为了突出“鼠标点,功能现”,所以没有说代码,没有贴代码,这就让一些人认为我想要完全抛弃VS,自己写一个“平台”来代替,不好意思,您高估我了,我可达不到。
853 0