はじめに
ほぼ初心者(前に少し調べた程度)が仕事に行く元気を出すために作ったものです。
ホラーゲーム「SIREN」シリーズのキャラ名、アイテム名、今日のひとことを表示するだけのプログラムです。
各シリーズのどれかに限定するか、全シリーズを対象にするか選ぶとボタンの文字が変わります。
とりあえずこんなの作りたーいみたいな雑な発想から、あの機能欲しいこんなのつけたいでごちゃごちゃ機能を足していったものです。
#変遷まとめみたいなやつ
初めに作った機能
・キャラ名、アイテム名、セリフを出す
・シリーズを限定できる(無印だけ出す、全シリーズ出すなどが選べる)
後々付け加えた機能
・シリーズを限定するとボタンの文字が変わる
無印/全シリーズ、2のみ、NTのみで別々
・全シリーズにしたとき、ランダムにキャッチコピーを表示する。
変更ボタンを押すとキャッチコピーがランダムに変わる
今後付けたい機能
・
前置きが長くなりましたがここからがコードです。
だいぶごちゃっとしてますが(Javascriptが)多めに見ていただけると幸いです。
ここから何とかもうちょっと短くしたい気持ちはあります。
#コード
まずはHTML
onchangeやonclickを使ってJavascriptのfunctionを呼び出しています。
javascript.html
<html lang="ja">
<head>
<script type="text/javascript" src="javascript_imp.js"></script>
<link rel="stylesheet" href="javascript_imp.css">
<title>練習</title>
</head>
<body class="box">
<p>SIREN占い</p>
<form name="form1">
<select name="limited" id="limited" size=1 onchange="change_func()">
<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>
<p></p>
<button id="button_click" onclick="click_func()">ジェノサイダー！</button>
<p></p>
<span class="change" id="change"></span>
<p></p>
<fotter>
参考資料:各種bot 実況者様の動画など
</fotter>
</body>
</html>
次にJavaScriptです。
for文、if文、Random関数、配列、連想配列(dictionary)などを使ってキャラ名を選択したりキャラ説明を出しています。
セリフはセリフでfunctionにしてあるのは純粋に一つ一つの要素が長くて後で追加したり編集するときに絶対めんどくさくなりそうだと思ったからです。
キャラごとのセリフをそれぞれ配列にしてfunctionの最後で一つに結合。それをjsファイル全体で使える変数に入れ直してます。
javascript.js
let series = ["one", "two", "nt"];
let character_one = ["須田恭也","神代美耶子","竹内多聞","安野依子","志村晃","宮田司郎","牧野慶","八尾比沙子","神代亜矢子","神代淳","高遠玲子","四方田春海","美浜奈保子","恩田理沙","前田知子","石田徹雄", "恩田美奈","志村晃一"];
let character_two = ["一樹守","木船郁子","矢倉市子","永井頼人","三沢岳明","阿部倉司","三上脩","岸田百合","多河柳子","藤田茂","喜代田章子","加奈江","太田ともえ","太田常雄","三上隆平","沖田宏"];
let character_nt = ["ハワード・ライト","美耶古","サム・モンロー","メリッサ・ゲイル","ベラ・モンロー","犀賀省悟","アマナ","ソル・ジャクソン","河辺幸江"];
let item_one = ["火掻き棒","ネイルハンマー","ラチェットスパナ","テレフォンカード","発煙筒","ヴェール","壊れたラジオ","拳銃","木製バット","ライター","笑い袋","ビーズ人形","焔薙","図書貸し出しカード","写真","宇理炎", "鎌"];
let item_two = ["壊れた朱石のブレスレット","壊れた碧石のブレスレット","釘バット","メダル","髪飾り","首輪","奇石","週刊アトランティス","TNT","釘","軍用スコップ","闇那其","ゴルフクラブ","空き缶",""];
let item_nt = ["一升瓶","アナログテレビ","改造散弾銃","案内板","ビデオカメラ","缶切り","携帯電話","杭","アンテナ","ブローチ","柄杓","宇理炎","つるはし","トロッコ","ハニュウダカブト",""];
let quotation_one = Quotation_One();
let quotation_two = Quotation_Two();
let quotation_nt = Quotation_Nt();
let character;
let item;
let quotation;
let word;
let c_series;
let i_series;
let q_series;
let num_fortune;
let array_character = [];
let array_item = [];
let array_quotation = [];
let num_c, num_i, num_q;
let moji;
num_c = 0;
num_i = 0;
num_q = 0;
//どのシリーズか限定する文言が変わったらボタンの文字も変更
function change_func(){
let limited = document.getElementById("limited").value;
if(limited == "one_only"){
document.getElementById("reload").innerHTML = "";
document.getElementById("button_click").innerHTML = "ジェノサイダー！";
}else if(limited == "two_only"){
document.getElementById("reload").innerHTML = "";
document.getElementById("button_click").innerHTML = "神風見せてやるよ！";
}else if(limited == "all"){
random_tagline();
document.getElementById("reload").innerHTML = "<span id='random' onclick='random_tagline()'>変更</span>";
}else {
document.getElementById("reload").innerHTML = "";
document.getElementById("button_click").innerHTML = "Go To Hell!";
}
}
//配列を綺麗にまっさらにする
function array_clean(){
array_character.splice(0);
array_character = array_character.filter(Boolean);
array_item = array_item.filter(Boolean);
array_quotation = array_quotation.filter(Boolean);
}
//ゲームのキャッチコピーのどれかをランダムに出す
function random_tagline(){
//ランダムな数字を1-3で出す
let zetubo = Math.floor(Math.random() * 3) + 1;
if(zetubo == 1){
document.getElementById("button_click").innerHTML = "どうあがいても、絶望";
}else if(zetubo == 2){
document.getElementById("button_click").innerHTML = "逃げ場なんて、ないよ";
}else{
document.getElementById("button_click").innerHTML = "息をすることさえ、恐怖";
}
}
//ボタンをクリックしたときの動作
function click_func(moji) {
let num_fortune = document.getElementById("number").value;
array_character.length = 0;
array_quotation.length = 0;
array_item.length = 0;
num_i = 0;
num_c = 0;
num_q = 0;
//もし占い回数が1未満、もしくは5より大きかった場合は警告を出す
if(num_fortune<1 || num_fortune>5){
document.getElementById("caution").innerHTML = "範囲外です。1～5のどれかを入れてください";
moji = "";
}else{//それ以外の場合(占い回数が範囲内の場合)
document.getElementById("caution").innerHTML = "";
moji = "";
for(let i = 0; i < num_fortune; i++){
//シリーズが限定されているかを確認
let select = document.form1.limited.selectedIndex;
if(select == 0){
c_series = "one";
i_series = "one";
q_series = "one";
}else if(select == 1){
c_series = "two";
i_series = "two";
q_series = "two";
}else if(select == 2){
c_series = "nt";
q_series = "nt";
i_series = "nt";
}else{
//キャラ、アイテム、セリフをそれぞれランダムに取得
c_series = series[Math.floor(Math.random() * series.length)];
q_series = series[Math.floor(Math.random() * series.length)];
i_series = series[Math.floor(Math.random() * series.length)];
}
//キャラクターのシリーズをどれにするか
if(c_series == "one"){
character = character_one[Math.floor(Math.random() * character_one.length)];
}else if(c_series == "two"){
character = character_two[Math.floor(Math.random() * character_two.length)];
}else if(c_series=="nt"){
character = character_nt[Math.floor(Math.random() * character_nt.length)];
}
//アイテムのシリーズをどれにするか
if(i_series == "one"){
item = item_one[Math.floor(Math.random() * item_one.length)];
}else if(i_series == "two"){
item = item_two[Math.floor(Math.random() * item_two.length)];
}else if(i_series=="nt"){
item = item_nt[Math.floor(Math.random() * item_nt.length)];
}
//名言のシリーズをどれにするか
if(q_series == "one"){
quotation = quotation_one[Math.floor(Math.random() * quotation_one.length)];
}else if(q_series == "two"){
quotation = quotation_two[Math.floor(Math.random() * quotation_two.length)];
}else if(q_series=="nt"){
quotation = quotation_nt[Math.floor(Math.random() * quotation_nt.length)];
}
//要素を追加していく
array_character[num_c] = character;
array_item[num_i] = item;
array_quotation[num_q] = quotation;
//配列のempty要素を全削除
array_character = array_character.filter(Boolean);
array_item = array_item.filter(Boolean);
array_quotation = array_quotation.filter(Boolean);
moji += add(character, item, quotation, i, num_fortune);
num_c++;
num_i++;
num_q++;
}
}
//HTMLを変更する
document.getElementById("change").innerHTML = moji;
}
//説明を出すときの分岐用に文字を数字にそれぞれ変換する
function henkan(suji){
if(suji == "one"){
return 1;
}else if(suji == "two"){
return 2;
}else{
return 3;
}
}
//HTML作成用
function add(character, item, word, i, num_fortune){
return "<p>----------</p><span class='fortune-telling'><div class='explain' id='explain_" + i + "'></div><span class='character' id='character'>今日のあなたにぴったりなキャラクターは<div class='link' onclick='Explain_character(" + i + ", " + henkan(c_series) + ", " + num_fortune + ")'>" + character + "</div>です！</span><p></p><span class='item' id='item'>ラッキーアイテムは<div class='link' onclick='Explain_item(" + i + ", " + henkan(i_series) + ", " + num_fortune + ")'>"+item+"</div>です！</span><p></p><span class='quotation ' id='quotation'>今日の一言は「<div class='link' onclick='Explain_quotation(" + i + ", " + henkan(q_series) + ", " + num_fortune + ")'>"+word+"</div>」です！</span></span>";
}
//無印の配列を生成して合成する奴
function Quotation_One(){
let kyoya = ["お前じゃなくて、須田恭也","悪いけど、美耶子との約束なんだ","そんで、この村からも逃げ出そう","お前らみたいなのがいる限り、俺は何度でも現れる"];
let miyako = ["恭也…ありがとう","ぐーず","ケルブじゃないとやっぱりだめ…","早く連れてけ！","私の目を使って"];
let jun = ["昨日のお返しだよ","美耶子、お前の役割はまだ終わってないだろう？","どうして亜矢子まで！","誰だ！"];
let ayako = ["違う…私は違う…！","あんたが生贄の羊になりなさいよ！","淳は、私の許嫁なんだから！"];
let yao = ["この水があなたの体内に入ったの…流した血の分だけ","あなたが実を盗んだのね！","もう、待つのは嫌…！"];
let makino = ["八尾さん…どこに行ったんだ？","私は…ただのみじめな道化だった","狂ってる…！","知子ちゃん！","きゅるってる！"];
let miyata = ["私も美奈さんを探していたんだ。とりあえず一緒に病院に","っ馬鹿な…！","それでも俺は、牧野さんになりたかった","煉獄の炎よ。俺の命と引き換えだ","あぁ…今行くよ", "本当にしつこい女だな"];
let risa = ["お姉ちゃん！お姉ちゃんなの！？","もしかして、宮田先生？私、恩田美奈の妹です！理沙です！","お姉ちゃんはどこなんですか！？お姉ちゃんは無事なんですか！？","そっくり！先生も双子？","お姉ちゃん男なんですか！？お姉ちゃん武士なんですか！？"];
let akira = ["お前が呼んだのか？","よそ者か…迷い込んだのか？","竹内か…","この村ももう終わりだ…","結局逃げきれないということか"];
let mihama = ["こっそりカメラ回してるんじゃないでしょうね！","永遠の若さ…永遠の若さ…"];
let tomoko = ["求導師様、どうしたんですか？","はーるみちゃんがほーしい","お父さん！お母さん！開けてよ！"];
let tamon = ["志村さん…なのか…？","車にいろと言ったはずだ","しかし、とんだ里帰りに君を巻き込んでしまったな","お父さん、お母さん…！"];
let yoriko = ["先生、家族ごっこしてる場合ですか！","無理やりついてきたのは私ですよ？","とりあえず村の人探しましょうよ。きっと大騒ぎですよ！","先生、それって…本物？"];
let takato = ["先生が絶対に助けてあげるからね…！","春海ちゃん！だめ…諦めたらだめ…！","春海ちゃん、どこぉ…？","めぐみ…お母さんを許して…","じゃあ、先生はお母さんになってあげる。春海ちゃんの"];
let harumi = ["お母さん…","先生、春海怖いよ…","うん…春海、待ってる","先生、助けて！先生！早く来て！"];
let ishida = ["無駄な抵抗は止めなさい","了解…射殺します"];
return kyoya.concat(miyako, jun, ayako, yao, makino, miyata, risa, akira, mihama, tomoko, tamon, yoriko, takato, harumi, ishida);
}
//2の配列を生成して合成する奴
function Quotation_Two(){
let ituki = ["クソ…俺は、だまされたのか？","化け物め…化け物め…化け物め…！","人にものを頼むときはお願いします、だろ？","やつの動きを止めるんだ！","俺という観測者が到達したとき、可能性は一つに収束する"];
let ikuko = ["もう一人の私…こんな思いしないのかな…？","結局この島に引き寄せられちゃったよ、お母さん…","先に…私たちが先にたどり着かないと！","そんな…化け物見るような眼で見ないでよ…","こんなところでかっこつけたって誰も見てないんだから！"];
let nagai = ["神風見せてやるよ！","沖田さん！死なないでください…沖田さん…！","人に助けてもらったときは何て言うんだっけ？"];
let misawa = ["士長、応戦だ","俺だけ先に目覚めちゃうけど…悪いな","久しぶりに最高の気分だ","あっち側もこっち側も関係ない","なーがいくん！一緒に遊びましょー！"];
let itiko = ["わからない…わからないよ…","お寝坊さんなお姉ちゃん","お前もずっと寂しかったんだろう？","違う…私、あの時死んだ！私は私じゃない！","みーつけた！"];
let kanae = ["脩…お姉ちゃんを許して…","脩、どこにいるの？","七つの門の七つの鍵を開けるの","お休み、脩"];
let yuri = ["あなたは、私を信じてくれる？","お母さんは鳩を飛ばし続けてたの","私を見て…"];
let shu = ["ツカサなのか…？これは、お前の…","お姉ちゃん！","お姉ちゃんもお外で遊べたらいいのにね","見える…見えるよ……"];
let abe = ["これ…純金じゃねぇのか？","クソすぎだろ！このままじゃよぉ…"];
let ryuko = ["あなた、お母さんと同じ気配…お母さん、目覚めようとしてるのね？","ごめんね…"];
let ryuhei = ["化け物なんかじゃないですよ","おーい、かくれんぼか？","学会に発表しなきゃなぁ"];
let hujita = ["やんなっちまうなぁ…","すまんなぁ、朝子","検挙するぞ！","始末書…始、末書"];
let kiyota = ["なんだか最悪の誕生日","あぁ…たくさんの強い念が…","私だってペーパーなんだから！","…分かった。信じる"];
let tomoe = ["髪飾り…お父様にもらった、髪飾り…","ここにいる！化け物女がここにいる！","誰か来て！誰かー！","虫けらのくせに！","髪飾り返してよ！","都会ってどんなところなのかなぁ"];
let tuneo = ["お前たち、やってくれるな？","藤田のバカ息子が…結局逃げかえってきたか"];
let okita = ["永井も随分と冷たいよなぁ","永井ぃ！俺だよ俺ぇ！","永井ー。根性出せよぉ"];
return ituki.concat(ikuko, nagai, misawa, itiko, kanae, yuri, shu, abe, ryuko, ryuhei, hujita, kiyota, tomoe, tuneo, okita);
}
//NTの配列を生成して合成する奴
function Quotation_Nt(){
let haward = ["Miyako, I promise.","ボクは、ハワード。君は？","ミヤコ、イッショ、ガンバル！"];
let saiga = ["運命に抗ってみますか？ご自由に","幸江…","俺はダンテではない。ベアトリーチェの導きは期待できない","もうあきらめろ。無駄だ。流れに身を任せろ","さすがに飽きた"];
let bella = ["Daddy said you can make bugs show up if you put something sweet on a tree...(ダディが言ってた 木に蜜を塗ったら虫が来るって)"];
let mellisa = ["When this thing died, the others did too.(こいつが死んだら…あいつらも死んだ？)"];
let yukie = ["先生は…私がいないと、だめなんだからぁ","先生ぇ…"];
let sam = ["Hey! Does that works? Maybe we can use it to call for help!(おい！その電話は使えないのか？その電話で助けを呼んでくれよ！)"];
let sol = ["Melissa,Bella...I hope you guys are okay.(メリッサ、ベラ…無事でいてくれよ…)"];
let amana = ["Perhaps we can set a trap.(罠を仕掛けられないでしょうか？)"];
let miyako = ["死にたくない！一緒に逃げたい！村の外を見てみたい、こんな村大嫌い…！","…早く連れてけ","いや！死ぬなんて絶対に嫌！","こんなことしかできない。…ごめんね、せっかく綺麗だったのに"];
return haward.concat(saiga, bella, mellisa, yukie, sam, sol, amana, miyako);
}
//どのシリーズのアイテムの説明を表示するかを判定
function Explain_item(item, series, num_fortune){
let id;
document.getElementByClassName("link").style = ""; // colorのみ
document.getElementByClassName("link").innerHTML = "";
let name = array_item[item];
if(series == 1){
ExplainItem_one(name, item);
}else if(series == 2){
ExplainItem_two(name, item);
}else{
ExplainItem_nt(name, item);
}
}
//どのシリーズのキャラの説明を表示するかを判定
function Explain_character(character, series, num_fortune){
let id;
for(let i = 0; i<num_fortune; i++){
id = "explain_" + i;
document.getElementById(id).style = ""; // colorのみ
document.getElementById(id).innerHTML = "";
}
let name = array_character[character];
if(series == 1){
ExplainCharacter_one(name, character);
}else if(series == 2){
ExplainCharacter_two(name, character);
}else{
ExplainCharacter_nt(name, character);
}
}
//無印キャラクター説明用
function ExplainCharacter_one(character, num){
let dictionary = {"須田恭也":"『SIREN』の主人公。16歳。通称『ジェノサイダー』。都市伝説について調べようと村を訪れ、異変に巻き込まれる。", "安野依子":"『SIREN』の登場人物。竹内多聞の車にこっそりと乗りこんで着いてきたために異変に巻き込まれる。明るくマイペースな性格。", "竹内多聞":"大学教授。村の伝わる怪しい儀式などの真相を知るために帰ってきて異変に巻き込まれる。なぜか拳銃を所持。こっそり着いてきた生徒の安野依子と行動を共にする。", "志村晃":"山の中に住んでいた老人。異変に巻き込まれた村をおかしく思い、山から下りてくる。", "宮田司郎":"宮田医院の医者。その裏では神代にとって不都合な人間を消すという役割を担っている。とある事情から山の中にいたところで異界に巻き込まれる。", "牧野慶":"求導師。気弱な性格をしている。儀式をしていたが異変に巻き込まれ、求導女を探して歩き回る。道中で前田知子を保護し、行動を共にする。", "八尾比沙子":"求導女。須田を導いたりと優しいように見えるが…？", "神代美耶子":"神の花嫁。儀式の生贄だったが、異変に巻き込まれた際に逃走。盲目の為、一人での行動がほぼ不可能。", "神代淳":"神代の次代当主として養子になった。その立場故か少し傲慢なところがある。儀式中に異変に巻き込まれる。", "神代亜矢子":"神代家次期当主、神代淳の許嫁。神代淳によく構われている妹の神代美耶子の事をよく思っていない。儀式中に異変に巻き込まれる。", "四方田春海":"小学生。高遠玲子、名越栄治と共に星を見る会に参加中に異変に巻き込まれる。教師である高遠玲子と共に行動する。", "高遠玲子":"教師。名越栄治、四方田春海と星を見る会に参加中に異変に巻き込まれる。生徒である四方田春海と行動を共にする。", "志村晃一":"志村晃の息子。27年前に行方不明となった。詳しくは羽生蛇村異聞参照。", "美浜奈保子":"グラビアアイドル。クルーたちと共に村に来たが、巻き込まれた際に離れ離れとなってしまう。一人で行動する。", "恩田理沙":"恩田美奈の双子の妹。姉に会いに村に戻ってきたが異変に巻き込まれる。一人で廃屋から脱出した後、宮田司郎と出会い行動を共にする。", "前田知子":"両親と喧嘩し、家出している最中に異変に巻き込まれてしまった少女。両親のもとへ戻るため求導師と共に行動する。", "石田徹雄":"警察官。須田の前に現れ、銃を向けてくる。", "恩田美奈":"宮田医院の看護師。異変に巻き込まれる前に死亡していた。"}
let id = "explain_" + num;
document.getElementById(id).innerHTML = dictionary[character];
document.getElementById(id).style = "border:solid 2px #CCCCFF"; // colorのみ
}
//2キャラクター説明用
function ExplainCharacter_two(character, num){
let dictionary = {"一樹守":"『SIREN2』の主人公。オカルト雑誌、週刊アトランティスの記者。夜見島に伝わる都市伝説などを調査するために夜見島へ渡る。", "木船郁子":"感応視という能力を持っている。一樹たちを夜見島に送る船長の手伝いをしていた。", "矢倉市子":"記憶が一部ない少女。フェリーの中で目を覚まし、助けに来てくれた警察官の藤田茂と共に行動する。", "永井頼人":"夜見島に不時着した自衛隊の士長。尊敬する上官の沖田が着陸の際に自分を庇って亡くなってしまったため、同じく生存した三沢岳明と共に行動する。", "三沢岳明":"永井の上官。生き残った永井の指揮を執った。幻覚を見たりすることがあり、薬に頼っている。", "阿部倉司":"恋人が死んだと信じられず、探すために占い師の喜代田章子と共に夜見島へ来た。", "三上脩":"とある事柄によって弱視になってしまった青年。自らの過去の記憶を取り戻すべく生まれ故郷の夜見島へと向かった。", "岸田百合":"正体不明の少女。島の廃倉庫の中に倒れていたところを一樹によって保護される。", "多河柳子":"阿部の恋人。頭部を何度も殴打されて死亡している。", "藤田茂":"警察官。人のいないはずの夜見島で怪しい女を見たという通報を聞いて夜見島へと向かう。お人好しなところがあり、だまされやすい。", "喜代田章子":"占い師の少女。過去視という能力を持っている。阿部の無実を確実にするため、阿部と共に夜見島へと向かう。", "太田ともえ":"網元の娘。網元という自分の父親の仕事に対して誇りを持っており、自身も島を不浄から守るため尽力する。髪飾りは父親からのプレゼント。", "太田常雄":"網元。島を不浄なものから守るために尽力している。", "三上隆平":"三上脩の父親。SIRENの登場人物、竹内多聞の父親とは交流があった。妻を事故で亡くしている。", "沖田宏":"永井頼人の上官であり三沢岳明の部下。不時着の際に永井を庇って死亡。"}
let id = "explain_" + num;
document.getElementById(id).innerHTML = dictionary[character];
document.getElementById(id).style = "border:solid 2px #CCCCFF"; // colorのみ
}
//NTキャラクター説明用
function ExplainCharacter_nt(character, num){
let dictionary = {"ハワード・ライト":"『SIREN:NT』の主人公。儀式の犠牲になろうとしていた少女を助け、異界に巻き込まれる。", "美耶古":"神の花嫁。儀式の際にハワードが止めに入った時に逃走。盲目ではない。", "サム・モンロー":"教授。娘と一緒に暮らしており、妻とは別れている。村の儀式を撮りに来たテレビクルーたちに同行している時に異界に巻き込まれる。", "メリッサ・ゲイル":"テレビクルーの一人。娘とは一緒に暮らしておらず、夫とは別れている。儀式を撮っている最中に異界に巻き込まれる。", "ベラ・モンロー":"サム・モンローとメリッサ・ゲイルの娘。父親と一緒に暮らしており、ベビーシッターが見つからなかったため", "犀賀省悟":"犀賀医院の院長。その裏ではアマナの不都合となる人間を消すという役割をしていた。", "アマナ":"求導女。怪我をしていたハワードの事を助け、共に行動する。", "ソル・ジャクソン":"テレビクルーのカメラマン。メリッサの事が好き。", "河辺幸江":"犀賀医院の看護師。異界に巻き込まれる前に死亡していた。"}
let id = "explain_" + num;
document.getElementById(id).innerHTML = dictionary[character];
document.getElementById(id).style = "border:solid 2px #CCCCFF"; // colorのみ
}
最後はCSSです。
体裁をいい感じに整えています。
javascript.css
span{
display: inline-block;
margin:10px 10px;
}
body{
display: inline-block;
margin:10 auto;
width:100vm;
padding-bottom:10%;
}
#caution{
color:red;
}
.fortune-telling{
border:1px dashed blue;
}
form{
font-size:16px;
}
.change{
margin-left-10%;
margin-right:auto;
}
.box{
border-right:solid 3px #66CCFF;
border-left:solid 3px #66CCFF;
border-top:solid 3px #9999CC;
border-bottom:solid 3px #9999CC;
text-align:center;
width:80%;
}
.link{
color:#6699CC;
}
fotter{
color: #CCCCCC;
font-size:13px;
}
#random{
border:solid 1px #99CCCC;
user-select: none; /* CSS3 */
-moz-user-select: none; /* Firefox */
-webkit-user-select: none; /* Safari、Chromeなど */
-ms-user-select: none; /* IE10かららしい */
}
というわけでコードはこんな感じでした。
#まとめ
難しかったです。
予想しない挙動(キャラ名を押すと必ずすべての説明が一番上のキャラ名の上に表示されてしまうなど)が起きたりエラーが起きたり結構してました。
でも楽しかったのでこれからも改良していきたいですね。
追記
コメントでのご指摘で変数宣言にvarは古いとのことでjsコードを差し替えました。