一、游戏界面
前端页面声明：已获得博友 Nil Xuan授权，文章链接点它-> 原生Javascript实现拼图游戏
二次开发的效果图如下：
界面说明：左边是拼图操作页面，右边是原图参照，鼠标放上去有放大效果，右下角还可以上传自己的图片，实际操作，可以自己玩一下就知道了。
二、游戏动态演示
也许你看的还不是很直观，那我就附上动图给你看看吧！（上传大小限制，故此分两段）
-
第一段
-
第二段
三、上传图片的核心功能
看到这的，我想应该都是对这个项目有点感觉吧！！，那废话不多说，我们直接开干
图片上传需要考虑的点:
- 图片文件如何上传？
- 上传后放在哪？
- 大小如何修改？（因为前端页面已经写死）
- 如何渲染到前端？
- 大小有何限制？
这里考虑到项目的大小问题，所以本项目没有加数据库，当用户上传多次照片，以最后一次的为准，图片限制为.jpg格式的；大小为不超过1M
上传图片的核心代码
package cn.lixuquan.servlet;
/**
* 处理图片上传
*/
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.tomcat.util.http.fileupload.FileUploadBase;
import cn.lixuquan.utils.ChangeImgSize;
/**
* Servlet implementation class ImgServlet
*/
@WebServlet("/imgServlet")
public class ImgServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//响应中文乱码问题
response.setContentType("text/html;charset=utf-8");
//1.创建文件上传工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//1.1 通过工厂对象设置临时文件
File f = new File("d://temp1");
if(!f.exists())
{
f.mkdirs();
}
factory.setRepository(f);
factory.setSizeThreshold(1024*1024);
//2.创建解析器对象
ServletFileUpload fileUpload = new ServletFileUpload(factory);
//2.1设置允许上传文件的内存
fileUpload.setSizeMax(1024*1024);
//2.2 设置字符编码
fileUpload.setHeaderEncoding("utf-8");
PrintWriter out = response.getWriter();
//3. 解析请求
try
{
List<FileItem> fileItems = fileUpload.parseRequest(request);
//开始遍历表单项
for(FileItem fileitem: fileItems)
{
boolean flag = fileitem.isFormField();
if(flag)
{
//普通表单项就直接跳过
continue;
}
else
{
//文件上传表单项
String filename = fileitem.getName();
if(filename != null && !filename.equals(""))
{
String suffixName = filename.substring(filename.lastIndexOf(".")+1);
// System.out.println(suffixName);
if(!"jpg".equals(suffixName))
{
out.println("<script>");
out.println("alert('图片上传失败,只允许.jpg图片,3秒后跳转');");
out.println("</script>");
response.setHeader("refresh","3;url=/PingTu/pingtu.jsp");
//return;
}
else
{
filename = filename.substring(filename.lastIndexOf("\\")+1);
//上传同名文件的问题
filename = UUID.randomUUID()+"_"+filename;
//服务器端创建同名的文件
String webPath = "/img/";
//将文件名称和服务端的文件组合在一起
String filePath = getServletContext().getRealPath(webPath+filename);
//打印看看
// System.out.println(filePath);
//创建文件夹
File file = new File(filePath);
file.getParentFile().mkdirs();
file.createNewFile();
//获取文件的字节输入流
InputStream is = fileitem.getInputStream();
//获取文件的字节输出流
FileOutputStream os = new FileOutputStream(file);
byte[] buffer = new byte[1024];
int len = 0;
while((len=is.read(buffer)) > 0)
{
os.write(buffer, 0, len);
}
//关闭流
is.close();
os.close();
//删除临时文件
fileitem.delete();
//修改图片的大小，指定长宽
boolean flg = false;
ChangeImgSize changeImgSize = new ChangeImgSize();
flg = changeImgSize.changeSize(690,472, filePath);
if(flg)
{
out.println("<script>");
out.println("alert('图片上传成功,3秒后跳转');");
out.println("</script>");
String fPath = "."+webPath+filename;
request.getSession().setAttribute("filePath", fPath);
// request.setAttribute("filePath", fPath);
}
else
{
out.println("<script>");
out.println("alert('图片上传失败,3秒后跳转');");
out.println("</script>");
}
response.setHeader("refresh","3;url=/PingTu/pingtu.jsp");
}
}
}
}
}
catch (FileUploadException e) {
// TODO Auto-generated catch block
out.println("<script>");
out.println("alert('上传失败！上传的文件大小超出限制 lM');");
out.println("</script>");
response.setHeader("refresh","3;url=/PingTu/pingtu.jsp");
e.getMessage();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
修改图片大小的类：
package cn.lixuquan.utils;
import java.awt.Image;
import java.awt.image.BufferedImage;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import javax.imageio.ImageIO;
/**
* 改变图片的尺寸
*
* @param newWidth, newHeight, path
* @return boolean
*/
public class ChangeImgSize{
public boolean changeSize(int newWidth, int newHeight, String path) {
BufferedInputStream in = null;
try {
in = new BufferedInputStream(new FileInputStream(path));
//字节流转图片对象
Image bi = ImageIO.read(in);
//构建图片流
BufferedImage tag = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_RGB);
//绘制改变尺寸后的图
tag.getGraphics().drawImage(bi, 0, 0, newWidth, newHeight, null);
//输出流
BufferedOutputStream out = new BufferedOutputStream(new FileOutputStream(path));
//JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
//encoder.encode(tag);
ImageIO.write(tag, "jpg", out);
in.close();
out.close();
return true;
} catch (IOException e) {
return false;
}
}
}
四、获取完整项目
- 虽然只是个小项目，但是可以学的东西还是挺多的，特别是前端拼图的逻辑处理，如果想更深的了解这个小项目的前端设计，可以点开篇分享的链接，博主已经写了大致的思路。
- 如果看着不过瘾，还想和同学玩玩，也可以，我已经把项目部署在服务器上了，=关注下方的公众号，回复拼图项目，即可得到完整的项目，以及访问链接，然后你就可以开心的玩了（前提是服务器还在用，因为要钱呀呀呀）
五、分享与热爱
最后有兴趣一起交流的，可以关注我的公众号：这里你能够学到很实用的技巧，不是常用的我不说，公众号回复提取码即可获取以下学习资料啦啦啦啦，喜欢就拿去吧！！
（链接时常会失效，若出现此类情况，可以加我微信：17722328325（加时请备注：学习资料））
-
Java web从入门到精通电子书
-
Python机器学习电子书
-
Python400集（北京尚学堂）
-
JavaScript项目案例、经典面试题
-
Java300集（入门、精通）
-
Java后端培训机构录集（同事培训内部提供）
-
java重要知识pdf文档（价值连城呀呀，不收藏你会后悔的）
扫一扫
913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
