🍵
[息抜き]乃木坂席替えゲームをHTMLとJSで作成
- 技術の発展に伴い様々な学習を続けているが、普遍的な技術で遊ぶことも重要だと感じる。
- 今回はHTMLとJavaScriptで簡単な乃木坂46席替えゲームを作成を行う。
結果
- 今回は以下の座席風レイアウトで「席替え」ボタンを押下することで遊べるようにします。
環境
- mac OS Monterey 12.5
手順
メンバーデータの取得
- メンバーの手動入力を防ぐべく、スクレイピングを利用してメンバー一覧を取得する。
- ターミナルを開き、以下のコマンドを実行。
- ※スクレイピング先は乃木坂のwikipedia
curl -s 'https://ja.wikipedia.org/wiki/%E4%B9%83%E6%9C%A8%E5%9D%8246' | sed -n '/<span class="mw-headline" id="現メンバー"/,/<span class="mw-headline" id="構成の推移">/p' | grep -E -B 4 '<td>(..*型|不明)' | sed -e 's/<[^>]*>//g' -e '/--/d' | awk 'BEGIN{print "["}(NR-1)%5==0{print " \""$1"\","}END{print "]"}'
- 結果が以下のようになることを確認。確認後、結果をコピペやメモ等で記録しておく。
- ※JSに配列としてコピーしやすいように整形
[
"秋元真夏",
"齋藤飛鳥",
"樋口日奈",
"和田まあや",
＊＊＊＊
＊＊＊＊
]
ファイル作成
- データ取得後、任意のディレクトリにHTMLとJSファイルをそれぞれ作成。
sekigaeフォルダ
|--index.html
|--index.js
内容記述
- 作成後、以下のCodepenのHTMLとJSの内容をそれぞれのファイルに記述。
- ※こちらの手順ではファイルをローカルに作成しているため、以下のjsファイルを読み込む1行をHTMLファイルの最後に記述。
<script defer src="./index.js"></script>
結果確認
- 記述後、HTMLファイルをブラウザで開いて「席替え」ボタンを複数回実行して遊べるか確認。
- 幸せになれば完了。
まとめ
- 配列のシャッフルアルゴリズムやスクレイピング技術など、単純なゲーム作成の中にも色々な要素が詰め込まれていると感じる。
- 今後も普遍的なものから流行なものまでさまざまな技術に遊びながら触れていこうと決心。
Discussion