web上で動かすおみくじの作り方のメモ
牛乳寒天です。
先月、課題でHTML,CSSを使用したおみくじを作成する機会があったため、復習も含めメモとして残します。
流れとしては
①おみくじの初期画面を表示
②「おみくじを引く」ボタンを押すとアラートを表示。
③アラートのOKを押すと結果を表示し、ボタンも「やりなおす」に切り替わる。更に、「やりなおす」を押すとアラートが表示され、OKを押す事で違う結果が出る。
スマホサイズにも対応するようにレスポンシブにする。
レスポンシブ対応にする
レスポンシブ対応にするには、HTMLの<meta>内に下のように記述。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">①の画面
背景画像はCSSにbodyで記述。
今回の場合ファイル名は「midori.png」
画像ファイルはimgフォルダ内のnoteフォルダにあるため、そこまでの経路を入れることも忘れずに。
CSSでの記述↓
body {
background-image : url("img/note/midori.png");
background-size : cover;
margin : 0;
padding : 0;
text-align: center;
}background-size : cover;
→背景画像のサイズを指定。
background-size
→画面幅に収まるサイズで画像全体を表示・画面幅フルサイズで背景画像を表示などサイズを変えて表示。
margin : 0;,padding : 0;
→隅に隙間を作る事なく全面に表示。
text-align: center;
→おみくじの箱やボタンといった要素を左右中央に表示させる。
おみくじの箱、「おみくじをひく」ボタン
HTMLで、<body></body>内に記述。
<body>
<img src="img/note/box.png" id="omikuji">
<button id="osubtn" onclick="play()">おみくじひく</button>
</body>onclick="play()"
→クリックされた時に反応があるように設定。
CSS↓
#osubtn{
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
position: absolute;
margin-top: 520px;
width: 200px;
height: 40px;
font-size: 20px;
color: #FFF;
background-color: darkred;
}HTMLでボタンにosubtnというidを付けたので、CSSでは#osubtnの名前で色や位置、サイズを任意で指定。
②の画面
HTMLで、</body>のすぐ下に<script></script>を置き、<script></script>内にアラートやおみくじといったプログラムの設定をする。
</body>
<script>
ここに記述。
</script>
HTML↓
<script>
function play() {
var no = Math.floor(Math.random()*5);
var image_name;
if (no == 0) {
image = "img/note/dai.png";
} else if (no == 1) {
image = "img/note/tyu.png";
} else if (no == 2) {
image = "img/note/shou.png";
} else if (no == 3) {
image == "img/note/suesue.png";
} else {
image = "img/note/kyo.png";
}
alert("おみくじが出ました！さて結果は？");function play() {}内に書いて、ボタンをクリックされた時に反応をするようにする。
ランダムで結果を表示させる為には、まずランダムな数字を作る必要がある。そのためにJavaScriptを使ってランダムの値を表示させる。
ランダムな数を表示したい時＝「変数」。
Math.random()
→ランダムな数字を作る。
これは「ランダムな数を作って」とお願いするもの。
適用されると0以上1未満のランダムな小数点の値を作ってくれる。
小数ではなく、整数が欲しい場合はもう一手間加える必要がある。
小数点を整数に変換するにはMath.floor()を使う。
これは小数点以下を切り捨ててくれるものだけど、
Math.random()で作られた数は1よりも小さいので、小数点を切り捨てるとすべて0になってしまう。
その場合は作りたい一番大きな数を、Math.random()で作った値に、掛け算すればいい。掛け算には「*」を使う。
今回の場合、5つの結果を表示させたいので5を掛け算する。
「alert("おみくじが出ました！さて結果は？");」で、アラートの設定。
③の画面
「alert("おみくじが出ました！さて結果は？");」の下に記述。
document.getElementById("omikuji").src = image;
document.getElementById("osubtn").innerHTML = "やりなおす";
}
</script>document.getElementById("omikuji").src = image;
→元々おみくじの箱(画像)があった場所を、おみくじの結果の画像に切り替えるようにする。
image;はimage = "img/note/kyo.png";のimage部分。
document.getElementById("osubtn").innerHTML = "やりなおす";
→「おみくじひく」ボタンが「やりなおす」に切り替わるよう設定する。
よろしければ、サポートをよろしくお願いします。