広告
【JavaScript】【タイピングゲーム】3日目 「html・css」部分を作る
JavaScriptを使ってオリジナルの単語タイピングゲームを作っていきます。
単語タイピングゲーム作りを通してリアルタイム入力、文字列の操作、タイマーによるプログラムの自動実行、簡単なアニメーションなど実践的なプログラミング技術を学んでいきます。
「JavaScriptでプログラミング入門」の応用編になりますので、まだ終えてない方はそちらを先にご覧ください。
「html・css」部分を作る
今回は見た目である「html・css」部分を作っていきます。
こんなのです。
真ん中の黒い部分は英単語が流れてくるトコロです。
その上の白い小さい四角は入力したキーを表示するトコロです。
事前に「640×480」ぐらいのサイズの背景用の画像を用意してプログラムを保存するフォルダと同じ場所に「img1.jpg」という名前で保存しておいてください。
「html」部分
まずは「html」部分です。
■3日目 プログラム１■
<html> <head> <title>タイピングゲーム</title> </head> <body> <p>タイピングゲーム</p> <div id="background_img_box"> <div id="input_mondai_box"></div> <div id="background_mondai_box"></div> <div id="mondai_box"></div> </div> </body> </html>
■実行結果■
■説明■
「html」部分はそれぞれの役わりの「div」ブロックを配置しているだけでとてもシンプルです。
それぞれの役わりですが、
「background_img_box」・・・背景画像を表示する一番土台の部分です。
「input_mondai_box」・・・先ほどの画像の白い小さい四角の部分で入力したキーを表示するトコロです。
「background_mondai_box」・・・先ほどの画像の真ん中の黒い部分で英単語が流れてくるトコロです。
「mondai_box」・・・実際に問題である英単語を表示する部分です。このブロックの座標を移動することによって左から右へと問題部分を移動させます。
のようになります。
広告
「css」部分
続けて「css」を先ほどのプログラムに加えていきます。
背景画像の表示なども「css」を使って行います。
■3日目 プログラム２■
<html>
<head>
<style>
#background_img_box{
background-image: url(img1.jpg);
width: 400px;
height: 288px;
position: relative;
overflow: hidden;
}
#input_mondai_box{
width: 120px;
height: 20px;
font-size: 15px;
text-align: center;
background-color: white;
color: black;
position: absolute;
top: 84px;
left: 140px;
z-index: 10;
}
#background_mondai_box{
width: 400px;
height: 80px;
background-color: black;
position: absolute;
top: 104px;
left: 0px;
z-index: 5;
}
#mondai_box{
font-size: 20px;
color: white;
position: absolute;
top: 130px;
left: -20px;
z-index: 11;
}
</style>
<title>タイピングゲーム</title>
</head>
<body>
<p>タイピングゲーム</p>
<div id="background_img_box">
<div id="input_mondai_box"></div>
<div id="background_mondai_box"></div>
<div id="mondai_box">wednesday</div>
</div>
</body>
</html>
■実行結果■
■説明■
背景が表示されましたね。
主なトコロだけ説明します。
#background_img_box{
background-image: url(img1.jpg);
width: 400px;
height: 288px;
position: relative;
overflow: hidden;
}
土台の背景画像を表示する部分です。
「background-image」というのを使って画像表示しております。
url(img1.jpg)ここの画像ファイル名を書き換える事によって背景画像を変更していきます。
あとはこの土台の上に「div」ブロックを重ねていくので「position」を「relative」に設定しておきます。
「overflow: hidden;」っていうのはこの土台からはみ出した場合の処理で「hidden(非表示)」に設定しております。
この「overflow: hidden;」を消して「mondai_box」の文字の色を変えたりして確認するとはみ出るのがわかるかと思います。
残りの「div」ブロックはそれぞれ「position」を「absolute」にして大きさ、色などを指定して配置しているだけです。
大きさ、色、座標などを少しずつ変えてみるとなんとなくわかると思います。
「overflow: hidden;」ではみ出る部分を非表示にしておりますので「mondai_block」の座標をマイナス指定すればその分隠す事ができます。
重なり順の「z-index」は今回重なる「div」ブロックがないので指定しなくても大丈夫といえば大丈夫ですが、それぞれの配置を少しずらしたい時など重なった時にあいまいになるのでいちよう指定しておいた方が良いです。
ここまでの中間ソースになります。
それでは「html・css」部分ができたトコロで次回よりJavaScript部分を書いていきます。
次回
広告
広告
Copyright 2016 K.N/petitetech.com