首页 > 分享 > 【项目分享】空虚寂寞？它可以生成小精灵陪伴你！！

【项目分享】空虚寂寞？它可以生成小精灵陪伴你！！

萌宠菠菠乐园
2024-12-18 23:26

在这里插入图片描述

“去吧，皮卡丘！”

大家好，我是孤焰。小时候梦想拥有一只宠物小精灵，一起开心，一起难过，一起去冒险！

长大后依然想拥有一只宠物小精灵，为了找回自己的初心。

我们一起做一个宠物小精灵生成器吧！

一、确定任务目标

任务要求：

基础：一次生成一个宠物进阶：一次生成多个宠物进阶+：根据输入的关键信息不同，生成定制化宠物进阶++：将多个宠物融合进化成一个宠物

最终效果图如下：
在这里插入图片描述

在这里插入图片描述

二、思路分享

简单来说，此项目实现分为以下五点：

爬取小精灵图片编写小精灵随机生成代码编写融合精灵名称随机生成代码编写小精灵描述查询算法整合所有功能

三、源码实现

首先，第一步先编写爬取小精灵图片的爬虫代码：

package com.guyan.download; import java.io.File; import java.io.FileOutputStream; import java.io.InputStream; import java.net.URL; /** * @ClassName Crawling * @Author 孤焰 * @Date 2020/10/15 22:21 * @Version 1.0 **/ //宠物小精灵图片爬取器 public class Crawling { //下载单体小精灵图片 public void downloadSingle() { InputStream in = null; FileOutputStream fos = null; try { //单个精灵下载 i的上限可以更改为151 System.out.println("下载单体精灵图片，共20张"); for (int i = 1 ; i <= 20 ; ++i) { //爬取的网站 String link = "https://images.alexonsager.net/pokemon/" + i + ".png"; URL url = new URL(link); in = url.openStream(); //下载目录：本机的绝对地址 fos = new FileOutputStream(new File("D:JetBrains_CodeIntellij_idea_CodeJAVA_EEElfBuildersrcmainwebappimg" + i + ".png")); byte []buffer = new byte[1024]; int length = 0; System.out.println("开始下载" + i + "：" + link); while ((length = in.read(buffer)) != -1) { fos.write(buffer, 0, length); } in.close(); fos.close(); } System.out.println("单体精灵图片下载完成"); System.out.println(); } catch (Exception e) { e.printStackTrace(); } } //下载融合小精灵图片 public void downloadMulti() { InputStream in = null; FileOutputStream fos = null; try { //融合精灵下载 i和j的上限可以更改为151 System.out.println("下载融合精灵，共" + (20 * 20) + "张"); for (int i = 1 ; i <= 20 ; ++i) { for (int j = 1 ; j <= 20 ; ++j) { //爬取的网站 String link = "https://images.alexonsager.net/pokemon/fused/" + i + "/" + i + "." + j + ".png"; URL url = new URL(link); in = url.openStream(); //下载目录：本机的绝对地址 String path = "D:JetBrains_CodeIntellij_idea_CodeJAVA_EEElfBuildersrcmainwebappimg" + i; File file = new File(path); file.mkdirs(); //下载目录：本机的绝对地址 fos = new FileOutputStream( path +"" + i + "_" + j + ".png"); byte []buffer = new byte[1024]; int length = 0; System.out.println("开始下载" + i + "_" + j + "：" + link); while ((length = in.read(buffer)) != -1) { fos.write(buffer, 0, length); } in.close(); fos.close(); } } System.out.println("融合精灵图片下载完成"); } catch (Exception e) { e.printStackTrace(); } } public static void main(String[] args) { Crawling crawling = new Crawling(); crawling.downloadSingle(); crawling.downloadMulti(); } }

爬取成功后，路径下的文件结构如下图所示：
在这里插入图片描述
上图为图片资源的根路径。

在这里插入图片描述
上图为图片资源根路径下的1文件夹中资源示例。

第二步，编写随机生成小精灵代码

这里的融合小精灵与基因遗传类似，融合小精灵的体型继承了左下角的父亲精灵，颜色和脸型则继承右下角的母亲精灵，例如：
在这里插入图片描述
下面为主界面的显示层代码以及控制宠物随机生成代码：

