Posted on 2007-07-30 16:48
sugo 閱讀(374)
評論(0) 編輯 收藏
實現了控制隨機生成的一個六位字符串下落，可以向左、向右、向下加速。實現的功能仿照俄羅斯方塊來做，本來想實現上下兩行相同字母消除功能，但想起一個方法（代碼中的erase（）方法），感覺沒問題，但一直沒有實現，后來也懶得想了?，F將代碼貼在這里，希望讀到這篇文章的朋友如果感興趣的話提出寶貴意見，并可以隨意拷貝代碼完善功能:)
<!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>