所以,我不是一个真正的口袋妖怪人(是的,我知道这个词有重音,但我什至懒得打字),但我儿子昨晚来找我,提出了一个有趣的要求.他是个艺术家,他决定要开始一个雄心勃勃的项目:每天他都要画一只口袋妖怪。所有 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/