<%@ page import="com.guyan.jdbc.QueryRandomName" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>宠物小精灵生成器</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ background: #F1F3F6; } </style> <% QueryRandomName queryRandomName = new QueryRandomName(); queryRandomName.query(); %> <script type="text/javascript"> var randomName = new Array(400); <% for (int i = 0; i < 400 ; ++i) { %> randomName[<%=i%>] = "<%=queryRandomName.list.get(i)%>"; <% } %> </script> </head> <body> <div style="height: 60px;background: #b85b5a;margin-bottom: 100px;text-align: center;border-bottom: 5px solid #333333;padding-top: 10px"> <h1>宠物小精灵生成器</h1> </div> <div style="text-align: center;margin-bottom: 100px"> <h2 id="randomName"></h2> <br> <img id="multiElf" src=""> <br> <button onclick="multiOnClickRandom()">随机</button> </div> <div style="width: 400px;height: 200px;padding-left: 40%"> <div style="float: left"> <select id="select1" > <option value="1" onclick="select1OnClickRandom()">妙蛙种子</option> <option value="2" onclick="select1OnClickRandom()">妙蛙草</option> <option value="3" onclick="select1OnClickRandom()">妙蛙花</option> <option value="4" onclick="select1OnClickRandom()">小火龙</option> <option value="5" onclick="select1OnClickRandom()">火恐龙</option> <option value="6" onclick="select1OnClickRandom()">喷火龙</option> <option value="7" onclick="select1OnClickRandom()">杰尼龟</option> <option value="8" onclick="select1OnClickRandom()">卡咪龟</option> <option value="9" onclick="select1OnClickRandom()">水箭龟</option> <option value="10" onclick="select1OnClickRandom()">绿毛虫</option> <option value="11" onclick="select1OnClickRandom()">铁甲蛹</option> <option value="12" onclick="select1OnClickRandom()">巴大蝴</option> <option value="13" onclick="select1OnClickRandom()">独角虫</option> <option value="14" onclick="select1OnClickRandom()">铁壳蛹</option> <option value="15" onclick="select1OnClickRandom()">大针蜂</option> <option value="16" onclick="select1OnClickRandom()">波波</option> <option value="17" onclick="select1OnClickRandom()">比比鸟</option> <option value="18" onclick="select1OnClickRandom()">大比鸟</option> <option value="19" onclick="select1OnClickRandom()">小拉达</option> <option value="20" onclick="select1OnClickRandom()">拉达</option> </select> <br> <img id="fElf" src=""> <br> <button onclick="fOnClickRandom()">随机</button> </div> <div style="float: right"> <select id="select2" > <option value="1" onclick="select2OnClickRandom()">妙蛙种子</option> <option value="2" onclick="select2OnClickRandom()">妙蛙草</option> <option value="3" onclick="select2OnClickRandom()">妙蛙花</option> <option value="4" onclick="select2OnClickRandom()">小火龙</option> <option value="5" onclick="select2OnClickRandom()">火恐龙</option> <option value="6" onclick="select2OnClickRandom()">喷火龙</option> <option value="7" onclick="select2OnClickRandom()">杰尼龟</option> <option value="8" onclick="select2OnClickRandom()">卡咪龟</option> <option value="9" onclick="select2OnClickRandom()">水箭龟</option> <option value="10" onclick="select2OnClickRandom()">绿毛虫</option> <option value="11" onclick="select2OnClickRandom()">铁甲蛹</option> <option value="12" onclick="select2OnClickRandom()">巴大蝴</option> <option value="13" onclick="select2OnClickRandom()">独角虫</option> <option value="14" onclick="select2OnClickRandom()">铁壳蛹</option> <option value="15" onclick="select2OnClickRandom()">大针蜂</option> <option value="16" onclick="select2OnClickRandom()">波波</option> <option value="17" onclick="select2OnClickRandom()">比比鸟</option> <option value="18" onclick="select2OnClickRandom()">大比鸟</option> <option value="19" onclick="select2OnClickRandom()">小拉达</option> <option value="20" onclick="select2OnClickRandom()">拉达</option> </select> <br> <img id="mElf" src=""> <br> <button onclick="mOnClickRandom()">随机</button> </div> </div> <div style="text-align: center"> <p>请输入小精灵的描述：</p> <input type="text" id="description"> <input type="submit" value="查询" onclick="descriptionOnClickRandom()"> </div> </body> <script type="text/javascript"> var fRandom = Math.floor(Math.random()*20) + 1; var mRandom = Math.floor(Math.random()*20) + 1; document.getElementById("fElf").src = "img/" + fRandom + ".png"; document.getElementById("mElf").src = "img/" + mRandom + ".png"; document.getElementById("multiElf").src = "img/" + fRandom + "/" + fRandom + "_" + mRandom + ".png"; document.getElementById("select1").options[fRandom - 1].selected = true; document.getElementById("select2").options[mRandom - 1].selected = true; document.getElementById("randomName").innerHTML = randomName[(fRandom - 1) * 20 + mRandom - 1]; function fOnClickRandom() { fRandom = Math.floor(Math.random()*20) + 1; document.getElementById("fElf").src = "img/" + fRandom + ".png"; document.getElementById("multiElf").src = "img/" + fRandom + "/" + fRandom + "_" + mRandom + ".png"; document.getElementById("select1").options[fRandom - 1].selected = true; document.getElementById("randomName").innerHTML = randomName[(fRandom - 1) * 20 + mRandom - 1]; } function mOnClickRandom() { mRandom = Math.floor(Math.random()*20) + 1; document.getElementById("mElf").src = "img/" + mRandom + ".png"; document.getElementById("multiElf").src = "img/" + fRandom + "/" + fRandom + "_" + mRandom + ".png"; document.getElementById("select2").options[mRandom - 1].selected = true; document.getElementById("randomName").innerHTML = randomName[(fRandom - 1) * 20 + mRandom - 1]; } function multiOnClickRandom() { fRandom = Math.floor(Math.random()*20) + 1; mRandom = Math.floor(Math.random()*20) + 1; document.getElementById("fElf").src = "img/" + fRandom + ".png"; document.getElementById("mElf").src = "img/" + mRandom + ".png"; document.getElementById("multiElf").src = "img/" + fRandom + "/" + fRandom + "_" + mRandom + ".png"; document.getElementById("select1").options[fRandom - 1].selected = true; document.getElementById("select2").options[mRandom - 1].selected = true; document.getElementById("randomName").innerHTML = randomName[(fRandom - 1) * 20 + mRandom - 1]; } function select1OnClickRandom() { var index = document.getElementById("select1").selectedIndex; fRandom = document.getElementById("select1").options[index].value; document.getElementById("fElf").src = "img/" + fRandom + ".png"; document.getElementById("multiElf").src = "img/" + fRandom + "/" + fRandom + "_" + mRandom + ".png"; document.getElementById("randomName").innerHTML = randomName[(parseInt(fRandom) - 1) * 20 + mRandom - 1]; } function select2OnClickRandom() { var index = document.getElementById("select2").selectedIndex; mRandom = document.getElementById("select2").options[index].value; document.getElementById("mElf").src = "img/" + mRandom + ".png"; document.getElementById("multiElf").src = "img/" + fRandom + "/" + fRandom + "_" + mRandom + ".png"; document.getElementById("randomName").innerHTML = randomName[(fRandom - 1) * 20 + parseInt(mRandom) - 1]; } function descriptionOnClickRandom() { var description = document.getElementById("description").value; var sum = 0; for (var i = 0 ; i < description.length ; ++i) { sum += description.charAt(i).charCodeAt(); } fRandom = Math.floor(sum) % 20 + 1; mRandom = Math.floor(sum * 3) % 20 + 1; document.getElementById("fElf").src = "img/" + fRandom + ".png"; document.getElementById("mElf").src = "img/" + mRandom + ".png"; document.getElementById("multiElf").src = "img/" + fRandom + "/" + fRandom + "_" + mRandom + ".png"; document.getElementById("select1").options[fRandom - 1].selected = true; document.getElementById("select2").options[mRandom - 1].selected = true; document.getElementById("randomName").innerHTML = randomName[(fRandom - 1) * 20 + mRandom - 1]; } </script> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184

