子供が小学生になりポケモンにハマりだしました。
そうすると「ポケモンしりとりやろーよ！」ってなるのは当然ですよね。
だけど、ポケモンの名前なんて全部覚えきれないよ。。。
ってことで、ポケモンしりとりをするためのカンニングツールを作成しました。
ポケモンしりとりカンニングツール
使用した言語
HTML,CSS,Javascriptを使用しました。
だいたいJavascriptでやってます。
完成イメージはこちらです
フォルダ構成
pokemon-shiritori
∟css
∟reset.css ⇦これはリセット用のcss
∟style.css
∟js
∟pokemon-list.js
∟script.js
∟index.htmlhtml
index.html
シンプルにポケモンの名前を入力するテキストボックスと、ポケモンの名前を表示する領域があるだけです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<title>ポケモンしりとり</title>
</head>
<body>
<div class="wrapper">
<p class="title">ポケモンのなまえを入力してください</p>
<input id="my-text" type="text" placeholder="ポケモンのなまえ" />
<ul id="my-ul">
</ul>
</div>
<script src="js/pokemon-list.js"></script>
<script src="js/script.js"></script>
</body>
</html>
css
style.css
簡単なスタイルを設定しています。
@charset "UTF-8";
body {
margin: 0; /*画面の領域を全て利用する*/
}
#my-text {
border: 1px solid #333;
height: 30px;
width: 250px;
margin: 5px;
}
ul {
padding-left: 0px; /*リスト要素の左側の余白を除外*/
}
li {
list-style-type: none; /*リストのアイコンを削除*/
}
.wrapper {
width: 300px; /*対象の範囲の横幅を指定*/
margin: 0 auto; /*中央に表示させる*/
background-color: antiquewhite;
text-align: center;
}
.title {
padding-top: 10px;
}javascript
pokemon-list.js
ポケモンのリストをjsファイルに書いています。
const get_pokemon_list = () => {
list = [
"フシギダネ",
"フシギソウ",
"フシギバナ",
"ヒトカゲ",
:
(省略)
:
"イダイトウ",
"オオニューラ",
"ハリーマン",
"ラブトロス"
];
return list;
};script.js
ポケモンの名前を入力した時に、該当するポケモンの名前を表示するという処理を書いています。
let my_text = document.getElementById('my-text');
let my_ul = document.getElementById('my-ul');
let pokemon_list = get_pokemon_list(); /*pokemon-list.jsから取得*/
/*
リストをリセット
*/
function reset_list() {
let len = my_ul.children.length;
for(let i=0; i<len; i++) {
my_ul.removeChild(my_ul.children[0]);
}
};
/*
リストに追加
*/
function add_list(val) {
console.log('val:'+val);
pokemon_list.forEach(element => {
console.log(element + ':' + element.indexOf(val));
if (val !== '' && element.indexOf(val) === 0) {
let li = document.createElement('li');
li.innerHTML = element;
my_ul.appendChild(li);
}
});
};
/*
テキスト入力イベント
*/
my_text.addEventListener('input', (e) => {
console.log('input');
reset_list();
add_list(hiraToKana(my_text.value));
});
/*
クリックイベント
*/
my_text.addEventListener('click', (e) => {
console.log('click');
reset_list();
add_list(my_text.value);
});
/**
* ひらがなをカタカナに変換
* @param {*} str
* @returns
*/
function hiraToKana(str) {
return str.replace(/[\u3041-\u3096]/g, function(match) {
var chr = match.charCodeAt(0) + 0x60;
return String.fromCharCode(chr);
});
};まとめ
これで「ポケモンしりとりやろーよ！」って場合でも、スマホを見ながらこっそりポケモンの名前を検索してしりとりができますね！
