2009-08-06
Symfony + Ajax を使ってじゃんけんをする - じゃんけんの履歴を見る
================================================================================

じゃんけんの手の文字のところにマウスを置くと、コンピューターと勝負するようにして
ください。なお、コンピューター側は、乱数を使います。
このとき、過去のじゃんけんの履歴が見れるようにします。また、「クリア」のところで、その履歴をクリアします。

v3.0に対する変更点だけ。


■ビュー
modules/janken/templates/indexSuccess.php
---
<?php 
/* modules/janken/templates/indexSuccess.php
 * じゃんけん
 */ 
?>
<?php use_helper("Javascript"); ?>
<?php echo javascript_tag('
window.onload = function() {
    $("goo").observe(
        "mouseover", 
        function() {check("0");},
        false
    );

    $("choki").observe(
        "mouseover", 
        function() {check("1");},
        false
    );

    $("paa").observe(
        "mouseover", 
        function() {check("2");},
        false
    );

    $("clear").observe(
        "mouseover", 
        function() {clear();},
        false
    );
}

function check(te) {
    new Ajax.Request(
        "janken/janken", 
        {
           method: "post",
           postBody: "te=" + te,
           onSuccess: showResult
        }
    );
}

function showResult(ajax) {
    var play = eval("("+ ajax.responseText + ")");
    $("result").innerHTML = 
        "この勝負は " + play.result + " です。"
        + " "
        + "あなたは " + play.user 
        + " 、コンピューターは " + play.computer + " でした。"
        + "<br>"
        + $("result").innerHTML; 

    if (play.result == "勝ち") {
        $("result").style.backgroundColor = "lightblue";
    } else {
        $("result").style.backgroundColor = "lightgreen";
    } 
}

function clear() {
    $("result").innerHTML = "";
}
') ?>

じゃんけんの手の文字のところにマウスを置いてください。
<br>
<span id="goo" style="background-color: lightgreen;">グー</span>
<span id="choki" style="background-color: lightgreen;">チョキ</span>
<span id="paa" style="background-color: lightgreen;">パー</span>
&nbsp;&nbsp;&nbsp;&nbsp;
<span id="clear" style="background-color: lightblue;">クリア</span>
<br>
<br>
<div id="result" style="background-color: lightgreen;"></div>
---

                                                                            以上