初见 我是在这里看到这个游戏的
× 请看这里 http://www.webhek.com/misc/inverter.
看到这个小游戏就觉得挺有意思的，于是想要去自己实现它。
开始 下面的是这个小游戏，大家玩玩看
×Close
Oh!蓝色拼图
当前级别：
重置本局 重置级别 玩法说明
以下是代码 写完后自己看着都觉得恶心...很想把它放到一个对象里面，但是太懒了，能用就行(つд⊂)
.gamebox {
background-color: #4D4D4D;
border-radius: 4px;
height: 200px;
margin: 0 auto;
margin-bottom: 50px;
position: relative;
width: 60%;
max-width:500px;
}
.gamecard {
background-color: rgb(230, 171, 94);
border-radius: 4px;
position: absolute;
}
var gameBox;
$(function() {
gameBox = $("#gameBox");
loadLevel(1); $(window).resize(function() {
setBoxPosition();
});
}); var gameOptions = {
level: 1,
border: 15,
array: []
}; function showHowToPlay() {
bootbox.dialog({
title: "玩法说明",
message: "
如何才算赢：使拼板全部变成蓝色。
玩法：每个方块一面橙色，一面蓝色。点击一个方块，这个方块的颜色会翻转，并且，与它邻接的方块的颜色也会翻转。
",
buttons: {
btn: {
label: "了解",
className: "btn btn-success"
}
}
});
} function reloadLevel() {
bootbox.dialog({
title: "确定要这么做么？",
message: "你将要从Lv1重新开始游戏",
buttons: {
cancel: {
label: "算了",
className: "btn btn-success"
},
btn: {
label: "我确定",
className: "btn btn-danger",
callback: function() {
loadLevel(1);
}
}
}
});
} function reloadGame() {
bootbox.dialog({
title: "确定要这么做么？",
message: "你将重新开始该等级的游戏",
buttons: {
cancel: {
label: "算了",
className: "btn btn-success"
},
btn: {
label: "我确定",
className: "btn btn-danger",
callback: function() {
loadLevel(gameOptions.level);
}
}
}
});
} function fillCard() {
gameBox.empty();
gameOptions.array = [];
for (var x = 0; x < gameOptions.level; x++) {
var row = new Array();
for (var y = 0; y < gameOptions.level; y++) {
var card = "
";
gameBox.append(card); //添加元素
row.push(0);
}
gameOptions.array.push(row); //添加二维数组，定义元素状态，默认全为0
}
} function setBoxPosition() {
var boxwidth = gameBox.width();
gameBox.height(boxwidth); //宽高相等
var border = gameOptions.border; //间隔宽度
var len = (boxwidth - (gameOptions.level + 1) * border) / gameOptions.level;
for (var x = 0; x < gameOptions.level; x++) {
for (var y = 0; y < gameOptions.level; y++) {
var ele = gameBox.children("div[data-x=" + x + "][data-y=" + y + "]");
var eleX = x * len + (x + 1) * border;
var eleY = y * len + (y + 1) * border;
ele.css({ "left": eleX + "px", "top": eleY + "px" });
ele.width(len).height(len);
}
}
} function loadLevel(level) {
gameOptions.level = level;
fillCard();
setBoxPosition();
$("#tip-level").html(level);
} function clickCard(x, y) {
changeState(x, y); changeState(x - 1, y);
changeState(x + 1, y);
changeState(x, y + 1);
changeState(x, y - 1); checkWin();
} function changeState(x, y) {
var lel = gameOptions.level;
if (x < 0 || x >= lel || y < 0 || y > lel) {
return;
} var num = getNum(x, y);
num = num == 1 ? 0 : 1;
setNum(x, y, num); //当前块状态改变 var ele = gameBox.children("div[data-x=" + x + "][data-y=" + y + "]");
ele.css("background-color", num == 1 ? "rgb(92, 144, 255)" : "rgb(230, 171, 94)"); //改变颜色
} function setNum(x, y, num) {
gameOptions.array[x][y] = num;
} function getNum(x, y) {
return gameOptions.array[x][y];
} function checkWin() {
var win = true;
for (var x = 0; x < gameOptions.level; x++) {
for (var y = 0; y < gameOptions.level; y++) {
var num = getNum(x, y);
if (num != 1) {
win = false;
break;
}
}
if (!win) break;
}
if (win) {
var lev = gameOptions.level + 1;
makeDialog("完成拼图！", "进入下一关，Lv" + lev, function() {
loadLevel(lev);
}, 10);
}
}
Σ( ﾟдﾟ) 上面的代码一直调不好
我不知道怎么回事，，，大家将就看吧，不知道为什么代码被分成几节了...
实在不行看源码，哈哈
.