用IE网页学游戏-井字棋

IE网页学游戏-井字棋

 

井字棋实现交互的简单小游戏，学习使用表格，理解javascript函数。

1.构造棋盘

用table元素的行列构造三行三列的表格。设置好120像素的井字棋背景，三个小图表示方格内背景、黑棋、白棋。

设置鼠标事件的相应函数，来生成点击的行列号。在相应方格内根据点击顺序NO，分黑白显示小图标。

表格和鼠标和相应事件

 

2.为人机交互准备

用输入元素的文本输入0或1表示机器计选择还是人先选择。按钮设置游戏开始，开始后，按钮失效，对应函数begin()中代码：

document.getElementById('but1').disabled="disabled"

设置user记录人操作还是机器，1表示人，0表示机器，交替的实现采用加1取2的余数。先实现测试人单独点击所有方格。条件no<=9&&user==1表示人的合法性判断。

输入框内为1表示用户先选择位置，0表示机器先选择

3.设计棋盘数组

用数组定义棋盘数组jing，初始为0，表示未有棋子。随着位置的选择填入NO到相应的数组内：i=(y-1)*3+x-1

输入框内为1表示用户先选择位置，0表示机器先选择

4.构造机器选择函数

要让机器选择，就是看哪一个位置未放棋子，转换为行列，落子，与人选择相同，需要重构上面的函数。把在棋盘上落子、记录功能独立出来，构造函数recxy(x,y)，人和机器确定行列调用之。

交互的实现，用user=(user+1)%2来改变交替，在人操作后做判断是否调用机器选择函数：

if(user==0)  computer()

而机器执行后，人用鼠标点击会激发相关事件。在开始函数中，如果是设置机器先选择，要调用函数computer()。

 

computer()比较复杂，开始可只检测数组中为0的位置，进行非智能交互。

输入框内为1表示用户先选择位置，0表示机器先选择

5.机器选择函数实现智能

要让机器选择智能，如先下，选择中心位置；在下的过程中先检查自己是否有赢的位置，有则占下；其次检测对手是否下一步要赢，占相应位置；没有上面的情况选择四角及边的中心。

构造函数：判断下一步有没有自己能赢的位置，或对手下一步能赢的位置，行、列、对角线上都是偶数或奇数即为赢。

在机器选择函数中，为判断四角及边中心，设置位置数组的顺序数组：var p=new Array(0,2,6,8,1,3,5,7)

输入框内为1表示用户先选择位置，0表示机器先选择