今回から暗記ゲームを作成していきたいと思います。
暗記ゲームのサンプルを用意しましたので下記のリンクから試しに動かしてみてください。
ウェブアプリの問題表示部分を作っていく
それでは作成していきます。
まずは、HTMLとCSSのファイルを用意しましょう。
VS Codeでindex.htmlとstyle.cssを作成してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="style.css"> <title>暗記ゲーム</title> </head> <body> </body> </html> |
style.css
|
1 |
/*空っぽ。これから書いていきます。*/ |
今回作るゲームはまず、問題を表示する必要がありますね。
まずは問題を表示するための枠を作りましょう。
今回はブロック要素で作成します。
bodyの中は次のようになります。
|
1 2 3 |
<body> <div>遣唐使の廃止年は？</div> </body> |
表示例
上のような画面が出てきましたね。
ちょっと寂しすぎるのでCSSで背景をつけておきましょう。
cssの背景のつけ方は覚えていますか。
次のようになります。
お久しぶりのCSS
|
1 2 3 |
div{ background-color: darkkhaki; } |
表示例
ちなみに色はカラーコードでも指定することができます。
カラーコードというのは#に6つの数字(0~9)、記号(a~f)の
記号の組み合わせで色を指定することができます。
googleでカラーピッカーと検索すると自分の好みの色を直感的に
探せるツールが表示されるので試してみてください。
こんな感じに、変更します。
|
1 2 3 |
div{ background-color:#9ef442; } |
結果次のようになります。
色がカラーピッカー通りになりますね。
現在の表示位置では上にありすぎるので、調整します。
調整の仕方については以前に説明した、marginとpaddingで行います。
それでは、divの位置を調整しましょう。
|
1 2 3 4 5 |
div{ background-color:#9ef442; margin:20px; padding:10px; } |
divのスタイルにmarginとpaddingを追加しました。
marginでdivの左右上下の隙間を20px、div内部の上下左右の空白を10px取るように設定しました。
次のように表示されます。
隙間が空いて、だいぶみやすくなりましたね。
次に回答を入力する入力欄を作成しましょう。
入力欄の作成は次のように書くことができます。
|
1 2 |
<input type="text" value="入力欄の値"> //終了タグなし。 |
まずはこのHTMLを問題の下に書いてみましょう。
問題の横に入力欄が出ましたね。そして入力欄の中身には
『入力欄の値』と表示されています。
見た通りですが、「value=」の内容が入力欄に表示されるということです。
また、問題の後に改行が行われていないことから、inputがインライン要素
ということがわかると思います。
解答欄は下に配置したいので、<br>で改行しておきましょう。
そして入力欄の中身は空にしておきます。
HTMLの内容は次のようになります。
|
1 2 3 4 5 6 |
<body> <div> 遣唐使の廃止年は？<br> <input type="text" value=""> </div> </body> |
次は操作用のボタンを作成します。
ウェブアプリのボタンの作成
問題の回答と次の問題を表示するためにボタンをつけます。
今回つけるのは、回答ボタンと、次の問題へ移動するボタンです。
ボタンの作り方は次の通りです。
|
1 |
<input type="button" value="ボタン！"> |
入力欄の作り方と似ていますね。
異なるのはtypeがtextではなくbuttonになるということです。
まずは上のHTMLを入力欄の次の行に書いてみましょう。
|
1 2 3 4 5 6 7 |
<body> <div> 遣唐使の廃止年は？<br> <input type="text" value=""> <input type="button" value="ボタン！"> </div> </body> |
ボタンが表示されました。
ここで注意することがあります。
ボタンの場合、valueはボタンに表示される文字になります。
今回は『回答』と『次の問題』のボタンを作流ので
value値にそれぞれ入力してやれば良いのです。
それでは『回答』と『次の問題』ボタンを作成しましょう。
ついでに改行もしておきます。
|
1 2 3 4 5 6 7 8 |
<body> <div> 遣唐使の廃止年は？<br> <input type="text" value=""><br> <input type="button" value="回答！"> <input type="button" value="次の問題！"> </div> </body> |
こんな感じ。
一旦、問題の表示はこれでいきましょう。
ウェブアプリのキャラクターとライフを表示
続いて、キャラクタとライフの表示を行います。
キャラクタとライフは画像ですので、
HTMLで画像を表示するようにします。
まずは単純な画像の表示から行います。
下のファイルをダウンロードしてください。
1つのキャラクターにつき4パターンの顔があります。
好きなキャラクターの4枚をindex.htmlと同じフォルダに入れてください。
ファイルが入れ終わったら、そのキャラクタのhutuu（普通の顔）を
HTMLに表示してみます。
表示位置は問題の下の方に表示します。
|
1 2 3 4 5 6 7 8 9 |
<body> <div> 遣唐使の廃止年は？<br> <input type="text" value=""><br> <input type="button" value="回答！"> <input type="button" value="次の問題！"> </div> <img src="neko-hutuu.png"> </body> |
画像が表示されましたね。
少し大きいかもしれません。
cssで小さくしておきましょう。
以下をCSSに追加してください。
|
1 2 3 |
img{ max-width:20%; } |
大きさが小さくなりましたね。
このcssの意味は、「横幅の最大サイズは画面の20%まで」
という意味です。
横幅というのは親要素の幅です。
今回の場合、imgの親はbodyなのでbodyの幅（=画面サイズ）になります。
ですので、画面のサイズを変更するとそれに合わせて画像のサイズも変わっていきます。
それでは次にライフを表示します。
下の画像をダウンロードしてハートの画像をindex.htmlと同じ
フォルダに格納してください。
それが完了したら、先ほどと同じように、
HTMLにimgタグを追加して画像を表示しましょう。
|
1 2 3 4 5 6 7 8 9 10 |
<body> <div> 遣唐使の廃止年は？<br> <input type="text" value=""><br> <input type="button" value="回答！"> <input type="button" value="次の問題！"> </div> <img src="chara0.png"> <img src="hart0.png"> </body> |
1つ表示できました。
同じように行を追加してハートが3つ表示されるようにしましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> <div> 遣唐使の廃止年は？<br> <input type="text" value=""><br> <input type="button" value="回答！"> <input type="button" value="次の問題！"> </div> <img src="chara0.png"> <img src="hart0.png"> <img src="hart0.png"> <img src="hart0.png"> </body> |
こんな感じになっているはずです。
ここまでのウェブアプリの仕上がり
ゲームっぽくなってきましたね。
次回は内部の処理を作成していきます。
