秘密の暗号を作ってみよう（たぬき暗号） - jQuery入門
目次
- jQuery入門
- jQueryのインストール・簡単な使い方
- クイズゲームの作り方
- 秘密の暗号を作ってみよう（たぬき暗号）
- アクションゲームを作ってみよう（ぬりかべ）
- 画像を使ったジグソーパズルを作ってみよう
- もぐらたたきっぽいゲーム
- ドラッグ可能なポップアップウインドウを作ろう
- jQuery UI Sortableで１ラインオセロゲーム
- ブラウザ全体をブロックしてみる
- Geolocation APIを使って都道府県のセレクトボックスを現在地に近い順にソートする
- 発生したイベントの状態を保持・保存する6つのパターン
- Ajaxを利用したシンプルなイメージギャラリーを作ってみる
- テーブルにページ送り（ページング）を実装してみる
- jQuery UI Draggableを使って付箋(sticky)を作ってみる
- カラムでソートできるテーブルを自作してみる
- テーブルを使ったシンプルなドット絵エディタを作ってみる
- iPhoneのようにマウスではじいてスクロール（フリックスクロール）を実装してみる
- テキストフィールドの数値をマウスの上下移動で増減する
- iPhoneのように大きい画像の表示領域をマウスのドラッグで移動してみる
- iPhoneのように画像をダブルクリックした地点を中心に拡大縮小する
- リアルタイムプレビュー付きのHTMLエディタを作ろう
- 保存できる付箋を作ってみる(Cookie、localStorage）
たぬき暗号
不定期jQuery入門、第４回です。今回の題材は「暗号」です。使う暗号のアルゴリズムは、ドイツ軍も裸足で逃げ出したといういわくつきの超強力暗号「たぬき暗号」です。実行結果
たぬき暗号のソース
本当なら国家機密レベルですが・・・ソースコードを公開します。ミンナニハナイショダヨ
<!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メソッドは指定されたセレクタにマウスが重なったときに第１引数で指定した関数を実行し、マウスが離れたときに第２引数で指定した関数を実行します。mouseoverとmouseoutを同時に指定するような感じです。今回はセレクタ「#answer」つまり「ここにマウスを重ねると解読します」と書かれた部分に対して、マウスが重なったときにspanタグの中身を消して、マウスが離れたときにspanタグの中身を再表示しています。
暗号文中の「た」の文字がspanで囲まれているので、マウスが重なったときに暗号が解かれるわけです・・・全ての謎は解けた！
ツイート
そっか0