初见 我是在这里看到这个游戏的
× 请看这里 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); } }
Σ( ?д?) 上面的代码一直调不好
我不知道怎么回事,,,大家将就看吧,不知道为什么代码被分成几节了...
实在不行看源码,哈哈
.
时间: 2024-10-13 12:35:09