クイズゲームの作り方 - jQuery入門

クイズゲーム（？）

やってきました第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　次ページ

ポンクソフト