“去吧，皮卡丘！”

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

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

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

一、确定任务目标

任务要求：

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

最终效果图如下：

二、思路分享

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

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

三、源码实现

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

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的上限可以更改为151System.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_Code\\Intellij_idea_Code\\JAVA_EE\\ElfBuilder\\src\\main\\webapp\\img\\" + 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的上限可以更改为151System.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_Code\\Intellij_idea_Code\\JAVA_EE\\ElfBuilder\\src\\main\\webapp\\img\\" + 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>

主界面组件如下图所示：

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

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

单体精灵表

融合精灵表

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

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_Code\\Intellij_idea_Code\\JAVA_EE\\ElfBuilder\\src\\main\\Test\\宠物小精灵图鉴.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_Code\\Intellij_idea_Code\\JAVA_EE\\ElfBuilder\\src\\main\\Test\\宠物小精灵图鉴.txt");BufferedReader fbf = new BufferedReader(ffr);System.out.println("准备向数据库插入融合精灵信息：");//父亲宠物名字String fName;//母亲宠物名字String mName;//融合宠物IDint number = 1;for (int i = 1 ; i <= 20 ; ++i) {//读取父亲宠物名称fName = fbf.readLine();FileReader mfr = new FileReader("D:\\JetBrains_Code\\Intellij_idea_Code\\JAVA_EE\\ElfBuilder\\src\\main\\Test\\宠物小精灵图鉴.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);}}

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

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

将输入的文字转换为数字（例如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];}

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

四、效果截图

最终效果如下图所示：

五、最后

项目源码链接：宠物小精灵生成器

都看到最后了，求求大家点个赞再走吧！你的支持是博主创作的最大动力。

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

【分享】专治空虚寂寞，这5款app助你与快乐为伴，充实每一天~
前几天七夕,很多伙伴都有安排,我心里想,凭什么他们有安排我不能有呢?没有人陪就算了,但是一定要保持微笑,要玩的比他们开心,还能学到东西,总之一定要比撒狗粮的人过得更充实,这里推荐5款app,助你在空虚 ...
3d饼图 vue_Vue+Echarts构建可视化大数据平台实战项目分享（附源码）(上)
前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就是:数据的展示.处理和分析.目的是借助于图形化手段,清晰有 ...
上百个Android开源项目分享
转载地址:[http://blog.csdn.net/bboyfeiyu/article/details/12234163] 上百个Android开源项目分享,希望对android开发有帮助. And ...
h5页面生成图片分享到微信js_html2canvas 动态生成微信分享海报的优质js库
如何把网页上的内容用javascript来实现截图?今天分享的html2canvas就可以. 介绍在微信项目中经常会遇到动态生成海报的需求,Web前端合成图片往往会使用canvas.canvas虽然 ...
有价值项目分享，缺项目可直接搜索（持续更新中）
近来统计一下最近发的一些资源,包括CSDN+B站+微信公众号三个平台,仅包括Java资源(SSM+SpringBoot+uniapp).部分硬件.安卓资源,一共30+75+8+49+25+88=27 ...
大力出奇迹，GPU 加速 TiDB ｜ TiDB Hackathon 2020 优秀项目分享
近日,由 TiDB 社区主办,专属于全球开发者与技术爱好者的顶级挑战赛事--TiDB Hackathon 2020 比赛圆满落幕.今年是 TiDB Hackathon 第四次举办,参赛队伍规模创历届之 ...
项目团队效能的影响因素及其生成关系模型
作者:杨明海张体勤丁荣贵出处:项目管理者联盟 [摘要]项目团队效能指的是项目团队的生产力,它是项目成功或失败的关键要素.本文从系统和逻辑的角度,深入分析了影响项目团队效能的五个层面的影响因 ...
Nuxt3 + Naive UI 的SSG项目分享（一）
搭建Nuxt3项目分享你好! 这是写在分享前的前言,主要是想谈谈分享的初心,它涉及两个方面:一是整理并且巩固自己的技术应用的知识,用于查漏补缺之用:二则是秉承互联网精神,在网络上相互分享,相互协作. ...
HRM人力资源管理平台项目分享
HRM人力资源管理平台项目分享首先该项目我们是采用Git分布式版本控制工具,编写代码,提交代码(git add)(git commit),先执行git add,将变化的内容加入到版本控制,再执行gi ...

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