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