送信データを明確にする
送信すべきデータが何かを考えます。
例えば以下のようになります。
- 自分のID
- 次の行動
送信データの形式について
このサイトで紹介している基本ルーチンでは、送信データをGETで送信するため、任意のキーのパラメータに、任意の値を乗せて送信することになります。
ここでは以下のような値を送信します。
uid=3829839&act=2
- uid
- ページ表示時に乱数で求めた自分のID
- act
- ボタンを押したときに決まる次の行動番号
JavaScriptを書く
ボタンを押したときにデータを送信できるよう、スクリプトを組んでおきます。
また、相手の順番を待つプロセスも必要なため、一定時間おき（ここでは2秒おき）に送信するようにします。
<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() {//Interval Startwindow.setInterval('sbInterval()',20);window.setInterval('sbSend(-1)',2000);}var m_iLife = 0;var m_strText = '';function sbInterval() {//Getvar strList = document.all('txtList').value + "\n\n";var astrGet = strList.split("\n");var iTurn = Number(astrGet[0]);var iLife = Number(astrGet[1]);var strText = astrGet[2].replace(/\\n/g,"\n");//Textvar 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 {//Lifeif (m_iLife < iLife) { m_iLife++;} else if (m_iLife > iLife) { m_iLife--; }var strLife = '';for (iIdx = 1; iIdx <= m_iLife; iIdx++) { strLife += '|'; }document.all('pnlLife').innerHTML = strLife;}//Menudocument.all('pnlMenu').style.visibility = (iTurn != document.all('txtUid').value && iLife > 0) ? 'visible' : 'hidden';}function sbSend(iAct) {alert('uid=' + document.all('txtUid').value + '&act=' + iAct);}// --></script></head><body onload="sbInit();"><table><tr><td>体力 : <span id="pnlLife"></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="hidden" /><textarea id="txtList" cols="60" rows="3">4378あいうえお\nかきくけこ</textarea></body></html>
動作を確認する
実際の動作は以下の通りです。
新規ウィンドウで実行