写在前头
  锵锵~
  我来开坑了!近期正好收课设报告,借着这个时机就复习一下上个月写的课设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.


记录 • 分享 • 日常