ポンクソフト

秘密の暗号を作ってみよう(たぬき暗号) - jQuery入門

前ページ jQuery入門 TOP 次ページ

目次

  1. jQuery入門
  2. jQueryのインストール・簡単な使い方
  3. クイズゲームの作り方
  4. 秘密の暗号を作ってみよう(たぬき暗号)
  5. アクションゲームを作ってみよう(ぬりかべ)
  6. 画像を使ったジグソーパズルを作ってみよう
  7. もぐらたたきっぽいゲーム
  8. ドラッグ可能なポップアップウインドウを作ろう
  9. jQuery UI Sortableで1ラインオセロゲーム
  10. ブラウザ全体をブロックしてみる
  11. Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
  12. 発生したイベントの状態を保持・保存する6つのパターン
  13. Ajaxを利用したシンプルなイメージギャラリーを作ってみる
  14. テーブルにページ送り(ページング)を実装してみる
  15. jQuery UI Draggableを使って付箋(sticky)を作ってみる
  16. カラムでソートできるテーブルを自作してみる
  17. テーブルを使ったシンプルなドット絵エディタを作ってみる
  18. iPhoneのようにマウスではじいてスクロール(フリックスクロール)を実装してみる
  19. テキストフィールドの数値をマウスの上下移動で増減する
  20. iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
  21. iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
  22. リアルタイムプレビュー付きのHTMLエディタを作ろう
  23. 保存できる付箋を作ってみる(Cookie、localStorage)

たぬき暗号

不定期jQuery入門、第4回です。今回の題材は「暗号」です。使う暗号のアルゴリズムは、ドイツ軍も裸足で逃げ出したといういわくつきの超強力暗号「たぬき暗号」です。

実行結果

たぬき暗号のソース

本当なら国家機密レベルですが・・・ソースコードを公開します。ミンナニハナイショダヨ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>たぬき暗号</title>
<script>
$(function() {
  $('#answer').hover(
    function() {$('span').hide();},
    function() {$('span').show();}
  );
});
</script>
</head>
<body>
<p>たぬき暗号(<em id="answer">ここにマウスを重ねると解読します</em>)</p>
<p>ぼ<span>た</span>く<span>た</span>はき<span>た</span>みをあ<span>た</span>いしていま<span>た</span>す<span>た</span>。</p>
</body>
</html>

プログラムの解説

$('#answer').hover(
  function() {$('span').hide();},
  function() {$('span').show();}
);
hoverメソッドは指定されたセレクタにマウスが重なったときに第1引数で指定した関数を実行し、マウスが離れたときに第2引数で指定した関数を実行します。mouseoverとmouseoutを同時に指定するような感じです。

今回はセレクタ「#answer」つまり「ここにマウスを重ねると解読します」と書かれた部分に対して、マウスが重なったときにspanタグの中身を消して、マウスが離れたときにspanタグの中身を再表示しています。

暗号文中の「た」の文字がspanで囲まれているので、マウスが重なったときに暗号が解かれるわけです・・・全ての謎は解けた!
前ページ jQuery入門 TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0