具体实现方法如下betway体育app:,数组元素值为

百行 HTML5 代码完成种种双人博弈游戏

2012/06/30 · HTML5 · 1 评论 · HTML5

来源:于丙超@developerworks

简介: 本文是三个要命富有挑战性的编制程序,因为 100 行代码,大抵 10000 个字符左右,将达成围棋、五子棋、四子棋和扭转棋各种双人博艺游戏。请在乎,那多个博艺游戏不是下等编制程序者的习作,而是全数棋盘、立体棋子、事件、走棋准则判别、输赢推断的大器晚成体化博弈游戏,并且可以离线存款和储蓄到 苹果平板、Android 平板中,试想一下,把这种游戏下载到平板中,就足以在列车,旅游景区,等还未时限信号的地点举行博艺,是否扩充了GALAXY Tab的效果,是或不是风流浪漫种很中意的事体。并且,关键是,那么些程序尚未图片,无需去行使商铺付费下载,仅仅是用 HTML5 本事写的 100 行代码而已,相对是最近最迷您精悍的双人博艺游戏源码。(编者注:由于网页代码的宽度有约束,所以作者的源代码经过了某些换行管理,特此表达。卡塔尔国

目标

要做三个整机的双人博艺游戏,起码要做如下事情,第一步:绘制棋盘。差异的棋子游戏棋盘分裂,那或多或少急需开展动态管理;第二步:绘制棋子。供给表明的是,围棋,五子棋等那些棋子都是圆的呀,请不要为了图片忧愁,在 HTML5 时期,我们用代码就能够完结立体圆形棋子;第三步:推断落子事件。当然是要定点手指的点击地方,这八种棋中,有的是落在框里面包车型客车,有的却是落在纷纭的棋盘十字线上,要求动态处理;第四步:决断落子准则。下棋都有平整,不要因为代码少,就将准则减价扣,不然程序不成熟,会成为孩子的玩意儿了;第五步:判定输赢。最终,大家要一口咬住不放输赢。也正是要数子,这一个事情必需由程序来达成,因为下棋总得须求八个判决嘛;第六步:正是机械Computer时期,大家得实现离线应用。这一个太重大了,否则,假如在台式计算机上,接根网线玩的游玩,已经到处都以了,您写得再牛,有何样用?正是要运动,在未有时限信号的地点,才有市镇,以后机械,智能手提式有线话机这么多,在未曾互联网时限信号的地点,掘出活动设备来下棋,才是生龙活虎件很牛的事情。

制图棋盘

眼下说了围棋、五子棋、四子棋和扭转棋的棋盘并不相近,围棋是驰骋 二11个格,别的两种棋则是 8 个格。所以绘制棋盘是内需有参数。那是个小标题,大难题是,选拔怎么样点子来绘制棋盘?

HTML5 框架下,有最少 3 种方法:第大器晚成种,用 Canvas 画线;第两种,用 DIV,CSS3 里面扩大了行列属性;第两种,用 table 标签。

用哪豆蔻年华种速度最快,代码少吗?答案是:第三种。多少有一点大失所望啊,HTML5 不是德才兼顾的。详细代码如下:

XHTML

this.board=function(name,width,height,rowBak,colBak){ /* 画棋盘 */ nameBak=name; if("turnover"==name){row=8;col=8;}else if("gogame"==name){row=18;col=18;} var aW=Math.floor(width/(col+2)),aH=Math.floor(height/(row+2)); minL=(aW>aH?aH:aW)-4;// 那些减法很首要,不然填空时会把表格撑大 var array=new Array("<div style="margin:"+minL+"px;"> "+ "<table border=1 cellspacing=0 width=""+(aW*col)+"" height=""+(aH*row)+"">"); for(var i=0;i<row;i++){ array.push("<tr>"); for(var j=0;j<col;j++){array.push("<td align=center>"+ evt(i,j,minL,minL,aW*j+minL/2+8,aH*i+minL/2)+"</td>");} if(nameBak!="four"&&nameBak!="turnover")/* 将事件增加到表格中 */ array.push(evt(i,col,minL,minL,aW*col+minL/2+8,aH*i+minL/2)); array.push("</tr>"); } if(nameBak!="four"&&nameBak!="turnover"){ for(var j=0;j<=col;j++){ array.push(evt(row,j,minL,minL,aW*j+minL/2+8,aH*row+minL/2)); } } document.write(array.join("")+"</table></div>"); setClick(row,col,minL,minL);/* 最初化事件 */ start();/* 初叶化棋子 */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
this.board=function(name,width,height,rowBak,colBak){ /* 画棋盘 */
nameBak=name;
if("turnover"==name){row=8;col=8;}else if("gogame"==name){row=18;col=18;}
var aW=Math.floor(width/(col+2)),aH=Math.floor(height/(row+2));
minL=(aW>aH?aH:aW)-4;// 这个减法很重要,否则填空时会把表格撑大
var array=new Array("<div style="margin:"+minL+"px;"> "+
"<table border=1 cellspacing=0 width=""+(aW*col)+""
height=""+(aH*row)+"">");
for(var i=0;i<row;i++){
       array.push("<tr>");
       for(var j=0;j<col;j++){array.push("<td align=center>"+
evt(i,j,minL,minL,aW*j+minL/2+8,aH*i+minL/2)+"</td>");}
       if(nameBak!="four"&&nameBak!="turnover")/* 将事件添加到表格中 */
             array.push(evt(i,col,minL,minL,aW*col+minL/2+8,aH*i+minL/2));
             array.push("</tr>");
}
   if(nameBak!="four"&&nameBak!="turnover"){
           for(var j=0;j<=col;j++){
               array.push(evt(row,j,minL,minL,aW*j+minL/2+8,aH*row+minL/2));
               }
           }
document.write(array.join("")+"</table></div>");
setClick(row,col,minL,minL);/* 初始化事件 */
start();/* 初始化棋子 */
}

地点代码中,最要害的是标钟鼓文的第 6 行代码,那中间有八个妙法,第一个正是table 的定义,第叁个便是使用了 Array 数组。为啥要运用数组,实际不是概念贰个字符串呢?答案是优化,正是 Array 数组的 push 方法的进程要远远快于 String 字符串的加 + 运算。共计 16 行代码,贰个棋盘就画好了,当然这中间不独有是画线,还应该有棋子管理,事件定义等艺术的调用,前边将陆陆续续谈起。

绘图棋子

绘制完棋盘,我们来绘制棋子。大家筛选的这两种棋,固然棋盘区别,不过棋子没什么不同的,都以黑白棋子。那在那前,做在线博弈,除了 Flash 能达成美观效果外,其余的必需先请美术职业做几副小图片,HTML5 时期,美术职业的人工和联系开销就节省了。

咱俩足足有三种情势绘制棋子,第黄金年代种是:canvas 类,第二种正是 css 的圆角属性。用哪个种类速度又快代码又少呢?答案是第二种,圆角。代码如下:

CSS

function man(width,height,id,colorBak){ /* 画棋子 */ var color=colorBak==null?(order++%2==0?"000":"CCC"):colorBak; var r="border-radius:"+width/2+"px;"; var obj=id==null?event.srcElement:_$(id); obj.innerHTML="<div id="man_"+color+"_"+order+"" style="display:block;-webkit-" +r+"-moz-"+r+""+r+"-moz-box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+ "box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+ "background:-webkit-gradient(radial, 50 40, 30, center center, 80, from(#"+color+"), to(rgba(255,255,255,1)));"+ "width:"+width+"px;height:"+height+"px;"></div>"; }

1
2
3
4
5
6
7
8
9
10
11
function man(width,height,id,colorBak){ /* 画棋子 */
   var color=colorBak==null?(order++%2==0?"000":"CCC"):colorBak;
   var r="border-radius:"+width/2+"px;";
   var obj=id==null?event.srcElement:_$(id);
   obj.innerHTML="<div id="man_"+color+"_"+order+"" style="display:block;-webkit-"
   +r+"-moz-"+r+""+r+"-moz-box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+
   "box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+
   "background:-webkit-gradient(radial, 50 40, 30, center center, 80, from(#"+color+"),
      to(rgba(255,255,255,1)));"+
   "width:"+width+"px;height:"+height+"px;"></div>";
}

上边代码中,大家看见,大家将每三个棋子定义了贰个 DIV,使用了 CSS3 的 shadow,gradient 属性,况且可以依靠棋盘的轻重活动测算棋子的高低,别的,假若客商恨恶黑白颜色,以致足以定义成红黄颜色,女子和儿童推断会喜欢。这5 行代码是画一个棋子的艺术,做叁个粗略的循环,就能够画出多少个棋子,方法如下。

CSS

function moreMan(array){for(var i=0;i<array.length;i++) man(minL,minL,nameBak+"_"+array[i]);} /* 绘制多少个棋子 */

1
2
3
function moreMan(array){for(var i=0;i<array.length;i++)
man(minL,minL,nameBak+"_"+array[i]);}
/* 绘制多个棋子 */

处总管件

绘制完棋盘和棋子,大家来分析一下客户的动作。客商的动作仅仅便是三种,大器晚成种是点击棋盘 table,别的一种正是点击棋子 DIV。难题在点击 table 这里,大家要得悉顾客点击 table 的职分。

历史观思路只怕是那般,使用 event 方法,得到 x,y 的坐标,然后与 table 的左上角做减法,然后再跟单元格 cell 做除法。听上去都辛劳。

设若您精心阅读了眼前的代码,就活该开掘,其实在画棋盘是,大家向 array 数组中 push 了二个 evt 方法,很明朗,那几个 evt 方法要回去三个字符串变量的,那么他的开始和结果是如何吗?答案宣布:

CSS

function evt(i,j,width,height,left,top){ /* 单黄金年代单元格事件 */ return "<div id=""+nameBak+"_"+i+"_"+j+"" style="position:"+ (nameBak=="four"||nameBak=="turnover"?"block":"absolute")+ ";border:0px solid #000;width:"+ width+"px;height:"+height+"px;top:"+top+"px;left:"+left+"px;"></div>"; }

1
2
3
4
5
6
function evt(i,j,width,height,left,top){ /* 单一单元格事件 */
  return "<div id=""+nameBak+"_"+i+"_"+j+"" style="position:"+
(nameBak=="four"||nameBak=="turnover"?"block":"absolute")+
";border:0px solid #000;width:"+
width+"px;height:"+height+"px;top:"+top+"px;left:"+left+"px;"></div>";
}

规律是八个DIV。对了,那些增添事件的主意丰裕例外,实际上是在各类棋盘的交叉的地点画了一个DIV,然后给 DIV 增多事件。

CSS

function setClick(row,col,width,height){ for(var i=0;i<=row;i++){ for(var j=0;j<=col;j++){ var els=_$(nameBak+"_"+i+"_"+j); if(els!=null)els.onclick=function(){if(rule())man(width,height);}; } } }

1
2
3
4
5
6
7
8
function setClick(row,col,width,height){
    for(var i=0;i<=row;i++){
            for(var j=0;j<=col;j++){
                var els=_$(nameBak+"_"+i+"_"+j);
                if(els!=null)els.onclick=function(){if(rule())man(width,height);};
}
    }
}

亟需证实的是,DIV 必定要先定义,即 document.write 输出出来,然后技艺执行onclick 的概念,否则会回到 DIV 未定义的错误。寥寥 10 行代码,把事件难题解决了。

落子准则

日前说了,顾客点击事件有二种,点击棋盘 table 事件我们采纳额外扩展 DIV 的不二等秘书籍神奇解决了,第三种点击棋子的情势又该怎么着呢?

先要表明的是,点击棋子其实是风流倜傥种错误的风云,点击棋盘能够落子,点击棋子是怎样意思?黑白棋点击棋子是空虚的,大家务须要进行决断,不能够在有子之处落子,那是平整之风流罗曼蒂克。所以应当要定义叁个方法,推断是否点击之处是还是不是有棋子。代码如下:

CSS

function isMan(row,col){var obj=_$(nameBak+"_"+row+"_"+col,1); if(obj==null||obj.indexOf("man_")==-1)return null; else if(obj.indexOf("000")!=-1) return 0; else if(obj.indexOf("CCC")!=-1)return 1;}

1
2
3
4
5
function isMan(row,col){var obj=_$(nameBak+"_"+row+"_"+col,1);
if(obj==null||obj.indexOf("man_")==-1)return null;
else if(obj.indexOf("000")!=-1)
  return 0;
else if(obj.indexOf("CCC")!=-1)return 1;}

竟然吧,其实假诺生龙活虎行代码就足以就足以做是不是有子的判别,怎么决断的,秘技就在于剖断DIV 的水彩,棋子要么黑,再次来到 0,要么白,再次来到1,可是空白地点是未曾颜色的,返回null。这里要特别注意重回值,后边剖断输赢的时候还要用,所以不能够大致通过 true 可能 false 的的重回值来剖断是不是有子,而是要决断出有啥颜色的子。

对此五子棋和围棋,这一条法规够用了,不过对于翻转棋和四子棋,还有第二条法规:不可能在方圆空白的地点落子,就是说必得是不停的。也便是说,不仅要一口咬住不放点击的地点是或不是有棋子,还要剖断其周围是还是不是有棋子,这么些,不是能够有,而是,必得有。需求做一个小循环啊,代码如下:

CSS

function rule(){/* 走棋准绳 */ var id=event.srcElement.id; if(id.indexOf("man_")==0){alert("不能够在有子的地点落子");return false;}else{ var p=id.indexOf("_"),p1=id.lastIndexOf("_"); var row=id.substr(p+1,p1-p-1)*1,col=id.substr(p1+1)*1; if("gobang"==nameBak)return gobang(row,col); else if("four"==nameBak){ if(isMan(row,col+1)==null&&isMan(row,col-1)==null&& isMan(row+1,col)==null&& isMan(row-1,col)==null){ alert("四子棋不能在周围空白的地点落子!"); return false; } return gobang(row,col,3); }else if("turnover"==nameBak){ if(isMan(row,col+1)==null&&isMan(row,col-1)==null&& isMan(row+1,col)==null&&isMan(row-1,col)==null&& isMan(row-1,col-1)==null&& isMan(row+1,col+1)==null){ alert("翻转棋不可能在方圆空白的地点落子!"); return false; } turnover(); }else if("gogame"==nameBak){ } } return true; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function rule(){/* 走棋规则 */
var id=event.srcElement.id;
if(id.indexOf("man_")==0){alert("不能在有子的地方落子");return false;}else{
     var p=id.indexOf("_"),p1=id.lastIndexOf("_");
     var row=id.substr(p+1,p1-p-1)*1,col=id.substr(p1+1)*1;
     if("gobang"==nameBak)return gobang(row,col);
        else if("four"==nameBak){
     if(isMan(row,col+1)==null&&isMan(row,col-1)==null&&
     isMan(row+1,col)==null&&
     isMan(row-1,col)==null){
     alert("四子棋不能在四周空白的地方落子!");
     return false;
}
return gobang(row,col,3);
}else if("turnover"==nameBak){
if(isMan(row,col+1)==null&&isMan(row,col-1)==null&&
isMan(row+1,col)==null&&isMan(row-1,col)==null&&
isMan(row-1,col-1)==null&&
isMan(row+1,col+1)==null){
alert("翻转棋不能在四周空白的地方落子!");
return false;
}
  turnover();
}else if("gogame"==nameBak){
     }
     }
  return true;
}

循环中,屡屡调用 isMan 方法判别是或不是有棋子,所以大器晚成旦 isMan 写得缺乏精炼,飞速,不领会要消耗多少日子啊。数豆蔻年华数,总共 19 行代码就管理了落子准绳。

到此地,大家绘制了棋盘,棋子,获得了点击时间,决断了落子法规,才用了 40 行左右的代码,其实程序基本上可用了,不过我们不能满意啊,还得让她进一层智能一些,大家还索要三个评判定输赢。

认清输赢

要咬定输赢,大家必定要通晓下棋的平整:

五子棋是逐个方向的五子相连算赢,四子棋是各类方向多少个子相连算赢,翻转棋数棋子的个数,围棋则要麻烦些,不仅数棋子个数,还要数围住的区域。

逻辑上看似很复杂啊,就像也是总括最多的地点,有一点人工智能的意思。对的,若是前面的根底打得倒霉,这里真的要花销不计其数代码,不过因为我们近些日子定义了 DIV 用颜色推断是或不是存在棋子的 iaMan 方法,这里再使用三个小手艺,就可以轻便解决这几个输赢判断。先看看五子棋和四子棋的高下决断代码,然后相比代码来深入分析。

CSS

function gobang(row,col,num){ num=num==null?4:num; var rs=[[],[],[],[]],b=[],w=[];/* 这里运用四维数组来存款和储蓄棋子地方 */ for(var i=0,j=0;i<num*2+1;i++,j++){ rs[0].push(isMan(row-num+i,col)); rs[1].push(isMan(row,col-num+j)); rs[2].push(isMan(row-num+i,col-num+j)); rs[3].push(isMan(row-num+i,col-num+j)); if(i<num){b.push(0);w.push(1);} } if(rs.join("#").indexOf(b.join(","))!=-1){alert("黑棋胜");return false; }else if(rs.join("#").indexOf(w.join(","))!=-1){alert("白棋胜");return false;} return true; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function gobang(row,col,num){
num=num==null?4:num;
var rs=[[],[],[],[]],b=[],w=[];/* 这里采用四维数组来存储棋子位置 */
for(var i=0,j=0;i<num*2+1;i++,j++){
rs[0].push(isMan(row-num+i,col));
rs[1].push(isMan(row,col-num+j));
rs[2].push(isMan(row-num+i,col-num+j));
rs[3].push(isMan(row-num+i,col-num+j));
if(i<num){b.push(0);w.push(1);}
}
if(rs.join("#").indexOf(b.join(","))!=-1){alert("黑棋胜");return false;
}else if(rs.join("#").indexOf(w.join(","))!=-1){alert("白棋胜");return false;}
     return true;
}

总共 9 行代码就解决,看懂没?首先定义了多个 Javascript 多维数组 rs=[[],[],[],[]],这种概念多维数组的方法,挑出来着重说惠氏(WYETH卡塔 尔(英语:State of Qatar)下,因为找寻引擎上都以搜不到的,我执教时大致遭逢的学子也都不亮堂,他们大都接纳new Array,然后加循环的蜗牛方法。

第二步:从落子之处最早循环,注意,不是循环整个棋盘,为的正是节省时间啊。循环设计错落有致七个方向,有棋子的地点,就向这一个四维数组 push 棋子的颜料。

其三步:把数组 join 起来就 ok 啦,假诺有 4 个或 5 个 1 相连,自然正是白棋胜,不然正是黑棋胜。

划线这里,就有一点点意思啊,注意我们管理的数目标秘籍,小编称之为“块数据”的管理措施,正是丰富利用 array 数组,保存一块一块的多少,无论写入,读取,依然总括分析,都以照准这一块数据进行,那样不仅可以够升高内聚度,便于提炼出能够引用的方法,就能够大大的加快实践进程。

管理相连都不在话下,数子就更简明了,使用块数据管理办法,3 行消除。

CSS

function turnover(){ if(order<64)return; var num=0;var total=row*col;for(var i=0;i<row;i++){ for(var j=0;j<col;j++){num+=isMan(i+"_"+j);} } if(num<total/2)alert("黑棋胜"+(total-num*2)+"子"); else if(num>row*col/2)alert("白棋胜"+(num*2-total)+"子"); else alert("平局"); }

1
2
3
4
5
6
7
8
9
function turnover(){
    if(order<64)return;
    var num=0;var total=row*col;for(var i=0;i<row;i++){
        for(var j=0;j<col;j++){num+=isMan(i+"_"+j);}
    }
if(num<total/2)alert("黑棋胜"+(total-num*2)+"子");
else if(num>row*col/2)alert("白棋胜"+(num*2-total)+"子");
else alert("平局");
}

棋子开端化

紧凑地写到这里,还应该有最终一个有关棋子的难点亟待管理。那便是,下五子棋是从家贫壁立棋盘最早,别的两种棋却黄金时代早先都以有子的。其实给叁个空白棋盘也行,可是任何三种棋因为平时的前几步走法都以一定的,大家为了拉长智能化水平,必须要在萧疏四行代码,毕竟,大家的靶子是一个商场化的付加物,实际不是三个初读书人不思忖顾客体验的前后相继。

CSS

function start(){ if("turnover"==nameBak){moreMan([3+"_"+3,4+"_"+3,4+"_"+4,3+"_"+4]); }else if("four"==nameBak){man(minL,minL,nameBak+"_"+row/2+"_"+0); }else if("gogame"==nameBak){moreMan([3+"_"+3,15+"_"+3,15+"_"+15,3+"_"+15]); } }

1
2
3
4
5
6
function start(){
   if("turnover"==nameBak){moreMan([3+"_"+3,4+"_"+3,4+"_"+4,3+"_"+4]);
   }else if("four"==nameBak){man(minL,minL,nameBak+"_"+row/2+"_"+0);
   }else if("gogame"==nameBak){moreMan([3+"_"+3,15+"_"+3,15+"_"+15,3+"_"+15]);
   }
}

实际正是调用了大器晚成晃 moreMan 方法,注意也是块数据援用,传输了叁个数组,用下划线分割横向和纵向坐标。

做成离线应用

正文初阶就说过,台式Computer的双人或五人博艺程序已经数不清烂大街了,唯有移动选取本事有商场,大家的对象正是奔着那些来的,所以最后必需做成离线应用。

什么贯彻 HTML5 的离线应用,寻觅引擎非常快能找到结果,其实只要三个关键步骤。

首先步;在 Web 服务器的布局文件中声雅培(Karicare卡塔尔国下。汤姆cat 和 Apache 的注脚方式不相同样,需求当心;

其次步:定义 manifest 文件,文件格式必要小心;

其三步:在 HTML 的文件中调用一下 manifest 文件。

根据那三个步骤,读者能够活动物检疫索细节,这里就不赘述了,笔者只讲寻觅引擎搜不到的。

别的部要求要验证的是,平板电脑 和 Android 平板上浏览器实现全屏的点子也不黄金时代致,针对 GALAXY Tab客商,大家还必得定义黄金时代行能够贯彻全屏的代码。

  1. 功用图、在线演示、开放源代码

本文的在线演示网站是:,效果图如下图所示:

图 1. 效果图

betway体育app 1

图中加了一个筛选棋类型和设置背景功效,如要拿到全套源代码,只要利用浏览器的查看源代码效率就可以,限于篇幅,这里就不贴了。

总结

用作三个技师,最高的地步不是写得代码更加的多越好,而是用起码的代码实现最多的乘除,化解最多的主题材料。回顾当年,盖茨在编写制定Basic 时,为了节约多少个字符须要费尽脑筋发愤图强,以致于遗留了千年虫世纪难点,反观后日,在云计算时期,随着硬盘和内部存款和储蓄器的体量越来越大,CPU 的演算更加快,超级多大型项目标程序猿如同失去了简洁代码的习贯。可是运动计量的硬件,近期还还没那么高的配备,本文通过 HTML5 博弈游戏,使用“块数据”总括形式,完成了用最少代码达成最多划算的指标,特别适用移动计量,与咱们共勉。

 

赞 收藏 1 评论

betway体育app 2

那只是一个轻便易行的JAVAscript和HTML5小程序,未有落到实处人机对战。
五子棋棋盘落子点对应的二维数组。数组的要素对应落子点。举例数组元素值为0表示该因素对应的落子点没有棋子,数组成分值为1象征该因素对应的落子点有白棋子,数组元素值为2意味着该因素对应的落子点有黑棋子;
看清五子棋赢棋的算法是由此对五子棋棋盘落子点对应的二维数组的操作来促成的。

正文实例陈说了JS仿i谷歌自定义首页模块拖拽特效的情势。分享给我们供大家参考。具体落到实处格局如下:

决断五子棋赢棋算法
上面包车型客车函数能够达成剖断五子棋赢棋的算法,也得以固守教材中相应的算法实现。
其间函数的参数xx.yy为数组下标,chess数组完毕五子棋棋盘落子点的数据结构映射。
算法的考虑艺术是:以如今落子点对应的下标为重心,向其周边8个趋向拓宽检索,假诺有同色子连五子,重回1,或2,否则重返0。重回1意味着白棋方胜,重返2意味着黑棋方胜。再次来到0代表未有发出赢棋数据结构状态。
betway体育app 3 
betway体育app 4
betway体育app 5 

复制代码 代码如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS仿i谷歌(Google卡塔 尔(阿拉伯语:قطر‎自定义首页模块拖拽效果</title>
    <script type="text/javascript">
        var Common = {
            getEvent: function() {//ie/ff
                if (document.all) {
                    return window.event;
                }
                func = getEvent.caller;
                while (func != null) {
                    var arg0 = func.arguments[0];
                    if (arg0) {
                        if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
                            return arg0;
                        }
                    }
                    func = func.caller;
                }
                return null;
            },
            getMousePos: function(ev) {
                if (!ev) {
                    ev = this.getEvent();
                }
                if (ev.pageX || ev.pageY) {
                    return {
                        x: ev.pageX,
                        y: ev.pageY
                    };
                }

<!DOCTYPE html>
< html xmlns=";
< head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
margin: 10px;
}
</style>
<script type="text/javascript">
var canvas;
var context;
var isWhite = true;//设置是还是不是该轮到白棋
var isWell = false;//设置该局棋盘是或不是赢了,倘使赢了就无法再走了
var img_b = new Image();
img_b.src = "images/b.png";//白棋图片
var img_w = new Image();
img_w.src = "images/w.png";//黑棋图片
var chessData = new Array(15);//那几个为棋盘的二维数组用来保存棋盘信息,初步化0为未有渡过的,1为白棋走的,2为黑棋走的
for (var x = 0; x < 15; x++) {
chessData[x] = new Array(15);
for (var y = 0; y < 15; y++) {
chessData[x][y] = 0;
}
}
function drawRect() {//页面加载完成调用函数,开头化棋盘
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
for (var i = 0; i <= 640; i += 40) {//绘制棋盘的线
context.beginPath();
context.moveTo(0, i);
context.lineTo(640, i);
context.closePath();
context.stroke();
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, 640);
context.closePath();
context.stroke();
}
}
function play(e) {//鼠标点击时发生
var x = parseInt((e.clientX - 20) / 40);//总括鼠标点击的区域,如若点击了(65,65卡塔尔国,那么正是点击了(1,1卡塔 尔(阿拉伯语:قطر‎的职位
var y = parseInt((e.clientY - 20) / 40);
if (chessData[x][y] != 0) {//判别该岗位是不是被下过了
alert("你不可能在此个岗位下棋");
return;
}
if (isWhite) {
isWhite = false;
drawChess(1, x, y);
}
else {
isWhite = true;
drawChess(2, x, y);
}
}
function drawChess(chess, x, y) {//参数为,棋(1为白棋,2为黑棋卡塔 尔(阿拉伯语:قطر‎,数组地点
if (isWell == true) {
alert("已经收尾了,如若急需重新玩,请刷新");
return;
}
if (x >= 0 && x < 15 && y >= 0 && y < 15) {
if (chess == 1) {
context.drawImage(img_w, x * 40 + 20, y * 40 + 20);//绘制白棋
chessData[x][y] = 1;
}
else {
context.drawImage(img_b, x * 40 + 20, y * 40 + 20);
chessData[x][y] = 2;
}
judge(x, y, chess);
}
}
function judge(x, y, chess) {//决断该局棋盘是或不是赢了
var count1 = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
//左右肯定
for (var i = x; i >= 0; i--) {
if (chessData
[y] != chess) {
break;
}
count1++;
}
for (var i = x + 1; i < 15; i++) {
if (chessData
[y] != chess) {
break;
}
count1++;
}
//上下剖断
for (var i = y; i >= 0; i--) {
if (chessData[x]
!= chess) {
break;
}
count2++;
}
for (var i = y + 1; i < 15; i++) {
if (chessData[x]
!= chess) {
break;
}
count2++;
}
//左上右下剖断
for (var i = x, j = y; i >= 0, j >= 0; i--, j--) {
if (chessData
[j] != chess) {
break;
}
count3++;
}
for (var i = x + 1, j = y + 1; i < 15, j < 15; i++, j++) {
if (chessData
[j] != chess) {
break;
}
count3++;
}
//右上左下推断
for (var i = x, j = y; i >= 0, j < 15; i--, j++) {
if (chessData
[j] != chess) {
break;
}
count4++;
}
for (var i = x + 1, j = y - 1; i < 15, j >= 0; i++, j--) {
if (chessData
[j] != chess) {
break;
}
count4++;
}
if (count1 >= 5 || count2 >= 5 || count3 >= 5 || count4 >= 5) {
if (chess == 1) {
alert("白棋赢了");
}
else {
alert("黑棋赢了");
}
isWell = true;//设置该局棋盘已经赢了,不得以再走了
}
}
</script>
< /head>
< body onload="drawRect()">
<div>
<canvas width="640" id="canvas" onmousedown="play(event)" height="640">你的浏览器不帮助HTML5 canvas,请使用 google chrome 浏览器 展开.
</canvas>
</div>
< /body>
< /html>

                if (document.documentElement && document.documentElement.scrollTop) {
                    return {
                        x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
                        y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
                    };
                }
                else if (document.body) {
                    return {
                        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
                        y: ev.clientY + document.body.scrollTop - document.body.clientTop
                    };
                }
            },
            getElementPos: function(el) {
                el = this.getItself(el);
                var _x = 0, _y = 0;
                do {
                    _x += el.offsetLeft;
                    _y += el.offsetTop;
                } while (el = el.offsetParent);
                return { x: _x, y: _y };
            },
            getItself: function(id) {
                return "string" == typeof id ? document.getElementById(id) : id;
            },
            getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body?document.body.offsetWidth:0), h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body ? document.body.offsetHeight : 0) },
            isIE: document.all ? true : false,
            setOuterHtml: function(obj, html) {
                var Objrange = document.createRange();
                obj.innerHTML = html;
                Objrange.selectNodeContents(obj);
                var frag = Objrange.extractContents();
                obj.parentNode.insertBefore(frag, obj);
                obj.parentNode.removeChild(obj);
            },
            firstChild: function(parentObj, tagName) {
                if (Common.isIE) {
                    return parentObj.firstChild;
                }
                else {
                    var arr = parentObj.getElementsByTagName(tagName);
                    return arr[0];
                }
            },
            lastChild: function(parentObj, tagName) {
                if (Common.isIE) {
                    return parentObj.lastChild;
                }
                else {
                    var arr = parentObj.getElementsByTagName(tagName);
                    return arr[arr.length - 1];
                }
            },
            setCookie: function(name, value) {
                document.cookie = name + "=" + value;
            },
            getCookie: function(name) {
                var strCookie = document.cookie;
                var arrCookie = strCookie.split("; ");
                for (var i = 0; i < arrCookie.length; i++) {
                    var arr = arrCookie[i].split("=");
                    if (!arr[1]) {
                        return "";
                    }
                    if (arr[0] == name) {
                        return arr[1];
                    }
                }
                return "";
            },
            delCookie: function(name) {
                var exp = new Date();
                exp.setTime(exp.getTime() - 1);
                var cval = this.getCookie(name);
                if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
            }
        }
        var Class = {
            create: function() {
                return function() { this.init.apply(this, arguments); }
            }
        }
        var Drag = Class.create();
        Drag.prototype = {
            init: function(titleBar, dragDiv, Options) {
                //设置点击是不是透明,默许透明四成
                titleBar = Common.getItself(titleBar);
                dragDiv = Common.getItself(dragDiv);
                this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 };
                if (Options) {
                    this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100;
                    if (Options.area) {
                        if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };
                        if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };
                        if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };
                        if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };
                    }
                }
                else {
                    this.opacity = 60;
                }
                this.originDragDiv = null;
                this.tmpX = 0;
                this.tmpY = 0;
                this.moveable = false;
                this.dragArray = [];

您可能感兴趣的稿子:

  • 纯JS达成五子棋游戏包容各浏览器(附源码)
  • JavaScript 井字棋人工智能实现代码
  • javascript 7行代码画出二个围棋棋盘
  • 中夏族民共和国象棋js代码,仅演示,未能真下
  • JS小游戏之象棋暗棋源码详细解释
  • 诘屈聱牙之javascript中中原人民共和国象棋
  • js 钻石棋网络游戏代码
  • 原生JS+Canvas落成五子棋游戏实例
  • 原生JS+Canvas完成五子棋游戏
  • 基于JavaScript完毕五子棋游戏
  • html5 canvas-1.canvas介绍(hello canvas)

                var dragObj = this;
                var dragTbl = document.getElementById("dragTable");

                titleBar.onmousedown = function(e) {
                    var ev = e || window.event || Common.getEvent();
                    //只允许通过鼠标左键举办拖拽,IE鼠标左键为1 FireFox为0
                    if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
                    }
                    else {
                        return false;
                    }

                    //管理特别情况:在最上/下边MOVE时不相见现存DIV的情景下,又回去起头拖拽的列最上/下方
                    var tmpColId;
                    for (c = 0; c < dragTbl.rows[0].cells.length; c++) {
                        for (k = 0; k < dragTbl.rows[0].cells[c].getElementsByTagName("DIV").length; k++) {
                            if (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) {
                                tmpColId = c;
                                break;
                            }
                        }
                    }
                    var tmpPosFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId], "DIV"));
                    var tmpPosLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV"));
                    var tmpObj = { colId: tmpColId, firstChildUp: tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y + Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV").offsetHeight };

                    //保存当前可拖拽各容器的所在地方
          dragObj.dragArray = dragObj.RegDragsPos();

                    //插入虚线框
                    var dashedElement = document.createElement("div");
                    dashedElement.style.cssText = dragDiv.style.cssText;
                    dashedElement.style.border = " dashed 2px #aaa ";
                    dashedElement.style.marginBottom = "6px";
                    dashedElement.style.width = dragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //减去boderWidth使虚线框大小保持与dragDiv意气风发致
         dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //加上px 保证FF正确                   
          dashedElement.style.position = "relative";
                    if (dragDiv.nextSibling) {
                        dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling);
                    }
                    else {
                        dragDiv.parentNode.appendChild(dashedElement);
                    }
                    //拖动时形成absolute
                    dragDiv.style.width = dragDiv.offsetWidth + "px";
                    dragDiv.style.position = "absolute";

                    dragObj.moveable = true;
                    dragDiv.style.zIndex = dragObj.GetZindex() + 1;

                    var downPos = Common.getMousePos(ev);
                    dragObj.tmpX = downPos.x - dragDiv.offsetLeft;
                    dragObj.tmpY = downPos.y - dragDiv.offsetTop;

                    if (Common.isIE) {
                        dragDiv.setCapture();
                    } else {
                        window.captureEvents(Event.mousemove);
                    }

本文由必威发布于必威-前端,转载请注明出处:具体实现方法如下betway体育app:,数组元素值为

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。