占い的なものを作ってみた話
毎日ごく普通の事務仕事をしている私。
しかし、ある日ふと思った。
『モチベーションが欲しい…！』
ということでJavascriptを使って占い的なものを作ってみた。
メモ的な感じで書いてみます。
内容が『私の好きなゲームのキャラ名、アイテム名、セリフをランダムに取得する者を作成した』というものなので、『SIREN』というホラーゲームのネタバレをセリフなどでもされたくないという方は見ないのを推奨いたします。
占いと言えば『今日のあなたの運勢はXX!ラッキーOOは…』という感じだと思うんですよ。
なので今までちょこっといじっただけのHTML、CSS、そして思いついた当時は全く触ったことのなかったJavaScript(jQuery)を使用してやってみようと考えたわけです。
ちなみに私が大好きなホラーゲーム、SIRENをもとにして作成しました。
理由は朝に占い的なものやって「おっ、今日はこのキャラか！」ってなったらテンション上がるからです。
運勢はさておくことにしました(表示はできるけど興味がないので)。
表示するのは以下三つ。
・キャラ名
・アイテム名
・セリフ
シリーズは全シリーズ対象…とも思ったんですが、ツイッターを見ていると結構「無印だけやった」という人や「NTだけはやったけど…」という人もいるんだなぁと思って選べるようにすることに。
ということでHTMLは以下の通りに。
<html lang="ja"> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- <script type="text/javascript" src="siren.js"></script> --> <meta charset = "UTF-8"> <!-- <link rel="stylesheet" href="siren.css"> --> <title>練習</title> </head> <body class="box"> <p class="tit">SIREN占い</p> <form name="form1"> <select name="limited" id="limited" size=1> <option value="one_only">無印のみ</option> <option value="two_only">2のみ</option> <option value="nt_only">ntのみ</option> <option value="all">全シリーズ</option> </select><span id="reload"></span> <p></p> <label for="number">何回占いをしますか？(1～5の間で入れてください)</label> <input type="number" name="number" id="number" min="1" max="5" value="1"></input>回 <p><span id="caution"></span></p> </form> <button id="button_click">ジェノサイダー！</button> <p></p> <div id="wrapper"> <div class="explain"> </div> <p> <span class="change" id="change"></span> </p> </div> <fotter> 参考資料:各種bot 実況者様の動画など </fotter> </body>
タイトルは純粋に考えるのがめんどくさかったのでひらがなになってます←
説明を簡単にすると、要素的には
select→シリーズを限定させる
input→占いをする回数(やろうと思えば無限にできる)
span→ボタン替わり
となってます。
なんか占い的なものの原型がこれで完成です。
次にJavaScriptで色々作ります。
欲しい機能は以下の通り。
1.シリーズを選択するとその選択したシリーズによって決定ボタンの言葉が変わる。
・無印選択時「全部…消してやる！」
・2選択時「神風見せてやるよ！」
・NT選択時「Go To Hell！」
・全シリーズ選択時「(ランダムに3つの中から表示する+ボタンを押すと3つの中からランダムに変更)」
2.キャラ名、アイテム名、セリフをランダムに出力し、
【今日のあなたにぴったりなキャラクターは(キャラ名)です！
ラッキーアイテムは(アイテム名)です！
今日の一言
「(セリフ)」】と出力
3.アイテム名、キャラ名、セリフの背景色をシリーズごとに変化させる。
最終的なコードはこんな感じです。
長くなってしまうので
JavaScriptでやっていることをまとめます。
・配列にキャラ名やアイテム名などをまとめる(セリフは長いので一番下で書くキャラごとに作成してまとめている)
・シリーズ名が変更されたらボタンの文字を変更
・結果を作成
・CSSを入れる(事前に変数に入れてあるのをセット)
今度ちょっと改良して、結果をタグで表示できたりできると見やすいかなぁ…など思ったりしてます。
多分、もっと技術のある方からすればもっと効率の良い方法があるかとは思いますが私の限界はここでした。
というわけで以上です！
SIRENは個人的にすごく大好きなゲームなので、ホラー平気な人はぜひやってみてほしいです。
一番好きなキャラは2の太田ともえちゃんです()
