CSS HI ＆ LOW

プログラムの説明

乱数で発生させたカード(１～１３)が７より大きいか小さいかを当てるゲームです。
HI または LOW をクリックするとプログラムが実行されます。

<body> の form から HI または LOW を引数にして func() 関数を呼び出します。

<form>
<input type="button" value="HI" size=20 onClick="func('HI')"><br><br>
<input type="button" value="LOW" size=20 onClick="func('LOW')"><br><br>
</form>

func(ans) 関数では渡されたパラメータ(hit, miss)を取得します。
乱数で１～１３を発生して、該当するカードを cut(n) 関数で表示します。
HI, LOW の応答を確認して「あたり,はずれ」を判定します。
成績(hit, miss)を更新して表示します。
「ReTray」をクリックするとゲームを続けます。

function func(ans)
{   var hit;
    var miss;
    var param = new Array();
    if (window.location.search.length>4)
    {   var query = window.location.search.substring(1);
        var parameters = query.split('&');
        for(i=0; i<parameters.length; i++)
        {   var element = parameters[i].split('=');
            var paramName = decodeURIComponent(element[0]);
            var paramValue = decodeURIComponent(element[1]);
            param[paramName] = parseInt(paramValue);
        }
        hit = param["hit"];
        miss = param["miss"];
    }
    else
    {   hit = 0;
        miss = 0;
    }
    n= Math.floor(Math.random() * 13)+1;
    cut(n);
    if ((ans=="HI" && n>7) || (ans=="LOW" && n<7))
    {   document.write("<h3>Hit</h3>");
        hit++;
    }
    else
    {   document.write("<h3>Miss</h3>");
        miss++;
    }
    document.write("hit=" + hit + "  :  miss=" + miss + "<br><br>");
    var param = "?hit=" + hit + "&miss=" + miss;
    document.write("<a href='hi_low2.html" + param + "'>ReTray</a><br>");
    document.write("<h3>HI or LOW ？</h3></center>");
}

カードを描画する cut() 関数です。
n がカードの番号です。
card.gif は 60*80 の１～１３の画像が並んでいます。
CSS Sprite の座標は画像全体の左上を基点に計算します。

function cut(n)
{   var s1 = '(0px,' + (n*60) + 'px,80px,' + (n-1)*60 + 'px);';     //上, 右, 下, 左
    var s2 = ' position:absolute;left:-' + (n-2)*60 + 'px;top:200px;';
    var s = '<img src="card.gif" style="clip:rect' + s1 + s2 + '">';
    console.log(s);
    document.write(s);
}