初见 我是在这里看到这个游戏的

× 请看这里 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);
}
}

Σ( ゚д゚) 上面的代码一直调不好

我不知道怎么回事,,,大家将就看吧,不知道为什么代码被分成几节了...

实在不行看源码,哈哈

.

JS小游戏-蓝色拼图的更多相关文章

  1. 一个js小游戏----总结

    花了大概一天左右的功夫实现了一个js小游戏的基本功能,类似于“雷电”那样的小游戏,实现了随即怪物发生器,碰撞检测,运动等等都实现了,下一个功能是子弹轨迹,还有其他一些扩展功能,没有用库,也没有用web ...

  2. JS小游戏:贪吃蛇(附源码)

    javascript小游戏:贪吃蛇 此小游戏采用的是面向对象的思想,将蛇,食物,和游戏引擎分为3个对象来写的. 为方便下载,我把js写在了html中, 源码中暂时没有注释,等有空我在添加点注释吧. 游 ...

  3. js小游戏:五子棋

    使用纯js的小游戏,五子棋 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  4. JS小游戏寻找房祖名

    提示:1:先把两个图片放到重命名并放到相应的路径内. 2:本小游戏只为闲事练手,如有小bug自行解决,解决不了的可以留言,我看到后解决. 代码如下: <!DOCTYPE html>< ...

  5. Vue.js小游戏:测试CF打狙速度

    此项目只测试反应速度,即手点击鼠标的反应速度 html代码 <div id="top">请等待图片变颜色,颜色便的那一刻即可点击测手速</div> < ...

  6. js小游戏---智力游戏

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  7. u3d_小游戏_拼图_1_生成碎片(非随机)

    http://blog.csdn.net/cube454517408/article/details/7907247  首先是参考此文: main.cs作用:1.大图的拆分 2.判断是否成功 3.对碎 ...

  8. JS小游戏

    捕鱼达人 飞机大战游戏 详解javaScript的深拷贝 http://www.cnblogs.com/penghuwan/p/7359026.html

  9. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

随机推荐

  1. Postman - HTTP接口测试工具

    Postman 是一个 Chrome 的 插件,它主要是用来模拟各种HTTP请求的(如:get/post/delete/put..等等),下面介绍下Postman的安装和使用方法: 一.安装Postm ...

  2. C#生成PDF总结

    (一)C#生成PDF总结 (1)iTextSharp控件对iTextSharp研究还可以表格.文字.各种GDI对象,图片,水印,文字旋转(2)aspose的控件(3)PDF Library这个类库(只 ...

  3. 424 - Integer Inquiry

     Integer Inquiry  One of the first users of BIT's new supercomputer was Chip Diller. He extended his ...

  4. django 自定义表单

    创建一个1.html的东西 <html> <body> <form method='post'> {{form.as_p}} <input type=&quo ...

  5. NOIP 2005 等价表达式 (TYVJ P1060)

    做题记录: 2016-08-10 23:35:09 背景 NOIP2005 提高组 第四道 描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代 ...

  6. [深入浅出WP8.1(Runtime)]生成图片和存储生成的图片文件

    7.2.3 使用RenderTargetBitmap类生成图片 RenderTargetBitmap类可以将可视化对象转换为位图,也就是说它可以将任意的UIElement以位图的形式呈现.那么我们在实 ...

  7. git两种合并方法 比较merge和rebase

    18:01 2015/11/18git两种合并方法 比较merge和rebase其实很简单,就是合并后每个commit提交的id记录的顺序而已注意:重要的是如果公司用了grrit,grrit不允许用m ...

  8. 【BZOJ】3757: 苹果树

    http://www.lydsy.com/JudgeOnline/problem.php?id=3757 题意:n个节点的树,每个点有一种颜色.现有m种询问,每次询问x y a b表示x到y的路径上颜 ...

  9. InterBase数据库迁移到MySQL(说明)

    刚刚到公司1周便接到了第一个需求,进过了几天的沟通明白了是从gbk文件中恢复InterBase数据库,然后再将恢复到数据库中的数据导出到远程的MySQL数据库中,拿到需求先分步去看问题了,问题大致可分 ...

  10. Oracle connect by 树查询之二

    先用scott用户下的emp表做实验.emp表有个字段,一个是empno(员工编号),另一个是mgr(上级经理编号)下面是表中所有数据 1 select * from emp start with e ...