写在前头
锵锵~
我来开坑了!近期正好收课设报告,借着这个时机就复习一下上个月写的课设Javaweb项目吧。
项目Github链接:MagicTower
觉得有用的话,点颗star吧,蟹蟹!
下载慢的话,可以拷到码云下载。
项目概述
《魔塔》背景
这是一个颇有年代的游戏,是90后的童年回忆,小学时我有幸在网吧门口看别人玩过这个游戏,仅是一面之缘就让我记到了现在,甚至还复刻出来放到了网站上,这可能就是一见钟情吧...
项目实现效果
最后我们要得到的就是一个能够注册、登录账号,实现存读档功能《魔塔》页游,附加题是部署腾讯云的cdn静态加速,放几张样图:
要实现的功能不复杂,我们接下来一步步分析项目中的这些要求用什么技术方法实现。
项目功能分析
1. 游戏主体部分:
因为是放在网页上运行,所以我决定用JavaScript的写游戏的事件控制,显示等等,恰好Canvas就很适合这种类似H5小游戏的开发,更恰好的是有一位博主他就做过Canvas + JavaScript的单机魔塔小游戏,点这里去看看博主怎么做的,博主把代码和素材上传到GitHub上了(已开源),链接:m8705的Github。
我看了一下,博主把图片资源也一并上传了,我们可以直接拿来用,如果你有写过贪吃蛇,2048这样的小游戏,了解游戏事件的设计,那你可以直接优化博主的代码,改成自己想要的(比如我把所有的资源合为一类,一起放到data.js中操作,简化事件处理等),如果你没有这方面的经验,不妨试着自己做一下这里的游戏事件,能快速提高你的编程能力。
这一部分的要求是能够实现单机的游戏基本运行无bug(商店要注意是不是够钱,怪物对战扣血是要循环的等等),存读档可以暂时不做,能做到这一点基本就没什么问题了。
2. 前端页面:
有了游戏主体之后,我们再来实现前端页面,这里我们用Bootstrap的前端框架来快速打前端页面,不清楚怎么做?点这里:
Bootstrap快速入门视频p82-88;看完上面的视频之后,我们要把之前的三个样图页面做好,实现三个页面之间跳转,这样魔塔和他的壳子就做好了。
接下来我们正式进入重点:Javaweb项目的构建
3. 在本地上实现局域网的魔塔:
由于篇幅关系,这里只能简单列个时间线,后面的文章再一个个详解。
{% timeline 本地部署 %}
{% timenode 工具与环境 %}
- IDEA Ultimate 2020.2.3
- MySQL 8.0.20
- Tomcat 8.5(IDEA自带)
- Maven3(IDEA自带)
- Navicat Premium 15
- 以上软件学生均可申请免费使用
{% endtimenode %}
{% timenode 新建Maven项目 %} - 添加依赖来加入jar包
{% endtimenode %}
{% timenode 数据库 %} - 用Navicat创建数据库和表
- 使用Druid连接池
- 使用spring的JDBCTemplate操作sql语句
{% endtimenode %}
{% timenode 前后端关联 %}
- 在前端写js接口,使用Ajax向后端发送请求
- 在后端编写servlet类,处理请求
- 某种程度上实现了前后端分离,解耦
{% endtimenode %}
{% timenode Tomcat %}
- 配置好Tomcat后输入网址http://localhost:8080/项目名称/index.html 即可再局域网内测试
- 思考1:没有main函数,web项目如何运行
- 思考2:没有创建过servle类的对象,为什么还是有用
{% endtimenode %}
{% endtimeline %}
写在最后
这篇文章是项目的一个概述,下一篇会从本地实现局域网魔塔这部分开始详细介绍,还有最后一块的部署到服务器和CDN加速没有提到,因为内容有点多,就放到最后一篇写吧,感兴趣的小伙伴可以配置下上面提到的工具和环境,跟着博客一起完成这个项目( ̄︶ ̄)↗
Q.E.D.