一、介绍
点击随机生成左图会随机出现白点，同时两图的方格点击都会使方格变色，右图每次点击会顺时针旋转90度，点击左图旋转按钮，左图会开启旋转动画，相比上一篇，这次游戏添加了动画效果，随机生成题目等功能，另外位置提示信息也取消了，改为方块右下角添加了圆角。
可复制粘贴运行试试，不需要图片资源哦（玩游戏注意了！！！过关后位置信息不重置！！！）。
二、游戏规则：
两图形状相同则过关（注意右下角圆角的位置要对应），不要以为很简单哦，如果调整左图动画旋转的速度会很头疼的！！！（另外还有一个版本就是右图也不断旋转，css中有相应的旋转动画样式，但是头晕所以换成点一下转一次）
二、源码：
1、页面部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>旋转方块</title>
<!--注意jq使用1.7以上的版本，源码中一些函数需要1.7以上的版本才能调用-->
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/logic.js" ></script>
</head>
<body>
<div id="box">
<div id="left_div">
<table id="left_table"></table>
</div>
<div id="right_div">
<table id="right_table"></table>
</div><br />
<div style="border: none;">
<button id="restart_btn">重新开始</button>
<button id="reset_btn">重置</button>
<button id="rand_btn">随机生成</button>
<button id="l_btn">左图旋转/停止</button>
</div>
</div>
</body>
</html>2、样式表：
tip：我用chrom所以没有加入其它浏览器兼容，读者自行添加。
body{
background-color: blanchedalmond;
}
#box{
width: 90%;
text-align: center;
}
#box >div{
display: inline-block;
border: solid black 1px;
border-bottom-right-radius: 10%;
margin: 30px;
}
/*div顺时针旋转*/
.clockwise{
-webkit-animation: left_rotate 10s linear infinite normal;
}
@-webkit-keyframes left_rotate{
from{-webkit-transform: rotate(0deg);}
to{-webkit-transform: rotate(360deg);}
}
/*div逆时针旋转*/
.anticlockwise{
-webkit-animation: right_rotate 10s linear infinite normal;
}
@-webkit-keyframes right_rotate{
from{-webkit-transform: rotate(0deg);}
to{-webkit-transform: rotate(-360deg);}
}
.rotate90{
-webkit-animation: rotate90 1s linear 1 normal forwards;
}
@-webkit-keyframes rotate90{
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(90deg);}
}
.rotate180{
-webkit-animation: rotate180 1s linear 1 normal forwards;
}
@-webkit-keyframes rotate180{
0%{-webkit-transform: rotate(90deg);}
100%{-webkit-transform: rotate(180deg);}
}
.rotate270{
-webkit-animation: rotate270 1s linear 1 normal forwards;
}
@-webkit-keyframes rotate270{
0%{-webkit-transform: rotate(180deg);}
100%{-webkit-transform: rotate(270deg);}
}
.rotate360{
-webkit-animation: rotate360 1s linear 1 normal forwards;
}
@-webkit-keyframes rotate360{
0%{-webkit-transform: rotate(270deg);}
100%{-webkit-transform: rotate(360deg);}
} 3.js：
tip:一定注意使用jquery1.7以上的版本（里面的on函数需要1.7以上，楼主做后端的傻傻研究了很久）
//方块尺寸
var size = 5;
//存储小方格
var left_arr,right_arr;
//初始旋转度数
var deg = 90;
//页面加载后调用
$(function(){
newGame();
btn_bind();
});
//开始新游戏
function newGame(){
//清空table
$("#left_table").empty();
$("#right_table").empty();
//初始化方格，并为数组赋值
left_arr = init("left_table",clickLeft);
right_arr = init("right_table",clickRight);
//左边的方块随机生成题目
left_random();
}
//初始化方块（需要一个table的id和方格的点击事件）
function init(id,handler){
//创建数组保存代表方格的对象
var arr = new Array;
for(var i=0;i<size;i++){
arr[i] = new Array;
//表格添加行并添加id属性（id用于添加方格时取出行）
$("<tr>").appendTo($("#"+id)).attr("id",id+"_"+i);
for(var j=0;j<size;j++){
//创建方格对象（这里自定义了构造函数，在最下面）
var tdObj = new TD(id,i,j);
arr[i][j] = tdObj;
//添加方格（添加了属性和点击事件）
$("<td>").appendTo($("#"+id+"_"+i))
.attr({
id:tdObj.id,
bgColor:"black",
width:20,
height:20
}).on("click",tdObj,handler);//这里的tdObj会被添加到事件对象的data中
}
}
//返回数组
return arr;
}
//左方格点击事件（仅变色）
function clickLeft(e){
//在事件绑定时传入的tdObj可以通过e.data取得，改变颜色的函数则是tdObj的函数，定义在构造函数中
e.data.changeBgColor();
}
//右方格点击事件（变色、旋转、检查是否过关）
function clickRight(e){
e.data.changeBgColor();
//移除所有类信息再添加动画，防止动画叠加
$("#right_div").removeClass();
//类名是拼接出来的
$("#right_div").addClass("rotate"+deg);
//旋转后自动加90度，超过360初始化为90，作为下次要旋转的度数
deg += 90;
if(deg>360)deg=90;
//动画设置了需要1s，所以1s延迟后检查是否过关
setTimeout(function(){
check();
},1000);
}
//检查游戏是否结束
function check(){
for(var i=0;i<size;i++){
for(var j=0;j<size;j++) {
//数组中存的方格对象带有获取值的函数
var lval = left_arr[i][j].getVal();
var rval = right_arr[i][j].getVal();
//存在不相同的值代表不过关，直接return
if(lval!==rval)return;
}
}
//过关后方格尺寸+1，开启新游戏
alert("next");
size++;
newGame();
}
//按钮事件绑定
function btn_bind(){
//左图旋转暂停
$("#l_btn").on("click",function(){
$("#left_div").toggleClass("anticlockwise");
});
//出题按钮
$("#rand_btn").on("click",function(){
left_random();
});
//重新开始
$("#restart_btn").on("click",function(){
newGame();
});
//重置
$("#reset_btn").on("click",function(){
size = 5;
newGame();
});
}
//左图随机出题的函数
function left_random(){
//先把左边方格全变黑
$("#left_table td").attr("bgColor","black");
for(var i=0;i<size;i++){
for(var j=0;j<size;j++){
//变黑了所有方格值初始化为0
left_arr[i][j].setVal(0);
if(Math.random()*10>8){
//随机数*10大于8改变颜色（改变颜色的函数中带有值的变化）
left_arr[i][j].changeBgColor();
}
}
}
}
//方格对象构造函数
function TD(pid,x,y){
this._val = 0;
this.pid = pid;
this.x = x;
this.y = y;
this.id = pid+"_"+x+"_"+y;
this.getVal = function(){
return this._val;
}
this.setVal = function(val){
this._val = val;
}
this.changeBgColor = function(){
if(this.getVal()===0){
$("#"+this.id).attr("bgColor","white");
}else{
$("#"+this.id).attr("bgColor","black");
}
//改变颜色后值改变
this.setVal(1-this.getVal());
}
}后记：
研究过程还有很多小插曲，比如： jq 的 appendTo() 方法添加 tr 时会在外层添加一个 tbody 标签，导致我在生成 td 时出了很多问题（因为一开始我用伪类选择器做的，tr 没有 id）。所以bug总是出其不意，大家共勉 :__: