% 求余
创新互联秉承实现全网价值营销的理念，以专业定制企业官网，成都网站制作、做网站、外贸营销网站建设，微信小程序开发，网页设计制作，手机网站开发，网络营销推广帮助传统企业实现“互联网+”转型升级专业定制企业官网,公司注重人才、技术和管理，汇聚了一批优秀的互联网技术人才,对客户都以感恩的心态奉献自己的专业和所长。
var a=5;
var b=7;
var c=b%a;//c被赋值b模除于a，这个时候c的值是2（7除以5于2）
++ 自加
var a=5;
a++;//这个时候a自加，那么a的值现在是6
//a++和++a有区别，但是都能让这个变量自加1
-- 自减
//同自加
== 等于【逻辑判断】
//这个式子会返回真值，就是真(true)假(false)
var a=3;
var b=4;
var c=3;
a=b //3不等于4 返回的是 假
a=c //3等于3 返回的是 真
=== 恒等于【逻辑判断】
//这个式子在判断等于的基础上还判断这个变量的类型，初学者可以不掌握，但是要明白不一样
!= 不等于【逻辑判断】
//如果不等于就返回 真 ，等于就返回 假
//和 == 完全相反的返回值
= = 大于 小于 大于等于 小于等于【逻辑判断】
//返回真值。
【逻辑判断】
且(and)
|| 或(or)
//条件判断
表达式1 表达式2
//表达式1和表达式2都是会返回真值的式子
//当且仅当两个表达式均为真的时候，这整个式子返回 真 ，否则返回 假
//全真才真，一假则假
表达式1 || 表达式2
//当且仅当两个表达式均为假的时候，这整个式子返回 假，否则返回 真
//全假才假，一真则真
! 非(not)【逻辑判断】
//非是一个单目，也就是一个参数的条件判断
！表达式
//返回表达式真值的反面。如表达式为真，则返回假；表达式假则返回真。
这些逻辑判断符用在可以用真值的地方如 if 条件句：
if( 真值表达式 ){
//如果为真运行这个大括号里面的
}else{
//如果为假运行这个大括号里面的
}
ps：在js中任何式子都可以做真值判断。0为假，其他任何字符，对象，变量等都为真。
你只是要的布局还是整个游戏的例子
代码量太多了，这里面贴不出来，我给你两个地址
围棋例子说明地址
例子源码地址
!DOCTYPE html
html
head
meta charset="UTF-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
meta http-equiv="X-UA-Compatible" content="ie=edge"
titleCSS3:画简易围棋：chess/title
style
html {
font-size: 50px;
}
.chessboard {
-webkit-box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),
-.1rem -.1rem .05rem rgba(0,0,0,.5) ;
box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),
-.1rem -.1rem .05rem rgba(0,0,0,.5) ;
height: calc(19rem + 0.04rem);
width: calc(19rem + 0.04rem);
background: #daca39;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.04rem, white), color-stop(0, transparent)), -webkit-gradient(linear, left top, right top, color-stop(0.04rem, white), color-stop(0, transparent));
background-image: -webkit-linear-gradient(white 0.04rem, transparent 0), -webkit-linear-gradient(left, white 0.04rem, transparent 0);
background-image: linear-gradient(white 0.04rem, transparent 0), linear-gradient(90deg, white 0.04rem, transparent 0);
-webkit-background-size: 1rem 1rem;
background-size: 1rem 1rem;
}
.chess {
position: relative;
height: 1rem;
width: 1rem;
border-radius: 0.5rem;
-webkit-box-shadow: .01rem .01rem .1rem rgba(0, 0, 0, .5), 0 0 .05rem rgba(240, 240, 240, .5), .05rem .05rem .01rem rgba(255, 255, 255, .15) inset, .1rem .1rem .1rem rgba(255, 255, 255, .05) inset, -.05rem -.05rem .25rem rgba(0, 0, 0, .15) inset, -.1rem -.1rem .35rem rgba(0, 0, 0, .05) inset;
box-shadow: .01rem .01rem .1rem rgba(0, 0, 0, .5), 0 0 .05rem rgba(240, 240, 240, .5), .05rem .05rem .01rem rgba(255, 255, 255, .15) inset, .1rem .1rem .1rem rgba(255, 255, 255, .05) inset, -.05rem -.05rem .25rem rgba(0, 0, 0, .15) inset, -.1rem -.1rem .35rem rgba(0, 0, 0, .05) inset;
}
.chess-white {
left:.5rem;
top:.5rem;
background: #EEE;
}
.chess-black {
background: #000;
left:10.5rem;
top:10.5rem;
}
/style
/head
body
div
div class="chess chess-white"/div
div class="chess chess-black"/div
/div
/body
/html
; 在软件开发行业，新技术正以快节奏的方式出现。程序员在选择编程语言时也应该顺应行业和时代的发展趋势，以保持他们在技术市场的领先优势。许多编程语言中哪一种是你最喜欢的?
最近，GitHub作为编程界的“脸谱”，列出了世界上十种最流行的编程语言。它们都在使用吗?让我们看看。
世界十大编程语言列表
10、C
C是最常用和最古老的编程语言之一，创建于20世纪70年代初。1978年，贝尔实验室正式发布了C语言，并出版了一本名为《The C Programming Language》的书，该书被用作对C语言的非正式标准解释。
9、Go
Go最初是由谷歌设计的，旨在为全球最繁忙的搜索引擎谷歌提供一个巨大的多处理器系统。如今，用围棋语言编译的程序已经可以与C9和C9的速度相匹配，并且更加安全，已经成为开发人员的热门选择。微软也开发了
8、C#
语言，发音为“C-夏普”。它是Java的竞争对手，主要用于开发商业软件和系统级应用程序。
7、CSS
层叠样式表(CSS)是一种广泛使用的网站设计和基于浏览器的编程语言。
6、C++
C是创建于1983年的C编程语言的一个分支。我们可以在桌面网络应用程序或服务器框架中找到它。
5、PHP
PHP被广泛使用。我们包括雅虎!脸谱网和其他使用PHP作为网站代码的大型网络公司。PHP是C语言、JAVA语言和PERL语言的混合。它可以将程序嵌入html中执行。
4、Ruby
Ruby因其易于阅读和书写而赢得了许多赞誉。Ruby可以使构建网络应用程序变得容易。这种语言的座右铭是“程序员最好的朋友”，这也被许多老程序员称为最易读的语言。
3、Java
Java最初是由太阳微系统公司在1991年创建的。Java吸收了C语言的优点，具有功能强大、使用方便的特点。甲骨文在2009年收购太阳后，爪哇已经成为一个强大的制造商。JAVA是安卓应用程序中最常见的语言。自2007年3月以来，世界各地的人们都可以修改JAVA源代码。
2、Python
Python可追溯到1989年，由荷兰吉多·范·罗苏姆发明。由于其可读性很强的代码，它很受程序员的欢迎，许多程序员认为这是最容易上手的语言。
1、JavaScript
尽管它们的名字与Java非常相似，但JavaScript实际上与JAVA没什么关系。它在客户端的脚本语言中被广泛使用，最初是在html网页上，但它也会减慢浏览器速度，有时会使用户暴露在安全漏洞中。
但是与此同时，我们可以发现几乎所有的网页现在都有了阴影。
除了全球十大编程语言之外，GitHub流行的编程语言列表还包括TypeScript、Shell、Swift、Scala和Objective-C.
以下是全球十大编程语言的完整投票表: 8、Ruby
7、CSS
6、C
5、C#
4、PHP
3、Python
2、Java
1、JavaScript
head
meta http-equiv="Content-Type" content="text/html;charset=utf-8" /
title禅棋传说/title
style type="text/css"
div { position: absolute; width: 23px; height: 23px; }
.B0 { background-image: url('B0.gif'); }
.B1 { background-image: url('B1.gif'); }
.B2 { background-image: url('B2.gif'); }
.B3 { background-image: url('B3.gif'); }
.B4 { background-image: url('B4.gif'); }
.B5 { background-image: url('B5.gif'); }
.B6 { background-image: url('B6.gif'); }
.B7 { background-image: url('B7.gif'); }
.B8 { background-image: url('B8.gif'); }
.BX { background-image: url('BX.gif'); }
.D0 { background-image: url('D0.gif'); }
.D1 { background-image: url('D1.gif'); }
.C0 { background-image: url('C0.gif'); }
.C1 { background-image: url('C1.gif'); }
/style
/head
body
script type="text/javascript"
//![CDATA[
Array.prototype.indexOf = function (item) //给数组扩展一个indexOf方法,用来检索是否为"已知元素"
{
for ( var i=0; ithis.length; i++)
if (this[i] == item)
return i;
return -1;
};
var Site = //定义一个棋位类
{
Create: function(x, y) //棋位类的构造函数
{
var me = document.createElement("div"); //建一个div对象，将其扩展并封装成棋位。
document.body.appendChild(me); //附加到DOM树，实现棋位的呈现。
me.x = x; //记录棋位的X坐标
me.y = y; //记录棋位的Y坐标
me.style.left = x * 23 + "px"; //设置棋位水平方向的绝对位置
me.style.top = y * 23 + "px"; //设置棋位垂直方向的绝对位置
// var s = ((x-9)%9?0:(x-9)/9)+1+(((y-9)%9?0:(y-9)/9)+1)*3; //计算背景式样,这个算法有冗余,简化为下面的算法.
var s = parseInt((x-9)/9)+1+(parseInt((y-9)/9)+1)*3; //计算背景式样
// me._backStyle = "B" + ((s==4(x/3)%2==1(y/3)%2==1) ? "X" : s);
me._backStyle = "B" + (((x/3)%2==1(y/3)%2==1) ? "X" : s);
me.Fill = this.Fill; //关联一个填充棋位的方法。
me.Tight = this.Tight; //关联计算紧气方法。
me.Kill = this.Kill; //关联计算死子方法。
me.onclick = this.Play; //绑定onclick事件到Play方法。
me.Fill(); //初始填充空子。
return me; //返回棋位对象，其实是一个封装了的div对象。
},
Fill: function(dot, going) //填充棋子的方法,going~~是否"当前步".
{
if ( dot == undefined )
this.className = this._backStyle //无子，就设置为背景式样。
else
this.className = (going ? "C" : "D") + dot; //有子,区别对待"当前步"
this.dot = dot; //保存棋子状态
},
Play: function() //行棋方法，由onclick事件触发
{
if ( this.dot == undefined ) //落子点必须为无子状态,否则不处理.
{
var deads = this.Kill(current^1); //计算可以杀死的子,current为当前颜色,则current^1为对方颜色
if (deads.length == 1 this == rob) return; //确认的打劫状态后,直接拒绝;如果此步落子可以提不止一子,则不是打劫
for(var i=0; ideads.length; i++)
deads[i].Fill(); //按照死子列清空,one by one
if(i==1)
rob = deads[0] //如果此步只提了一个子,记录被提位置为打劫位置.
else if (i0 || !this.Tight(current)) //这里有一个影响代码效率的判断,对于能产生提子的操做,不需要再判断是否"紧气禁入";此外,如果要引入"变穷为禁"的规则,这里需要改变算法
rob = null //清打劫位,这个条件是判断,如果能够提多子,或者不是禁止着手,则解除"打劫"状态
else return; //这里对应的返回,应该是只有无气禁入点的情况.
sound.play(); //落子有声！
var step = Tracks[Tracks.length-1];
if(step) step.site.Fill(step.site.dot); //更新此前一"步"的子的位图
this.Fill(current, true); //填入当前"步"的子
Tracks.push( new Step(this, deads) );
current ^= 1; //用1来异或，正好反转黑白棋子。
var disline = document.getElementById('list');
disline.value += ((current ? '黑：': '白：')+Tracks[Tracks.length-1].site.x+' '+Tracks[Tracks.length-1].site.y+'\n');
disline.scrollTop = disline.scrollHeight;
};
},
Tight: function (dot) //计算紧气的块,此时如果dot==undefined,则对应提子的遍历,this指向当前点.
{
var life = this.dot == undefined ? this : undefined; //life为"气"的定义;当前位无子则算一口气,对应落子的遍历,当前位置必然无子.
dot = dot == undefined ? this.dot : dot; //这个逻辑是对应提子的遍历
if (dot == undefined) return undefined;
var block = this.dot == undefined ? [] : [this]; //定义的"块",在提子的遍历中,发现子就放入块,再判断有多少"气".
var i = this.dot == undefined ? 0 : 1;
var site = this;
while (true)
{
for(var dx=-1;dx=1;dx++) for(var dy=-1;dy=1;dy++) if(!dx^!dy)
{
link = GetSite(site.x + dx, site.y + dy);
if (link) //判断目标位置的上下左右,有位则继续,"无位"对应棋盘以外的区域.
if (link.dot != undefined) //有子,则判断是否为同色,连"块"
{
if (link.dot == dot block.indexOf(link) 0 )
block.push(link); //此一段为"块"的遍历,条件是找四周的同色子,找到后判断是否为新"知道","新"则放入"块"
}
else if (!life) //无子,则更新"气"
life = link
else if (life != link)
return undefined; //在提子的遍历中,如果发现有两"气"了,则无须再算
};
if ( i = block.length) break; //"块"的遍历结束条件为,列表的最后一个对象没有产生新的相邻子.
site = block[i];
i ++;
};
return block; //返回只有一口气的块,在提子的遍历中,这对应了可能被提掉的子列,再去判断是否为"打劫"
},
Kill: function(dot) //计算杀死的子,目前this指向落子点,dot指向需要判断的死子颜色.
{
var deads = []; //定义死子列
for(var dx=-1;dx=1;dx++) for(var dy=-1;dy=1;dy++) if(!dx^!dy) //异或,有且只有一个为真,可对应到相邻子.
{
var site = GetSite(this.x + dx, this.y + dy);
if (site (site.dot == dot))
{
var block = site.Tight(); //分别对上下左右进行遍历,查找被紧气的"块",然后合并成为"死子列"
if (block) deads = deads.concat(block); //concat 合并操作,此操作并未识别"同项",仅以围棋规则判断,对"打劫没有影响".
//如果需要准确的提子数目统计,这里的算法需要更新.
};
};
return deads; //返回可以提子的死子块
}
}; //棋位类 Site
var Board = new Array(19); //全局的Board数组，表示棋盘。
var Tracks = []; //行棋线索数组，数组元素是Step对象。
var current = 0; //当前要下的子，0表示黑子，1表示白子，交替。
var rob = null; //如果有打劫时，记录打劫位置。
for(var x = 0 ; x 19; x++)
{
Board[x] = new Array(19);
for(var y = 0; y 19; y++)
Board[x][y] = Site.Create(x, y); //按位置创建棋位对象。
};
if (navigator.userAgent.indexOf(' MSIE ') -1) //为IE浏览器构造声音对象
{
var sound = document.body.appendChild(document.createElement("bgsound"));
sound.play = function(){this.src = "play.wav"};
}
else //为Firefox等其他浏览器构造声音对象
{
var sound = document.body.appendChild(document.createElement("span"));
sound.play = function(){this.innerHTML = "bgsound src='play.wav'"};
};
document.body.oncontextmenu = function() //右键驱动悔棋事件
{
var step = Tracks.pop();
if (step)
{
step.site.Fill();
for (var i=0; istep.deads.length; i++)
step.deads[i].Fill(current);
step = Tracks[Tracks.length-1];
if (step) step.site.Fill(current, true)
current ^= 1; //反转黑白棋子。
};
return false; //不弹出菜单。
};
function GetSite(x, y) //从棋盘取棋位的函数，越界不抛出异常。
{
if (x=0 x19 y=0 y19)
return Board[x][y];
};
function Step(site, deads) //棋步类，记录每一步棋的状态
{
this.site = site; //记录棋步的位置
this.deads = deads; //记录被当前棋步杀死的棋子集合
};
function PrintWay() //行棋路线
{
var str='', coler='';
for (var i=0;i Tracks.length;i++)
{
step = Tracks[i];
coler = (i%2) ? "白" : "黑";
str=str+"第"+(i+1)+"步"+coler+"方 X"+step.site.x+" Y"+step.site.y+" \n";
}
alert(str);
}
document.body.ondblclick = PrintWay;
document.onkeypress = function(event)
{
var k = (window.event ? window.event.keyCode : event.which) - 49; //按'1'可以进入自动摆棋操作,'1'=0x31=49
if(k0 || k1) return;
for(var x=0; x19; x++) for(var y=0; y19; y++) Board[x][y].Fill();
Tracks.length = 0;
current = 0;
with(goes[k]) for(var i=0; ilength;i+=3)
Board[charCodeAt(i+1)-65][charCodeAt(i)-65].Fill(charCodeAt(i+2)-48);
};
/body
/html
