第3回 クイズゲームの作り方 – jQuery入門

2009 年 4 月 18 日 投稿者: naga3

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

実行結果


クイズゲームのソース

以下のソースを拡張子 .html で作成してブラウザで表示してみてください。クイズゲームが始まります。ソースは長そうに見えますがほとんど前回のコピペなので実質数行です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>

<script type="text/javascript">
$(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、すなわち「うどん」のラジオボタンをクリックしたときだけ「正解」、その他は「はずれ」のアラートを表示しています。

なに、これはクイズじゃない？そうですね。

カテゴリー: JavaScript, jQuery, 入門・講座

この記事へのトラックバックURL

3件のコメント

  1. とっとき より:
    2010 年 3 月 7 日 7:04 PM

    とても分かりやすいですね
    どんどん読ませて頂きます。　jQueryスキル急上昇中↑

  2. naga3 より:
    2010 年 3 月 7 日 11:44 PM

    サンプルはなるべく短くすることを心がけています。
    ぜんぜんクイズじゃなくてすみません～

  3. Tweets that mention 第3回 クイズゲームの作り方 – jQuery入門 – ポンクソフト -- Topsy.com より:
    2010 年 7 月 1 日 9:45 PM

    [...] This post was mentioned on Twitter by 高峰 裕 (土曜日 東フ-10b). 高峰 裕 (土曜日 東フ-10b) said: RT @asamorihisaya: 『ゲームプログラマを志す若人はみな通る道それがクイズゲーム。そしてプログラムを [...]

コメントをどうぞ