一、介绍
游戏规则：
有两个大方块，由n*n的小方格组成，初始都为黑色，点击方块会在黑白间切换颜色，左边的方块用于自定义题目，右边方块则需要点击后获得与左边相同的图形，另外右边的方块每次点击后会顺时针旋转90度，你需要在脑海中将旋转后的方块复原，否则或许两图相同，但右图经过旋转，所以不过关。每次过关后方格数量会增加（当然题目是自定义的，所以难度还是自己决定，也可以使用随机数的方式获得一个初始题目）
源码：
页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>the same</title>
<!--引入样式表和js文件-->
<link rel="stylesheet" type="text/css" href="css/game.css"/>
<script type="text/javascript" src="js/game.js" ></script>
</head>
<body>
<!--左边方块-->
<div id="ep_div">
<!--方块用js向table中添加-->
<table border="1 solid black" cellspacing="2" id="ep">
</table>
</div>
<!--右边方块-->
<div id="td_div">
<table border="1 solid black" cellspacing="2" id="td">
</table>
</div>
<!--一些提示信息，不重要-->
<div class="tip" style="clear: both;">
<br />
<p>位置为4时图案位置与例题(左图为例题)相同，1,2,3,4分别为顺时针
旋转90,180,270,360度，两图位置相同则过关
（注意旋转后需在脑海复原位置，否则位置对应不同图案相同不过关）
</p>
位置：<span id="rot">0</span>
</div>
<br />
<!--重新开始并不会初始化方格数和旋转角度-->
<button onclick="newGame()">重新开始</button>
<!--重置会初始化方格数和旋转角度-->
<button onclick="reset()">重置</button>
</body>
</html>样式表：
/*背景颜色*/
body{
background-color: blanchedalmond;
}
/*大方块左浮动*/
#ep_div,#td_div{
float: left;
margin-left: 30px;
}
/*旋转角度设置（这里我用的chrom浏览器所以用了-webkit-,根据自己用的浏览器自行更改）*/
.rotate90{
-webkit-transform: rotate(90deg);
}
.rotate180{
-webkit-transform: rotate(180deg);
}
.rotate270{
-webkit-transform: rotate(270deg);
} js文件（重点）：
初始化信息：
//方格行列数
var size = 5;
//方格值(1或0)，通过值判断是否过关
var ep_arr,td_arr;
//旋转值
var td_rot = 0;
//页面加载完后初始化方格
onload = function(){
//下面介绍init函数
//通过init函数创建小方格，并初始化数组
ep_arr = init("ep");
td_arr = init("td");
}init函数（用于初始化方格及方格对应值）：
function init(id){
//通过id获得table
var ep = document.getElementById(id);
//行、列的变量
var tr,td;
//创建table对应的二维数组
var arr = new Array;
//外层循环创建tr标签并添加到table上
for(var i=0;i<size;i++){
arr[i] = new Array;
tr = document.createElement("tr");
ep.appendChild(tr);
//内层循环创建td标签添加到tr上
for(var j=0;j<size;j++){
//为小方格对应数值赋初值
arr[i][j] = 0;
//创建td的函数，下面介绍
var td = createTd(id,i,j);
tr.appendChild(td);
}
}
//函数返回数组用于给全局变量赋值
return arr;
}创建小方格函数（创建一个方格并绑定单击事件）：
function createTd(id,i,j){
//创建方格并设置宽高
var td = document.createElement("td");
td.width = 20;
td.height = 20;
//id值形式为id_i_j(即table的id加上后缀)
td.id = id+"_"+i+"_"+j;
td.bgColor = "black";
//为方格绑定点击事件（点击事件下面介绍）
td.addEventListener("click",click_ep);
//将创建的方格返回
return td;
}方格点击事件：
//方格点击变色
function click_ep(e){
var td = e.target;
//方格点击后黑白交替，函数下文介绍
changeColor(td);
//获得方格所在的div,命名规则为id_div(即table的id加上div后缀)
var div = document.getElementById(td.id.substr(0,2)+"_div");
//如果点击的是右边的大方块，大方块会旋转
if(td.id.indexOf("td")>-1){
//等待100ms旋转方块
setTimeout(function(){
//通过修改class属性完成旋转
div.className = "rotate"+(++td_rot)*90;
//提示当前旋转了多少度（1，2，3,4分别代表90,180,270,360）
document.getElementById("rot").innerHTML = td_rot;
if(td_rot>3) td_rot = 0;
//旋转后检查是否过关了（检查函数下文介绍）
check();
},100);
}
}颜色黑白交替：
function changeColor(td){
//通过点击的方格的id截取i，j值（方格id命名规则tableID_i_j）
var i = td.id.substr(3,1);
var j = td.id.substr(5,1);
//通过id判断方格属于ep还是td（ep为自定义题目方格，td为答题区方格）
if(td.id.indexOf("ep")>-1){
//通过方格对应数组中的值改变方格颜色（为0就改为1，并改为白色）
if(ep_arr[i][j]==0){
td.bgColor = "white";
ep_arr[i][j] = 1;
}else{
td.bgColor = "black";
ep_arr[i][j] = 0;
}
}else{
if(td_arr[i][j]==0){
td.bgColor = "white";
td_arr[i][j] = 1;
}else{
td.bgColor = "black";
td_arr[i][j] = 0;
}
}
}检查游戏是否结束：
function check(){
//判断ep与td区数组值是否相同
for(var i=0;i<size;i++){
for(var j=0;j<size;j++){
if(ep_arr[i][j]!=td_arr[i][j]){
return;
}
}
}
//两个数组值相同弹出提示框
alert("succeed");
//过关后方格数量增加
size++;
//方格上限设置（太多了屏幕容不下）
if(size>10)size=5;
//开始下一局游戏（下文介绍该函数）
newGame();
}开始新游戏：
//重新开始游戏（不初始化为第一关）
function newGame(){
//将table清空
document.getElementById("ep").innerHTML = "";
document.getElementById("td").innerHTML = "";
//初始化数组并生成td
ep_arr = init("ep");
td_arr = init("td");
}重置游戏（重置游戏到第一关）：
function reset(){
//重置到第一关
size = 5;
//开始新游戏
newGame();
//位置信息重置
document.getElementById("rot").innerHTML = 0;
td_rot = 0;
//将td的table的class属性置为空（即取消旋转，使方格回到初始位置）
document.getElementById("td_div").className = "";
}差不多就是这样了，有兴趣的朋友可以粘贴代码试试哦，游戏还有许多扩展方式，大家可以自由探索。