没有完整的图片,我想我会建立两个Web服务,连接到一些数据库(很可能)。
第一个会接受一些与某些用户执行的操作相关的参数(点击坐标,时间,用户ID等),将这些参数保存到数据库中,然后回复一些状态细节(成功,失败等)。
其他API将接受时间作为参数,并返回(从JSON或XML格式)自那时以来发生的所有活动(如在聊天程序中...这里是自上次更新以来的消息)...或者,根据游戏构造,CUMULATIVE状态...例如,如果游戏包含两个团队将拼贴从红色翻转为蓝色,则此API将返回该拼贴的当前状态。然后,在客户端代码中,我会处理响应以反映该用户当前的游戏状态。
以下是一些示例代码。这不会自动更新,您可以设置超时以定期轮询新数据,或设置某种长轮询(wiki)。哦,因为这是教育,没有输入验证(除了长度):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Game</title>
<style>
html, body {margin:0;padding:0;height:100%;width:100%;}
#board {width:298px;height:298px;border:thin solid #000;position:relative;}
#puck {width:58px; height:58px; display:block; background-image:url('al.png'); background-size:contain; position:absolute; top:120px; left:120px;}
</style>
</head>
<body onload="update();">
<div id="board">
<div id="puck"></div>
</div>
<button onclick="update();">Update</button>
</body>
<script>
var x,y;
document.getElementById('board').addEventListener('click',move);
function move(e){
a1=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
x=(e.clientX-29);
y=(e.clientY-29);
a1.abort();
a1.onreadystatechange=function()
{
if (a1.readyState==4&&a1.status==200){
document.getElementById('puck').style.left = x+'px';
document.getElementById('puck').style.top= y+'px';
}
}
params='x='+x+'&y='+y;
a1.open("POST","al_accept.php",true);
a1.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
a1.setRequestHeader("Content-length", params.length);
a1.setRequestHeader("Connection", "close");
a1.send(params);
}
function update(){
a2=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
a2.onreadystatechange=function()
{
if (a2.readyState==4&&a2.status==200){
res=JSON.parse(a2.responseText)
x=res.x;
y=res.y;
document.getElementById('puck').style.left = x+'px';
document.getElementById('puck').style.top= y+'px';
}
}
params='x='+x+'&y='+y;
a2.open("POST","al_respond.php",true);
a2.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
a2.setRequestHeader("Content-length", params.length);
a2.setRequestHeader("Connection", "close");
a2.send(params);
}
</script>
</html>
,你会看到move
功能将数据发送到al_accept.php
将其存储(这里只是写,因为每次移动到文件并且update
函数调用al_respond.php
来检索最新的数据。
al_accept。PHP:
<?php
$x=(strlen($_REQUEST['x'])>3)?substr($_REQUEST['x'],0,3):$_REQUEST['x'];
$y=(strlen($_REQUEST['y'])>3)?substr($_REQUEST['y'],0,3):$_REQUEST['y'];
$pos=fopen('al.txt','w');
$str='{"x":'.$x.',"y":'.$y.'}';
fwrite($pos,$str);
fclose($pos);
?>
al_respond.php:
<?php
header('content-type:application/json');
echo file_get_contents('al.txt');
?>
如果你打开这两台机器上,你可以在一个移动球,当你在其他更新,你会看到最新的位置(反之亦然)。
用户>约翰>鲍勃>服务器==用户>程序> API>服务器...是准确的?球员一和二之间的关系是什么?这是一个连续的游戏,他们交替作为用户(国际象棋)?还是有两个同时打击服务器的团体?你如何描述它,它听起来不像多人游戏系统 – 2012-08-06 01:45:10
@RobotWoods是的,这是正确的。玩家从不相互沟通。他们只是将输入发送到生成输出的服务器并将其返回给每个用户。它可以与此类论坛进行比较:多个客户端将其消息发送到服务器,服务器存储它们并向每个包含所有消息的用户返回一个HTML文档。 – user1299784 2012-08-06 02:24:12
在我看来,你的问题的措辞太不精确,无法给出有用的答案。你的问题的大部分包含一个令人费解的例子“模型”,这个例子没有什么意义。应该使用的“模型”在很大程度上依赖于您尝试制作的游戏类型,并且您没有提供*有用的*信息。请尝试修改您的问题,因为我非常乐意帮助您。 – 2012-08-06 03:22:07