emu in blogjava

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  171 随笔 :: 103 文章 :: 1052 评论 :: 2 Trackbacks
之前编写过一个单机版的游戏letters,晚上睡不着,稍加改动,变成联机版的了。

静态页面 letters.htm
<SCRIPT>
var isIE=!!document.all;
function checkMouseMove(event){
if (window.activeElement){
var elm = window.activeElement;
elm.style.left 
= event.clientX-elm.innerX;
elm.style.top 
= event.clientY-elm.innerY;
if(xmlhttp)xmlhttp.abort();
if(timer)clearTimeout(timer);
}

}

function releaseMouse(event){
if (window.activeElement){
    
var x = activeElement.offsetLeft;
    
var y = activeElement.offsetTop;
    
var pos = activeElement.id;
    
var data =y.toString(16);
    data 
= x.toString(16)+"0000".substr(data.length)+data;
    
var url = "http://localhost:8080/letters/letters.jsp?pos="+pos+"&data="+data;
    
if(xmlhttp)xmlhttp.abort();
    xmlhttp 
= window.XMLHttpRequest?(new XMLHttpRequest()):(new ActiveXObject("Microsoft.XMLHTTP"));
    xmlhttp.onreadystatechange
= handleXML;
    xmlhttp.open(
"GET",url,true);
    xmlhttp.send(
null);
    window.activeElement 
= null;
}

}

function drag(event){
if (event.button>1return;
var elm = isIE?event.srcElement:event.target;
window.activeElement 
= elm;
elm.oldX 
= elm.offsetLeft;
elm.oldY 
= elm.offsetTop;
elm.innerX 
= event.clientX - elm.oldX;
elm.innerY 
= event.clientY - elm.oldY;
}


function slideTo(id,x,y){
var d=3;    
var e = document.getElementById(id);
var l = e.style.left?parseInt(e.style.left):0;
var t = e.style.top?parseInt(e.style.top):0;
if(Math.abs(l-x)<=&& Math.abs(t-y)<=d) return;
if(l!=x) e.style.left=l+(l<x?d:-d);
if(t!=y) e.style.top=t+(t<y?d:-d);
if(e.timer) clearTimeout(e.timer);
e.timer
=setTimeout("slideTo("+id+","+x+","+y+")",3)
}


function jumpTo(id,x,y){
var e = document.getElementById(id);
if(e.timer) clearTimeout(e.timer);
e.style.left
=x;
e.style.top
=y;
}


var xmlhttp;
function refreshPos(){
    
if(xmlhttp) return;
    xmlhttp 
= window.XMLHttpRequest?(new XMLHttpRequest()):(new ActiveXObject("Microsoft.XMLHTTP"));
    xmlhttp.onreadystatechange
= handleXML;
    xmlhttp.open(
"GET","http://localhost:8080/letters/letters.jsp",true);
    xmlhttp.setRequestHeader(
"If-Modified-Since","0");
    xmlhttp.send(
null);
}

function handleXML(){
    
if(xmlhttp.readyState==4&&xmlhttp.status==200){
        
var posList = xmlhttp.responseText.split(",");
        
if(posList.length>=n)
        
for(var i=0;i<n;i++){
            
var p = posList[i];
            
var x = parseInt(p.substring(0,p.length-4),16);
            
var y = parseInt(p.substr(p.length-4),16);
            
if(!timer) jumpTo(i,x,y);
            
else slideTo(i,x,y);
        }

        xmlhttp
=null;
        timer 
= setTimeout("refreshPos()",500);
    }

}

var n=104;
var timer;
window.onload
=refreshPos;
</SCRIPT>
</HEAD>
<style>b{position:absolute;cursor:pointer;font-size:20}</style>
<BODY onmousemove="checkMouseMove(event)" onmouseup="releaseMouse(event)" oncontextmenu="return false" onselectstart="return false" ondblclick="return false">
<div style="background-color:yellow;width:600;height:500;overflow:hidden">
<SCRIPT>
for(var i=0;i<n;i++)
document.write(
"<b onmousedown=\"drag(event)\" id=\""+i+"\" style=\"color:#"+(Math.floor(Math.random()*(1<<24))|(1<<23)).toString(16)+"\" onbeforselect=\"return false\">"+String.fromCharCode(i%26+65)+"</b>");
</SCRIPT>
</div>

服务程序letters.jsp:
<%@ page contentType="text/html; charset=GBK" %>
<%int[] letters;
int maxLetters = 104;
%><%
letters 
= (int[])application.getAttribute("letters");
if(null == letters){
  letters 
= new int[maxLetters];
  
for(int i=0;i<maxLetters;i++) letters[i]=(Math.round(i/26)*15+1)+(((i%26+1)*15)<<16);
  application.setAttribute(
"letters",letters);
}
String stPos = request.getParameter("pos");
String stData = request.getParameter("data");
if(stPos!=null && stData !=null){
  try{
    
int pos = Integer.parseInt(stPos);
    
int data = Integer.parseInt(stData,16);
    letters[pos]
=data;
  }catch(Exception e){
    e.printStackTrace();
  }
}
for(int i=0;i<maxLetters;i++) out.print(Integer.toHexString(letters[i])+",");
%>

当然服务程序如果直接写servlet可以更优化,不过我写servlet很依赖IDE或者手册,用jsp写就比较容易贯彻裸奔精神了。直接用tomcat发布出去即可运行(注意静态页面中两处hardcode的“http://localhost:8080/letters/letters.jsp”有可能需要根据发布环境做相应的修改)。服务程序代码做的相当简单,改asp版应该也不为难。详细的说明春节后补充,简单的介绍一下数据结构:
1 每个字母的位置由一个32位十六进制数字表示,前16位为横坐标,后16位为纵坐标,坐标空间65536*65536
2 application中维持一个所有字母的位置列表,通过“letters”这个key引用。
3 参数格式为pos:被移动的字母的序号,data:为该字母的新位置。

点击这里下载源码
posted on 2006-02-02 02:39 emu 阅读(2826) 评论(2)  编辑  收藏

评论

# re: 一个Ajax实现的联机游戏 2006-02-03 12:48 emu
稍微优化了一下。点击这里下载优化后的版本。  回复  更多评论
  

# re: 一个Ajax实现的联机游戏 2006-02-24 00:00 emu
终于搞到一个公网地址,发布一个:

http://stonelf.s43.eatj.com/emu/game/letters.htm

大家一起来玩哈:)

  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: