ホーム | Ajaxゲームとは | 一人プレイの例 | 二人プレイの例

受信データを明確にする

受信すべきデータが何かを考えます。
例えば以下のようになります。

  • 最後に行動したユーザがどちらか（相手のID or 自分のID）
  • 自分の体力
  • メッセージ

受信データの形式を決める

ここでも3つしか受け取るものが無いので、以下のように改行区切りのデータを受け取ることにします。

7898768
45
あなたの攻撃。\n敵に17ポイントのダメージを与えた。

受信データを受け取る場所を決める

受信データを受け取るための入力部品を以下のようなtextareaタグを用意します。

<textarea id="txtList"></textarea>

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() {
    //Interval Start
    window.setInterval('sbInterval()',20);
}
var m_iLife = 0;
var m_strText = '';
function sbInterval() {
    //Get
    var 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");
    
    //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_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;
    }
    
    //Menu
    document.all('pnlMenu').style.visibility = (iTurn != document.all('txtUid').value && iLife > 0) ? 'visible' : 'hidden';
}
// -->
</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" value="攻撃" />
<input type="button" class="btn" value="お昼寝" />
</span>
</td>
</tr>
</table>
<input id="txtUid" type="hidden" />
<textarea id="txtList" cols="60" rows="3">
4234354
78
あいうえお\nかきくけこ
</textarea>
</body>
</html>

動作を確認する

実際の動作は以下の通りです。
新規ウィンドウで実行

Copyright © 2006 Hikijishi All Rights Reserved.
[] [ajax][0.00196409225463867]