主界面组件如下图所示：
在这里插入图片描述

第三步，编写融合精灵名称随机生成代码

首先在数据库中设计存储单体精灵信息和融合精灵信息的数据库表：
单体精灵表

单体精灵表

在这里插入图片描述

融合精灵表

然后向数据库中插入单体精灵信息，然后根据单体精灵名称随机生成融合精灵信息并存入数据库中：

package com.guyan.jdbc; import org.springframework.context.ApplicationContext; import org.springframework.context.support.ClassPathXmlApplicationContext; import org.springframework.jdbc.core.JdbcTemplate; import java.io.BufferedReader; import java.io.FileReader; import java.util.Random; /** * @ClassName insert * @Author 孤焰 * @Date 2020/10/17 14:45 * @Version 1.0 **/ public class Insert { public void insert() { ApplicationContext ac = new ClassPathXmlApplicationContext("spring.xml"); JdbcTemplate jdt = ac.getBean("jdt", JdbcTemplate.class); //单体精灵信息插入 try { //这里的地址为宠物小精灵图鉴的绝对地址（不知道怎么使用相对地址） FileReader fr = new FileReader("D:JetBrains_CodeIntellij_idea_CodeJAVA_EEElfBuildersrcmainTest宠物小精灵图鉴.txt"); BufferedReader br = new BufferedReader(fr); System.out.println("准备向数据库插入单体精灵信息："); String name; for (int i = 1 ; i <= 20 ; ++i) { name = br.readLine(); jdt.update("insert into singleelfinfo values (?, ?, ?)", i, name, ("img" + i + ".png")); System.out.println("ID为" + i + "的单体精灵插入成功"); } System.out.println("单体精灵信息插入结束!!"); fr.close(); br.close(); } catch (Exception e) { e.printStackTrace(); } //融合精灵信息插入 try { //读取宠物小精灵图鉴 FileReader ffr = new FileReader("D:JetBrains_CodeIntellij_idea_CodeJAVA_EEElfBuildersrcmainTest宠物小精灵图鉴.txt"); BufferedReader fbf = new BufferedReader(ffr); System.out.println("准备向数据库插入融合精灵信息："); //父亲宠物名字 String fName; //母亲宠物名字 String mName; //融合宠物ID int number = 1; for (int i = 1 ; i <= 20 ; ++i) { //读取父亲宠物名称 fName = fbf.readLine(); FileReader mfr = new FileReader("D:JetBrains_CodeIntellij_idea_CodeJAVA_EEElfBuildersrcmainTest宠物小精灵图鉴.txt"); BufferedReader mbf = new BufferedReader(mfr); for (int j = 1 ; j <= 20 ; ++j) { //读取母亲宠物名称 mName = mbf.readLine(); Random random = new Random(System.currentTimeMillis()); StringBuilder childRandomNameBuilder = new StringBuilder(); //父亲宠物名字的随机长度 int fRandomLength = random.nextInt(fName.length()); //母亲宠物名字的随机长度 int mRandomLength = random.nextInt(mName.length()); //避免父亲名字没取到的情况 if (fRandomLength == 0) { fRandomLength += 1; } //避免母亲名字没取到的情况 if (mRandomLength == 0) { mRandomLength += 1; } //生成孩子宠物的随机名字 childRandomNameBuilder.append(fName.substring(0, fRandomLength)); childRandomNameBuilder.append(mName.substring(0, mRandomLength)); //将名字转化为字符串类型 String childName = childRandomNameBuilder.toString(); jdt.update("insert into multielfinfo values (?, ?, ?, ?, ?)", number, childName, ("img" + i + "" + i + "_" + j + ".png"), i, j); System.out.println("ID为" + (number) + "的融合精灵插入成功"); ++number; } mfr.close(); mbf.close(); } System.out.println("融合精灵信息插入结束！！"); ffr.close(); fbf.close(); } catch (Exception e) { e.printStackTrace(); } } public static void main(String[] args) { Insert jdbcIn = new Insert(); jdbcIn.insert(); } }

融合精灵名称查询代码如下：

package com.guyan.jdbc; import org.springframework.context.ApplicationContext; import org.springframework.context.support.ClassPathXmlApplicationContext; import org.springframework.jdbc.core.JdbcTemplate; import java.util.List; /** * @ClassName QueryRandomName * @Author 孤焰 * @Date 2020/10/20 13:32 * @Version 1.0 **/ public class QueryRandomName { public List<String> list; public void query() { ApplicationContext ac = new ClassPathXmlApplicationContext("spring.xml"); JdbcTemplate jdt = ac.getBean("jdt", JdbcTemplate.class); list = jdt.queryForList("select multiName from multiElfInfo", String.class); } }

1234567891011121314151617181920212223242526 第四步，根据输入描述信息随机生成小精灵：

在这里先阐述一下算法思路，简单分为如下两步：

将输入的文字转换为数字（例如hash值等）生成的数字%数据库中单体小精灵的数量=当前随机生成的小精灵

具体代码如下：

function descriptionOnClickRandom() { var description = document.getElementById("description").value; var sum = 0; for (var i = 0 ; i < description.length ; ++i) { sum += description.charAt(i).charCodeAt(); } fRandom = Math.floor(sum) % 20 + 1; mRandom = Math.floor(sum * 3) % 20 + 1; document.getElementById("fElf").src = "img/" + fRandom + ".png"; document.getElementById("mElf").src = "img/" + mRandom + ".png"; document.getElementById("multiElf").src = "img/" + fRandom + "/" + fRandom + "_" + mRandom + ".png"; document.getElementById("select1").options[fRandom - 1].selected = true; document.getElementById("select2").options[mRandom - 1].selected = true; document.getElementById("randomName").innerHTML = randomName[(fRandom - 1) * 20 + mRandom - 1]; }

12345678910111213141516

至此所有功能模块都以编写完毕，把它们组装在一起即可使用！！