口袋妖怪随机列表生成器,因为口袋妖怪

一则或许对你有用的小广告

欢迎加入小哈的星球 ,你将获得:专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡/ 赠书活动

目前,正在 星球 内带小伙伴们做第一个项目:全栈前后端分离博客项目,采用技术栈 Spring Boot + Mybatis Plus + Vue 3.x + Vite 4手把手,前端 + 后端全栈开发,从 0 到 1 讲解每个功能点开发步骤,1v1 答疑,陪伴式直到项目上线,目前已更新了 204 小节,累计 32w+ 字,讲解图:1416 张,还在持续爆肝中,后续还会上新更多项目,目标是将 Java 领域典型的项目都整上,如秒杀系统、在线商城、IM 即时通讯、权限管理等等,已有 870+ 小伙伴加入,欢迎点击围观

所以,我不是一个真正的口袋妖怪人(是的,我知道这个词有重音,但我什至懒得打字),但我儿子昨晚来找我,提出了一个有趣的要求.他是个艺术家,他决定要开始一个雄心勃勃的项目:每天他都要画一只口袋妖怪。所有 700 多个。他的要求很简单。鉴于 pokemon 有一个数字,他希望我生成一个从 1 到 721 的随机列表。

我告诉他我可以做到——但我有一个更好的主意。我知道有一个 pokemon api ( pokéapi ),我想我可以使用该数据为他快速列出一个列表。不幸的是,该 api 不支持一次返回所有 pokemon 的功能。但 api 本身是 100% 开源的 ( https://github.com/phalt/pokeapi ),它包括 api 背后的原始 csv 数据。所以我在本地克隆了一个 repo 的副本并构建了以下快速演示。作为警告,这 没有 优化。我想快速构建一些东西(那是昨晚,我累了,等等)。


 <html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
function randomintfrominterval(min,max)
{
    return math.floor(math.random()*(max-min+1)+min);
}

$(document).ready(function() {

console.log("ready to go"); $.get("pokeapi/data/v2/csv/pokemon.csv", function(res) { var lines = res.split(/\n/); //remove line 1 lines.splice(0,1);

//remove specials lines = lines.filter(function(line) { var parts = line.split(","); return parseint(parts[parts.length-1],10) === 1; });

console.log(lines.length + " lines of data");

var s = ""; while(lines.length) { var chosen = randomintfrominterval(0, lines.length-1); var poke = lines[chosen]; var parts = poke.split(","); var sprite = "<img src="pokeapi/data/pokemon_xy_sprites/"+parts[0]+".png">"; s += "<tr><td>"+parts[0]+"</td><td>"+parts[1]+"</td><td>"+sprite+"</td></tr>"; lines.splice(chosen,1); } $("table tbody").append(s); });

}) </script> <style> th { width: 200px; } td { text-align: center; } </style> </head>

<body>

<table border="1"> <thead> <tr><th>id</th><th>name</th><th>sprite</th></tr> </thead> <tbody> </tbody> </table>

</body> </html>

我首先简单地对包含所有口袋妖怪数据的 csv 文件进行 ajax 处理。我去掉第一行(它只包含标题),然后过滤掉包含“非默认”口袋妖怪的行。我儿子可以解释为什么这很重要——坦率地说,我不明白。然后我只是从数组中随机选择一个项目并将其删除。

github 存储库还包含图像(精灵),因此我将其包含在表格显示中。这是一些报告的快速快照:

如果您想自己运行演示,可以在此处进行: http://static.raymondcamden.com/pokemon/