送信データを明確にする
送信すべきデータが何かを考えます。
例えば以下のようになります。
- 自分のID
- 次の行動
自分のIDを送信する理由
サーバはどのクライアントを識別できなければ、誰に何を返せばいいのかわからなくなってしまいます。
クライアントに応じて返すべき結果が異なる以上、各クライアントは独自の値を使ってサーバに識別してもらわなければなりません。
ただ、自分のIDを渡さなくても、サーバはクライアントのIPアドレスを使って識別することができるので、識別させる方法はいろいろと考えられます。
- クライアントからは何も送信せず、サーバがクライアントにIDを割り振る方法
- クライアントからは何も送信せず、IPアドレスなどの情報を使ってサーバに識別してもらう方法
- クライアントが乱数で自分のIDを決め、そのIDを使ってサーバに識別してもらう方法
- ページ上に配置したテキストボックスに任意のIDを入力してもらい、サーバに識別してもらう方法
ここでは乱数で自分のIDを決める方法を使うこととします。
送信データの形式について
このサイトで紹介している基本ルーチンでは、送信データをGETで送信するため、任意のキーのパラメータに、任意の値を乗せて送信することになります。
ここでは以下のような値を送信します。
uid=3829839&act=2
- uid
- ページ表示時に乱数で求めた自分のID
- act
- ボタンを押したときに決まる次の行動番号
JavaScriptを書く
ボタンを押したときにデータを送信できるよう、スクリプトを組んでおきます。
また、送信した後は、さきほど用意しておいたtextareaに受信データが受信されることを想定しておきます。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Ajax Game</title>
<style type="text/css">
<!--
* { font-family: sans-serif; }
table { border-collapse: collapse; }
td { padding: 5px; }
table,td { border: 1px solid black; }
.btn { width: 6em; }
-->
</style>
<script type="text/javascript">
<!--
function sbInit() {
//Generate UserID
document.all('txtUid').value = Math.floor(Math.random() * 1000000);
//Interval Start
window.setInterval('sbInterval()',20);
sbSend(-1);
}
var m_iMyLife = 0;
var m_iYuLife = 0;
var m_strText = '';
function sbInterval() {
//Get
var strList = document.all('txtList').value + "\n\n";
var astrGet = strList.split("\n");
var iMyLife = Number(astrGet[0]);
var iYuLife = Number(astrGet[1]);
var strText = astrGet[2].replace(/\\n/g,"\n");
//Text
var iIdx = m_strText.length;
if (m_strText.substring(0,iIdx) == strText.substring(0,iIdx) && iIdx < strText.length) {
m_strText = strText.substring(0,iIdx + 1);
document.all('txtText').value = m_strText;
} else if (m_strText.substring(0,iIdx) != strText.substring(0,iIdx)){
m_strText = '';
document.all('txtText').value = m_strText;
} else {
//Life
if (m_iMyLife < iMyLife) { m_iMyLife++;
} else if (m_iMyLife > iMyLife) { m_iMyLife--; }
var strLife = '';
for (iIdx = 1; iIdx <= m_iMyLife; iIdx++) { strLife += '|'; }
document.all('pnlMyLife').innerHTML = strLife;
if (m_iYuLife < iYuLife) { m_iYuLife++;
} else if (m_iYuLife > iYuLife) { m_iYuLife--; }
var strLife = '';
for (iIdx = 1; iIdx <= m_iYuLife; iIdx++) { strLife += '|'; }
document.all('pnlYuLife').innerHTML = strLife;
}
//Menu
document.all('pnlMenu').style.visibility = (iMyLife > 0 && iYuLife > 0) ? 'visible' : 'hidden';
}
function sbSend(iAct) {
alert('uid=' + document.all('txtUid').value + '&act=' + iAct);
}
// -->
</script>
</head>
<body onload="sbInit();">
<table>
<tr><td>自分 : <span id="pnlMyLife"></span></td></tr>
<tr><td>相手 : <span id="pnlYuLife"></span></td></tr>
<tr><td><textarea id="txtText" cols="60" rows="8" readonly="readonly"></textarea></td></tr>
<tr>
<td>
<span id="pnlMenu" style="visibility:hidden;">
<input type="button" class="btn" onclick="sbSend(0);" value="攻撃" />
<input type="button" class="btn" onclick="sbSend(1);" value="お昼寝" />
</span>
</td>
</tr>
</table>
<input id="txtUid" type="text" />
<textarea id="txtList" cols="60" rows="3">
43
78
あいうえお\nかきくけこ
</textarea>
</body>
</html>
動作を確認する
実際の動作は以下の通りです。
新規ウィンドウで実行