Posted on 2007-07-30 16:48
sugo 阅读(369)
评论(0) 编辑 收藏
实现了控制随机生成的一个六位字符串下落，可以向左、向右、向下加速。实现的功能仿照俄罗斯方块来做，本来想实现上下两行相同字母消除功能，但想起一个方法（代码中的erase（）方法），感觉没问题，但一直没有实现，后来也懒得想了。现将代码贴在这里，希望读到这篇文章的朋友如果感兴趣的话提出宝贵意见，并可以随意拷贝代码完善功能:)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Sugo">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var incx=10;//每次下落的高度
var sty=20; //开始时候的纵坐标
var stx=500; //开始时候的横坐标
var num=0; //每个div标号，同时也起到确定下一个div元素停止的位置
var len=10;
var timer;//定时器
//var arr0,arr1,arr2,arr3,arr4,arr5,arr6,arr7,arr8,arr9,arr10,arr11,arr12,arr13,arr14,arr15; //用于字母消除作用的数组，此功能没实现，这些变量可以不用
//初始字符串初始位置
function firstshow(){
//temp=document.getElementById("sg");
sg0.style.pixelTop=sty;
sg0.style.pixelLeft=stx;
}
//增加字符串
function addDiv(){
tt=document.createElement("div");
divcontent=randomString(6);
cont=document.createTextNode(divcontent);
tt.appendChild(cont);
tt.id="sg"+num;
tt.style.position="absolute";
// var obj=eval("sg"+num);
tt.style.pixelTop=10;
tt.style.pixelLeft=500;
document.body.appendChild(tt);
}
//字符串下落方法
function fall(id){
var obj=eval("sg"+id);
obj.style.pixelTop+=incx;
obj.style.pixelLeft=stx;
if(obj.style.pixelTop==(610-len*num)){ //到达目的地址时（下落到610处，此处可随意改动）
obj.style.pixelTop=610-len*num;
//erase(); 功能没有实现
num++;
addDiv();
fall(num);
}
else if(obj.style.pixelTop<(610-len*num)) //没有到达目的地址时
timer = setTimeout('fall(num)',1000); //1000可以换成任意数字，越小下落速度越快
else if(obj.style.pixelTop>(610-len*num)) //处理出现地址大于目的地址时
{
}
}
//当使用方向键操作时使用的下落方法
function fall1(id,sx,sy){
var obj=eval("sg"+id);
obj.style.pixelTop=sy+incx;
obj.style.pixelLeft=sx;
y=obj.style.pixelTop;
x=obj.style.pixelLeft;
if(obj.style.pixelTop==(610-len*num)){ //到达目的地址时
obj.style.pixelTop=610-len*num;
//erase(); 功能没有实现
num++;
addDiv();
fall(num);
}
else if(obj.style.pixelTop<(610-len*num)) //没有到达目的地址时
timer = setTimeout('fall1(num,x,y)',1000); //1000可以换成任意数字，越小下落速度越快
else if(obj.style.pixelTop>(610-len*num)) //处理出现地址大于目的地址时
{
}
}
//产生随机六位字符串
function randomString(leng){
var source="abcdefghijklmnopqrstuvwxyz";
var result="";
for(var i=0;i<leng;i++){
result+=source.charAt(Math.random()*source.length)
}
return result;
}
//键盘控制
function document.onkeydown()
{
if (window.event.keyCode==37) // 方向键 <-
{
var temp=document.getElementById("sg"+num);
temp.style.pixelLeft-=8;
x=temp.style.pixelLeft;
y=temp.style.pixelTop;
clearTimeout(timer);
fall1(num,x,y-10);
}
else if (window.event.keyCode==39) // 方向键 ->
{
var temp=document.getElementById("sg"+num);
temp.style.pixelLeft+=8;
x=temp.style.pixelLeft;
y=temp.style.pixelTop;
clearTimeout(timer);
fall1(num,x,y-10);
}
else if (window.event.keyCode==40){ //方向键 |
var temp=document.getElementById("sg"+num);
temp.style.pixelTop+=10;
x=temp.style.pixelLeft;
y=temp.style.pixelTop;
clearTimeout(timer);
fall1(num,x,y-10);
}
}
//字母消除程序，暂时不能实现功能
function erase(){
var pos=new Array();
for(var i=0;i<=num;i++){ //得到所有存在的div每个字符的位置值
dpos=document.getElementById("sg"+i);
x=dpos.style.pixelLeft;
//content=dpos.value;
obj=eval("arr"+i);
obj=new Array();
for(var j=0;j<6;j++){
obj[j]=x+j;
}
pos[i]=obj;
}
//alert(num);
if(num>=1){
for(t=num-1;t<num;t++){
for(tt=0;tt<6;tt++){
for(ttt=0;ttt<6;ttt++){
// alert(pos[t][ttt]);
if(pos[t][tt]==pos[t+1][ttt]){
// alert("here"+tt+" "+ttt);
mod1=document.getElementById("sg"+t);
mod2=document.getElementById("sg"+(t+1));
var rep1="",rep2="";
for(var l=0;l<mod1.innerHTML.length;l++){
if(l!=tt){
rep1+=mod1.innerHTML.charAt(l);
}
else{
rep1+="-";
}
}
mod1.innerHTML=rep1;
//rep1='';
//alert(mod1.innerHTML);
for(var ll=0;ll<mod2.innerHTML.length;ll++){
if(ll!=ttt){
rep2+=mod2.innerHTML.charAt(ll);
}
else{
rep2+="-";
}
}
mod2.innerHTML=rep2;
//rep2='';
}
}
}
}
}
}
//-->
</SCRIPT>
<BODY onload="firstshow();" >
<div id="sg0" style="position:absolute"><SCRIPT LANGUAGE="JavaScript">
<!--
document.write(randomString(6)); //6可以改为任意数字，数字即是字符串的长度
//-->
</SCRIPT></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
fall(0);
//-->
</SCRIPT>
</BODY>
</HTML>