“htmlとJavaScriptでかわいいまばたき”
執筆: “F.S”
はじめに
初めての人は、初めまして。プログラマーのF.Sです。
今回の内容はhtmlとJavaScriptで自動で画像を切り替えるといったものです。
一定間隔で画像を切り替え、キャラクターにまばたきをさせます。htmlなので使う頻度は少ないですが、ロジックを覚えておくと意外と便利かもしれません。
この記事の内容
1. 準備
2. 実装
3. まとめ
4. 関連記事
準備
今回用意するのはこちらです。
- 差分のある画像
- visual studio Code(visual studio)
今回は差分のある画像はこちらのサイトから使います。
いわゆるゆっくりですが、パーツごとに画像が分けられており、目の差分や口の差分がそれぞれあるので今回使うのに向いています。
ダウンロードしたら、それぞれのフォルダの名前を画像のようにしておきましょう。
そのまま英語にしただけなので翻訳サイトを使えばできます。
次にhtmlファイルを用意しましょう。
どこでもいいのでフォルダを作り、その中でテキストファイルを新規作成しましょう。
作成したテキストファイルを開き、「名前を付けて保存」から「全てのファイル」を選び、「index.html」にしましょう。
次はcssファイルを用意しましょう。
こちらもhtmlファイルと同様にテキストファイルを新規作成して開き、「名前を付けて保存」から「全てのファイル」を選び、「style.css」にしましょう。
ダウンロードした画像のフォルダも「images」に改名し、このフォルダの中に入れましょう。
フォルダ構成は画像のようにしてください。
実装
・実装
まずはhtmlを書いていくのですが、htmlはダブルクリックするとブラウザで開いてしまうので、右クリックから「プログラムから開く」を選び、「Visual Studio Code」または「Visual Studio」を選びましょう。
開くことができたら、中身を下記のように編集してください。
<!DOCTYPE html>
<link rel="stylesheet" href="style.css" type="text/css">
<html>
<head>
<meta charset="UTF-8 />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="app">
<p>ゆっくりしていってね！</p>
<div class="character">
<img src="./images/body/00.png" alt="body" />
<img class="eyes" id="eyes" src="./images/eye/00.png" alt="eyes" />
<img src="./images/mouth/00d.png" alt="mouth" />
</div>
</div>
</body>
</html>
<script>
//目画像を描画している要素を取得
const eyeElement = document.getElementById("eyes");
//目の状態を表す定数
const eyeStates =
{
open:0, //開いている
blink:1, //まばたき中
close:2, //閉じている
}
//現在の目の状態
let eyeState = eyeStates.open;
//前回の目の状態
let prevEyeState = eyeState;
//まばたきのタイミングをランダムにする処理
function getRandomDelay(min,max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//まばたきの処理
function blink(nextState)
{
prevEyeState = eyeState;
eyeState = nextState;
let delay = 0;
//開いている場合
if (eyeState === eyeStates.open)
{
delay = getRandomDelay(1000,4000);
eyeElement.src = `./images/eye/00.png`;
setTimeout(() => blink(eyeState.blink),delay);
}
//まばたきの場合
else if (eyeState === eyeStates.blink)
{
delay = 50;
eyeElemant.src = `./images/eye/00d.png`;
//前回が開いている場合
if (prevEyeState === eyeState.open)
{
setTimeout(() => blink(eyeStates.close), delay);
}
//前回が閉じている場合
else
{
setTimeout(() => blink(eyeStates.open), delay);
}
}
//閉じている場合
else if(eyeState === eyeState.close)
{
delay = 100;
eyeElement.src = `./images/eye/00e.png`;
setTimeout(() => blink(eyeStates.blink), delay);
}
}
//まばたきの開始
blink(eyeStates.open);
</script>次にcssを編集します。こちらはダブルクリックでも開くことができます。(アプリを選択と出てきたらVisual Studio Codeを選んで開いてください)
cssを下記のように編集してください。
.character {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}
img.eyes,
img.face {
z-index: 1;
}
.control-panel {
position:relative;
z-index: 2;
}これで実装は終わりです。
次はhtmlをダブルクリックしてブラウザで開いてみましょう。
キャラクターがまばたきをしていたら成功です。
・解説
今回はhtmlだけではなくjava scriptを使いました。
<script></script>に囲まれている部分が該当する箇所です。
処理の内容としては、「blink」という関数で「目を開いている状態」、「まばたきの状態」、「目を閉じている状態」の三つの状態を時間で切り替えています。
それぞれ「delay」で指定した時間で次の状態に遷移します。
遷移の順番は「目を開いている状態」→「まばたきの状態」→「目を閉じている状態」→「まばたきの状態」→「目を開いている状態」を繰り返していきます。
「getRandomDelay」はまばたきのタイミングをランダムにする関数です。
まばたきは一定のタイミングではないので、こちらで「delay」の最小値と最大値を決め、その範囲から毎回ランダムに選ばれます。
この処理によって、一定間隔で行われる機械的なまばたきではなくなります。
まとめ
これでキャラクターがまばたきをするようになりました。
htmlでこういうものはあまり作らないと思いますが、知っておくと他のことにも流用できたりするかもしれません。