黑白反斗棋实现思路.docx

黑白反斗棋实现思路.docx

《黑白反斗棋实现思路.docx》由会员分享，可在线阅读，更多相关《黑白反斗棋实现思路.docx（8页珍藏版）》请在冰豆网上搜索。

黑白反斗棋实现思路

黑白反斗棋说明

运行效果：

游戏界面是由一个5*5的表格组成，当用户点击其中的一个单元格时，被点击的单元格和相邻的上下左右（5个）单元格由本身的颜色换成相反的颜色（如果是黑色则改变成白色，相反白色改变成黑色），游戏最终需要用户把25个单元格全部换成另一种相同的颜色。

涉及技术：

1：

）HTML（超文本标记语言）

超文本就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素

标记是指HTML语言的语法是由若干个标记组成

HTML主要的用途是抒写网页，而网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：

脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。

因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

1.1HTML常用标记

（HTML的标记都是成对出现，由开始结束）

HTML文档的开始和结束标签（HTML的标签都是包含在这个标签的内部）

HTML头部标签，定义当前HTML页面的一些基本信息（例如：

网页的标题等）

标题标签定义当前HTML页面的标题

主体标签定义当前HTML文档的内容

行标签定义表格的一行

列标签定义表格的一列

2：

）JavaScript

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。

同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

它最初由网景公司（Netscape）的BrendanEich设计，是一种动态、弱类型、基于原型的语言，内置支持类

JavaScript由若干个函数组成，定义JavaScript函数，需要在HTML页面的标签的内部使用定义，写在script标签内部的都是JavaScript脚本，由浏览器解析执行

2.1JavaScript常用对象和函数

document对象:

每个载入浏览器的HTML文档都会成为Document对象（一个页面会转换成一个document对象）

document.getElementById（HTML元素的Id），通过一个HTML元素的Id能得到这个元素的引用

String对象：

字符串对象，由多个字符组成的多个字符

String对象的split（“分割的字符”）:

可以通过分割的字符把当前的字符串分割成多个字符串

parseInt（“字符串类型的数字”）：

可以把字符串类型的数字转换成数字类型数据

游戏源码：

JavaScript函数部分：

functiontdClickFunction（tdObj）{

vartdId=tdObj.id;

vartdIdArray=tdId.split（"-"）;

varx=parseInt（tdIdArray[0]）;

vary=parseInt（tdIdArray[1]）;

changeBgColor（tdId）;

if（x-1>=0）{

changeBgColor（（x-1）+"-"+y）;

}

if（x+1<=4）{

changeBgColor（（x+1）+"-"+y）;

}

if（y-1>=0）{

changeBgColor（x+"-"+（y-1））;

}

if（y+1<=4）{

changeBgColor（x+"-"+（y+1））;

}

}

functionchangeBgColor（tdId）{

vartdObj=document.getElementById（tdId）;

if（tdObj.bgColor=="#000000"）{

tdObj.bgColor="#FFFFFF";

}else{

tdObj.bgColor="#000000";

}

}

调用JavaScript函数部分：

参考实现步骤：

1.创建表格

在新建的HTML页面中，增加一个五行五列的表格，表格的宽度和高度设置为100。

参考代码：

。

。

。

。

。

。

。

。

。

。

。

。

其中代表一行，代表一个单元格，5个单元格组成了一行中的五列

2.设置单元格背景颜色

按照需求，为了实现黑白棋子切换的效果，需要设置每一个单元格的背景颜色，首先将所有的单元格都设置为黑色，参考代码如下，红色部分是实现背景颜色设置的代码：

按此设置所有单元格的背景颜色。

其中“#000000”为黑色，“#FFFFFF”为白色

3.添加javaScript脚本

到现在为止，棋盘的样子已经实现，需要进一步实现每一个单元格点击时颜色的变化操作，为了实现这种动态的效果，需要使用到前面提到的javaScript技术，首先在页面的标签之间，增加对应的javaScript标签，参考代码如下：

