謎解きブログを支えるJavaScriptとCSS

謎解きブログでは文章を装飾するHTMLだけでなく
多数のJavaScriptが利用されているが、
各動作を実現するための処理を紹介しておく。

入力された数字や文字が正しければ指定したURLに飛ぶ

<input type="text" id="txt1" value=""><input type="button" value="開けてみる" onclick="getValue('txt1');">

<script>
function getValue(idname){
  //入力された値を取得する
  var result = document.getElementById(idname).value;
 
  //正解と比較する
  if(result == "1234")
  {
    location.href = "https:****";  //移動先のURL
  }else{
    alert("どうやら開かないようだ");  
  }
}
</script>

暗証番号やパスワードを判定するための一番基本的な処理。
ボタンが押されるとgetValue関数が実行され、
正しければlocation.hrefを使ってページ移動を行う。
ゲームである以上、答えのチェックをするためにあちこちで利用されている。

枠内をクリックすると処理を実行する

<div onclick="Hint();" style="cursor:pointer;border:1px solid #ffffff;background-color: #170068;text-align: center;padding:10px;border-radius:10px;width:30ex;">ヒント</div>

<script>
function Hint(){
  alert("ヒントとして表示したい内容");  
}
</script>

cursor:pointerを指定することで
枠の中にマウスカーソルが入ると指アイコンに変化し、
クリックするとHint1関数が実行される。

ボタンを押すと表示されていた文章を変える

<span id="greeting">ありがとう</span>
<input id="Sample" type="button" value="変化" onclick="Change();">

<script>
function Change(){
  document.getElementById("greeting").innerHTML  = "どういたしまして";
}
</script>

表示されている文章の内容を
特定のタイミングで変更する方法。
状況に合わせてメッセージを変えられるので
ゲーム的な演出をするのに重宝する処理。

ボタンを押すと隠れていた画像が表示される

<IMG id="sky" style="display:none;" src="***.jpg">
<input id="skyButton" type="button" value="画像を表示" onclick="Appear();">

<script>
function Appear(){
  document.getElementById("sky").style.display = "block";
  document.getElementById("skyButton").style.display = "none";
}
</script>

画像や文章をdisplay:noneで非表示にしておき、
ボタンを押して実行されるAppear関数の中で
style.displayをblockに変更して表示、
ボタンの方はnoneを設定して非表示に変えている。

visibility:hiddenとの違いは非表示のときに
その画像の大きさ分の空白ができるかどうか。

２枚の画像を重ねて表示する

<div class="canvas">
<img src="１枚目の画像.jpg"/>
<img id="Indicator" src="２枚目の画像.png" />
</div>

<style type="text/css">
.canvas{/*親div*/
  position: relative;/*相対配置*/
}
#Indicator{
  position: absolute;/*絶対配置*/
  left: 0px;
  top:0px;
}
</style>

普通にimgタグを並べただけだと
画像は上下（または左右）に並んでしまうため、
CSSでpositionを指定することで重なるようにする。

画像の透明度を変化させる

<img id="building" src="画像.jpg">

<script>
window.onload=Start();
var alpha=1.0; //透明度の初期値（０～１）

function Start(){
  setTimeout('Draw()', 5000); //5000ミリ秒後にDraw関数を実行
}
function Draw()
{
  alpha -= 0.003;
  if(alpha < 0)
  {
    alpha = 0;
  }else{
    setTimeout('Draw()', 10); //10ミリ秒後にDraw関数を実行
  }

  document.getElementById("building").style.opacity = alpha;
}
</script>

window.onloadを利用してページが表示された直後にStart関数を実行し、
５秒経ったらDraw関数が実行されるように仕込む。
Draw関数ではstyle.opacityを利用して透明度を設定し、
アルファ値を少し変化させて再度Draw関数が実行されるよう仕込む。
定期的にアルファ値が再設定されることで少しずつ変化する。

レスポンシブに合わせて画像サイズを調整する

<img id="BasePhoto" src="大きな画像.jpg">
<img id="Chara" src="小さな画像.jpg">

<script>
function Draw(){
  let pic = document.getElementById("BasePhoto");
  let picWidth = pic.width;
  let picBaseWidth = pic.naturalWidth;

  //現在幅と元データ幅から縮小率を割り出す
  let scaleRate = picWidth/picBaseWidth;

  document.getElementById("Chara").style.width = 134 * scaleRate+"px";
}

//スマホ画面回転時に実行
window.addEventListener("orientationchange", function() {
  Draw();
});

//ブラウザサイズ変更時に実行
window.addEventListener("resize", function() {
  Draw();
});
</script>

スマホや幅の狭いブラウザでアクセスしたときに
ブログや画像の幅が自動的に調整されるレスポンシブデザインの場合、
画面の横幅いっぱいの画像は縮小されるが
画面幅よりも小さな画像は元のサイズのままなので
画像同士の位置関係がズレてしまう。

そこでページ内で一番大きな画像の
現在の横幅を表すwidthと元の横幅を表すnaturalWidthを比較して
どの程度縮小されているのかという比率を割り出し、
その比率に合わせてその他の画像の位置や大きさを調整する。

また、ページを表示したままスマホを回転させたり
ブラウザのサイズを変更されたときに
大きさ調整の関数を実行するために
window.addEventListenerも仕込んでおく。

今日の日付を表示する

<script>
var objDate = new Date();

var year = objDate.getFullYear(),
 month = objDate.getMonth()+ 1,
 day = objDate.getDate();

document.write("本日は"+year+"年"+month+"月"+day+"日です。");
</script>

今日の日付はDate関数で簡単に調べられるが、
getMonth関数で取得する月だけは
０～11の範囲になっているので１を足す必要がある。

スクロールしたときに関数を実行する

<script>
window.addEventListener('scroll', handleScroll);

function handleScroll(){
  alpha = 1.0;
}
</script>

画面のスクロールに反応して何か処理を実行したいときの方法。
ボタンや時間経過をきっかけに動く処理はよくあるが、
スクロールをトリガーにするのは意外で面白い。

選択されている文字列の内容や文字数を調べる

<script>
function handleScroll(){
   var SelStr = document.getSelection();
   var count = String(SelStr).length;
   document.getElementById('result').innerHTML = SelStr + "は" + count+"文字です";
}
</script>