好长时间都没有写游戏了，最近花了点时间写了一个html5(dom)版的拉米游戏（包括播放器），记录一下。
问题一：如果我们在获取一个元素位置时用所谓的兼容性的获取位置的方法时（即offsetTop而后判断元素是否有父元素递归得到元素在文档中的绝对位置），但是如果元素的父元素如果设置为display:none，此法不再起作用。
这时需要在元素的透明度上设置
问题二：当我想要获取/设置·相对父元素的位置时，通过内链样式表的方式获取：如rules[0].style.top，获取的值为0.
这时获取用element.offsetTop/offsetLeft,
设置用element.style.top/left;
问题三：当我在写音乐播放器的时候，遇到无法得到audio元素中的duration属性。
解决：可以通过添加事件addEvent(audio,”canplay”,function(){
var time=audio.duration;
});
得到想要的事件
问题四：在滑动条的时候，设置了定时器这导致了，我的函数在不受控制的执行，特别是在我点击下一首歌的时候，白色的缓冲条会不停地长短变化。
解决：需要（下一首歌上）添加事件删除定时器。
问题五：通过window.onload方式加载当我想要通过点击切换一首时，停止音乐播放，设置src属性，在audio.play(),无法实现音乐的播放。
解决：我将audio标签删除后再重新创建这个标签。
关于其中一些逻辑
涉及了一些自认为有价值的逻辑。（JavaScript书写）
(金)拉米纸牌游戏的逻辑算法
其一：十张牌中找到相同的刻字（即三或四张相同的相同牌）
//得到搭子之判断是否是3到4张得同样的刻字,传入十张牌参数
function getDaZi(arrPoks){
//加10
var arrs=[0,0,0,0,0,0,0,0,0,0,0,0,0];
var dzarrs=[[],[],[],[],[],[],[],[],[],[],[],[],[]];
//搭子的个数
var count=0;
/*遍历十张牌数组中的每一张牌的所在的范围*/
for(var i in arrPoks){
if(arrPoks[i]<20&&arrPoks[i]>10){
dzarrs[0].push(arrPoks[i]);
}else if(arrPoks[i]<30&&arrPoks[i]>20){
dzarrs[1].push(arrPoks[i]);
}else if(arrPoks[i]<40&&arrPoks[i]>30){
dzarrs[2].push(arrPoks[i]);
}else if(arrPoks[i]<50&&arrPoks[i]>40){
dzarrs[3].push(arrPoks[i]);
}else if(arrPoks[i]<60&&arrPoks[i]>50){
dzarrs[4].push(arrPoks[i]);
}else if(arrPoks[i]<70&&arrPoks[i]>60){
dzarrs[5].push(arrPoks[i]);
}else if(arrPoks[i]<80&&arrPoks[i]>70){
dzarrs[6].push(arrPoks[i]);
}else if(arrPoks[i]<90&&arrPoks[i]>80){
dzarrs[7].push(arrPoks[i]);
}else if(arrPoks[i]<100&&arrPoks[i]>90){
dzarrs[8].push(arrPoks[i]);
}else if(arrPoks[i]<110&&arrPoks[i]>100){
dzarrs[9].push(arrPoks[i]);
}else if(arrPoks[i]<120&&arrPoks[i]>110){
dzarrs[10].push(arrPoks[i]);
}else if(arrPoks[i]<130&&arrPoks[i]>120){
dzarrs[11].push(arrPoks[i]);
}else if(arrPoks[i]<140&&arrPoks[i]>130){
dzarrs[12].push(arrPoks[i]);
}
}
//遍历数组判断是否有数超过3或4
var ddzarrs=[];
for(var i in dzarrs){
if(dzarrs[i].length>2) ddzarrs.push(dzarrs[i]);
}
return ddzarrs;
}
其二：十张牌中找到同花顺(即超过四张相同花色的顺子)
//判断是否是同花顺
//得到同花顺数组
//此为张文采所创立的得到同花顺的数组方法创建于2016/9/8
function getTHS(arrPoks){
var count=0;
//花色数组，每一组为相同的花色在一起
var arrs=[[],[],[],[]];
//判断是不是同花
for(var i in arrPoks){
if(arrPoks[i].toString().match(/.*1$/)){
arrs[0].push(arrPoks[i]);
}else if(arrPoks[i].toString().match(/.*2$/)){
arrs[1].push(arrPoks[i]);
}else if(arrPoks[i].toString().match(/.*3$/)){
arrs[2].push(arrPoks[i]);
}else if(arrPoks[i].toString().match(/.*4$/)){
arrs[3].push(arrPoks[i]);
}
}
sortPok(arrs[0]);
sortPok(arrs[1]);
sortPok(arrs[2]);
sortPok(arrs[3]);
//删除花色中小于3张牌的花牌组
//同花顺数组
var Arrs=[];
for(var ss in arrs){
if(arrs[ss].length>2){
Arrs.push(arrs[ss]);
}
}
var thsArrs=[];
//判断同花中是否是有顺子
//我们得到同花的数组相同的花色在一起
for(var k in Arrs){
//取数组中的第一个数加十看是否是第二个数
//如果第个二数与第一个数加10相等则进入第三个数的比较
var len=Arrs[k].length;
//顺子数组
var thsArr=[];
var m=0;
for(var l=0;l<len-1;l++){
m=0;
thsArr=[];
if(Arrs[k][l+1]==Arrs[k][l]+10){
if(Arrs[k][l+2]==Arrs[k][l]+20){
//此处为同花顺
thsArr.push(Arrs[k][l]);
thsArr.push(Arrs[k][l+1]);
thsArr.push(Arrs[k][l+2]);
m=l+2;
if(Arrs[k][l+3]==Arrs[k][l]+30){
thsArr.push(Arrs[k][l+3]);
m=l+3;
if(Arrs[k][l+4]==Arrs[k][l]+40){
thsArr.push(Arrs[k][l+4]);
m=l+4;
if(Arrs[k][l+5]==Arrs[k][l]+50){
thsArr.push(Arrs[k][l+5]);
m=l+5;
if(Arrs[k][l+6]==Arrs[k][l]+60){
thsArr.push(Arrs[k][l+6]);
m=l+6;
if(Arrs[k][l+7]==Arrs[k][l]+70){
thsArr.push(Arrs[k][l+7]);
m=l+7;
if(Arrs[k][l+8]==Arrs[k][l]+80){
thsArr.push(Arrs[k][l+8]);
m=l+8;
if(Arrs[k][l+9]==Arrs[k][l]+90){
//祝贺你能到此处说明已到金湖
thsArr.push(Arrs[k][l+9]);
m=l+9;
}
}
}
}
}
}
}
}
}
if(m!=0){
l=m;
}
if(thsArr.length>2){
thsArrs.push(thsArr);
}
}
}
return thsArrs;
}
其三：十张牌中同花顺与相同刻字合理搭配找到相同的米数
//设计思路看同花顺中有几个相同刻字在其中，如果1 2 3
function getMin(uarrs){
var obj={};
//需要在要
var arrs1=copyArray(uarrs);
var arrs2=copyArray(uarrs);
var arrs3=copyArray(uarrs);
var arrs4=copyArray(uarrs);
//一个同花顺都不删
var dot1=getEndDot(arrs1,0,0);
//不要第一个同花顺
var dot2=getEndDot(arrs2,0,1);
//不要第二同花顺
var dot3=getEndDot(arrs3,1,1);
//两个同花顺都不要
var dot4=getEndDot(arrs4,0,2);
if(dot1>dot2||dot1==dot2){
if(dot3>dot4||dot3==dot4){
if(dot2>dot4){
//选择删除两个同花顺
obj.dot=dot4;
obj.arrs=arrs4;
return obj;
//return dot4;
}else{
//选择删除第二个同花顺
//return dot2;
obj.dot=dot2;
obj.arrs=arrs2;
return obj;
}
}else{
if(dot2>dot3){
//选择删除第二个同花顺
//return dot3;
obj.dot=dot3;
obj.arrs=arrs3;
return obj;
}else{
//选择删除第一个同花顺
//return dot2;
obj.dot=dot2;
obj.arrs=arrs2;
return obj;
}
}
}else{
if(dot3>dot4||dot3==dot4){
if(dot1>dot4){
//选择删除两个同花顺
//return dot4;
obj.dot=dot4;
obj.arrs=arrs4;
return obj;
}else{
//选择一个同花顺都不删
//return dot1;
obj.dot=dot1;
obj.arrs=arrs1;
return obj;
}
}else{
if(dot1>dot3){
//选择删除第二个同花顺
//return dot3;
obj.dot=dot3;
obj.arrs=arrs3;
return obj;
}else{
//选择删除第一个同花顺
//return dot1;
obj.dot=dot1;
obj.arrs=arrs1;
return obj;
}
}
}
}
function getDot(arrPoks){
var dot=0;
for(var i in arrPoks){
if(arrPoks[i]<20&&arrPoks[i]>10){
dot+=1;
}else if(arrPoks[i]<30&&arrPoks[i]>20){
dot+=2;
}else if(arrPoks[i]<40&&arrPoks[i]>30){
dot+=3;
}else if(arrPoks[i]<50&&arrPoks[i]>40){
dot+=4;
}else if(arrPoks[i]<60&&arrPoks[i]>50){
dot+=5;
}else if(arrPoks[i]<70&&arrPoks[i]>60){
dot+=6;
}else if(arrPoks[i]<80&&arrPoks[i]>70){
dot+=7;
}else if(arrPoks[i]<90&&arrPoks[i]>80){
dot+=8;
}else if(arrPoks[i]<100&&arrPoks[i]>90){
dot+=9;
}else if(arrPoks[i]<110&&arrPoks[i]>100){
dot+=10;
}else if(arrPoks[i]<120&&arrPoks[i]>110){
dot+=10;
}else if(arrPoks[i]<130&&arrPoks[i]>120){
dot+=10;
}else if(arrPoks[i]<140&&arrPoks[i]>130){
dot+=10;
}
}
return dot;
}
//复制数组
function copyArray(arrs){
var copyArrs=new Array();
for(var i in arrs){
copyArrs.push(arrs[i]);
}
return copyArrs;
}
//得到最终的分数
//i表示删除元素的开始下标
//j表示删除元素的个数
function getEndDot(arrs,i,j){
var thsArrs=getTHS(arrs);
thsArrs.splice(i,j);
deleteArr(arrs,thsArrs);
//得到相同刻字的数组
var sameKZs=getDaZi(arrs);
deleteArr(arrs,sameKZs);
thsArrs=getTHS(arrs);
deleteArr(arrs,thsArrs);
var dot=getDot(arrs);
return dot;
}
//得到搭子之判断是否是3到4张得同样的刻字,传入十张牌参数
function getDaZi(arrPoks){
//加10
var arrs=[0,0,0,0,0,0,0,0,0,0,0,0,0];
var dzarrs=[[],[],[],[],[],[],[],[],[],[],[],[],[]];
//搭子的个数
var count=0;
/*遍历十张牌数组中的每一张牌的所在的范围*/
for(var i in arrPoks){
if(arrPoks[i]<20&&arrPoks[i]>10){
dzarrs[0].push(arrPoks[i]);
}else if(arrPoks[i]<30&&arrPoks[i]>20){
dzarrs[1].push(arrPoks[i]);
}else if(arrPoks[i]<40&&arrPoks[i]>30){
dzarrs[2].push(arrPoks[i]);
}else if(arrPoks[i]<50&&arrPoks[i]>40){
dzarrs[3].push(arrPoks[i]);
}else if(arrPoks[i]<60&&arrPoks[i]>50){
dzarrs[4].push(arrPoks[i]);
}else if(arrPoks[i]<70&&arrPoks[i]>60){
dzarrs[5].push(arrPoks[i]);
}else if(arrPoks[i]<80&&arrPoks[i]>70){
dzarrs[6].push(arrPoks[i]);
}else if(arrPoks[i]<90&&arrPoks[i]>80){
dzarrs[7].push(arrPoks[i]);
}else if(arrPoks[i]<100&&arrPoks[i]>90){
dzarrs[8].push(arrPoks[i]);
}else if(arrPoks[i]<110&&arrPoks[i]>100){
dzarrs[9].push(arrPoks[i]);
}else if(arrPoks[i]<120&&arrPoks[i]>110){
dzarrs[10].push(arrPoks[i]);
}else if(arrPoks[i]<130&&arrPoks[i]>120){
dzarrs[11].push(arrPoks[i]);
}else if(arrPoks[i]<140&&arrPoks[i]>130){
dzarrs[12].push(arrPoks[i]);
}
}
//遍历数组判断是否有数超过3或4
var ddzarrs=[];
for(var i in dzarrs){
if(dzarrs[i].length>2) ddzarrs.push(dzarrs[i]);
}
return ddzarrs;
}
//判断是否是同花顺
//得到同花顺数组
//此为张文采所创立的得到同花顺的数组方法创建于2016/9/8
function getTHS(arrPoks){
var count=0;
//花色数组，每一组为相同的花色在一起
var arrs=[[],[],[],[]];
//判断是不是同花
for(var i in arrPoks){
if(arrPoks[i].toString().match(/.*1$/)){
arrs[0].push(arrPoks[i]);
}else if(arrPoks[i].toString().match(/.*2$/)){
arrs[1].push(arrPoks[i]);
}else if(arrPoks[i].toString().match(/.*3$/)){
arrs[2].push(arrPoks[i]);
}else if(arrPoks[i].toString().match(/.*4$/)){
arrs[3].push(arrPoks[i]);
}
}
sortPok(arrs[0]);
sortPok(arrs[1]);
sortPok(arrs[2]);
sortPok(arrs[3]);
//删除花色中小于3张牌的花牌组
//同花顺数组
var Arrs=[];
for(var ss in arrs){
if(arrs[ss].length>2){
Arrs.push(arrs[ss]);
}
}
var thsArrs=[];
//判断同花中是否是有顺子
//我们得到同花的数组相同的花色在一起
for(var k in Arrs){
//取数组中的第一个数加十看是否是第二个数
//如果第个二数与第一个数加10相等则进入第三个数的比较
var len=Arrs[k].length;
//顺子数组
var thsArr=[];
var m=0;
for(var l=0;l<len-1;l++){
m=0;
thsArr=[];
if(Arrs[k][l+1]==Arrs[k][l]+10){
if(Arrs[k][l+2]==Arrs[k][l]+20){
//此处为同花顺
thsArr.push(Arrs[k][l]);
thsArr.push(Arrs[k][l+1]);
thsArr.push(Arrs[k][l+2]);
m=l+2;
if(Arrs[k][l+3]==Arrs[k][l]+30){
thsArr.push(Arrs[k][l+3]);
m=l+3;
if(Arrs[k][l+4]==Arrs[k][l]+40){
thsArr.push(Arrs[k][l+4]);
m=l+4;
if(Arrs[k][l+5]==Arrs[k][l]+50){
thsArr.push(Arrs[k][l+5]);
m=l+5;
if(Arrs[k][l+6]==Arrs[k][l]+60){
thsArr.push(Arrs[k][l+6]);
m=l+6;
if(Arrs[k][l+7]==Arrs[k][l]+70){
thsArr.push(Arrs[k][l+7]);
m=l+7;
if(Arrs[k][l+8]==Arrs[k][l]+80){
thsArr.push(Arrs[k][l+8]);
m=l+8;
if(Arrs[k][l+9]==Arrs[k][l]+90){
//祝贺你能到此处说明已到金湖
thsArr.push(Arrs[k][l+9]);
m=l+9;
}
}
}
}
}
}
}
}
}
if(m!=0){
l=m;
}
if(thsArr.length>2){
thsArrs.push(thsArr);
}
}
}
return thsArrs;
}
扫一扫
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
