ポンクソフト

クイズゲームの作り方 - 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)

クイズゲーム(?)

やってきました第3回、今回はクイズゲームを作ってみましょう。ゲームプログラマを志す若人はみな通る道それがクイズゲーム。そしてプログラムを作るのは簡単だが設問を作るのが難しいと気づいて諦める道それがクイズゲーム。

実行結果

クイズゲームのソース

以下のソースを拡張子 .html で作成してブラウザで表示してみてください。クイズゲームが始まります。ソースは長そうに見えますがほとんど前回のコピペで行けます。
<!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() {
  $('input').click(function() {
    if ($(this).val() == 2) alert('正解!');
    else alert('はずれ!');
  });
});
</script>
</head>
<body>
  <p>あなたの好きな食べ物は?</p>
  <p>
    <input type="radio" name="food" value="1">そば
    <input type="radio" name="food" value="2">うどん
    <input type="radio" name="food" value="3">ラーメン
  </p>
</body>
</html>

プログラムの解説

$(function() {
・・・
});
前回同様、$(関数)と書くと、HTMLが表示された時点で(正確には準備された時点で)引数で指定された関数が呼び出されます。呼び出す関数は以下の
$('input').click(function() {
・・・
});
ですね。これはinputタグをクリックしたときに中に記述した関数が呼び出されます。対象となるinputタグはラジオボタンを書いた以下の
<input type="radio" name="food" value="1">そば
<input type="radio" name="food" value="2">うどん
<input type="radio" name="food" value="3">ラーメン
です。$(‘input’)と書いただけでHTML中にある全てのinputタグにイベントを登録できるのがjQueryの魅力のひとつですね。実際にクリックされたときに呼び出されるイベントの中身は以下の
if ($(this).val() == 2) alert('正解!');
else alert('はずれ!');
となります。
$(this)はクリックされたinput要素を指します。val()関数でvalue要素を取得します。今回はvalue要素が2、すなわち「うどん」のラジオボタンをクリックしたときだけ「正解」、その他は「はずれ」のアラートを表示しています。

なに、これはクイズじゃない?そうですね。
前ページ jQuery入門 TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0