4.实现点击操作

为了实现点击的操作，需要让每一个单元格知道自己被点击，且需要知道我们用鼠标点击了哪个单元格，所以这里需要使用到两个概念，函数和事件，简单理解，函数就是所需要做的事情的实现过程，事件就是当什么时候触发要执行的函数，综合本例，我们要做的事情如下：

1.确定被点击的单元格是哪个？

2.单元格确定后，需要知道当前单元格的颜色，如果是黑色，则改变为白色，如果是白色，则设置为黑色。

什么时候被执行？

1.当单元格被点击的时候执行

所以在这里，我们需要做三件事情：

1.编写函数，确定被点击的单元格。

参考代码如下：

functiontdClickFunction（tdObj）{

vartdId=tdObj.id;

changeBgColor（tdId）;

}

为了让每一个单元格能够相互区分出来，我们需要给每一个单元格一个id号，就如同身份证号一样，所以需要在td中进行如下设置，如：

但是通过这样的设置，我们可以知道哪个单元格被点击了，却无法知道它上下左右的四个单元格，所以我们可以通过如下的小技巧实现，即将所有的单元格按行和列进行编号，首先从第0行第0列开始，行和列之间用“-”进行分隔，把编好的号作为td的id属性设置好，参考代码如下：

单元格编号完成后，当tdClickFunction函数执行时，我们就可以获得到当前当前单元格的编号（即id值，如1-2,代表了第一行第2个单元格）

2.编写函数，改变单元格的颜色，并且该函数在单元格确定以后调用执行。

functionchangeBgColor（tdId）{

vartdObj=document.getElementById（tdId）;

if（tdObj.bgColor=="#000000"）{

tdObj.bgColor="#FFFFFF";

}else{

tdObj.bgColor="#000000";

}

}

3.为每一个单元格添加一个事件，告诉单元格，当它被点击的时候，应该执行已经编写好的函数。

其中this代表的是当前单元格。

onclick是单元格被点击事件，即当单元格被点击时，执行tdClickFunction函数，并将当前单元格this传给函数，让函数知道是哪个单元格被点击了。

5.控制上下左右单元格变化

至此，我们已经能够实现当前单元格点击后变色的目的，但是又如何实现其上下左右的颜色同时改变呢？

为了实现这个目的，我们之前已经做好了准备，已经将所有的单元格按照一定的行和列的规律进行了id编号，即0-0、0-1、1-0、1-1等编号，我们可以通过行和列编号的加减操作轻松的找打上下左右，参考代码如下：

functiontdClickFunction（tdObj）{

vartdId=tdObj.id;

vartdIdArray=tdId.split（"-"）;

varx=parseInt（tdIdArray[0]）;

vary=parseInt（tdIdArray[1]）;

changeBgColor（tdId）;

if（x-1>=0）{

changeBgColor（（x-1）+"-"+y）;

}

if（x+1<=4）{

changeBgColor（（x+1）+"-"+y）;

}

if（y-1>=0）{

changeBgColor（x+"-"+（y-1））;

}

if（y+1<=4）{

changeBgColor（x+"-"+（y+1））;

}

}

其中由于我们的id编号是通过x-y的方式组合成的，x代表了行的顺序，y代表了列的顺序，我们获取到了id是“0-1”的这种形式，为了分别取出x和y，我们需要用到tdId.split（"-"）;通过split（分割）的方式实现。

上下作用的位置通过x、y+-1的操作实现。

6.至此，我们通过在HTML技术与javaScript技术的结合，成功实现了经典游戏“黑白反斗棋”的实现，大家可以去尝试着把所有的黑色都点击成白色吧。

7.游戏攻略：

按照如下的顺序进行点击，即可以快速通过该游戏。

7.1第一行，点击第1、2两个单元格

7.2第二行，点击第1、2、4、5四个单元格

7.3第三行，点击第3、4、5三个单元格

7.4第四行，点击第2、3、4三个单元格

7.5第五行，点击第2、3、5三个单元格