一、遊戲界面
前端頁面聲明：已獲得博友 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文檔（價值連城呀呀，不收藏你會後悔的）
