最强大脑上小四鄙视星际迷航的项目，认为就是放大版的找茬。个人感觉项目难度还是非常高的。闲来无事，用jquery写了一个类似的小游戏。
使用JQuery + Bootstrap 的框架来搭建html，结构如下：
game
--css
--js
--fonts
--game.html
新建一个文件夹game。
从 http://d.bootcss.com/bootstrap-3.3.5-dist.zip 下载bootstrap，解压后把所有的文件夹（css, fonts, js）都copy到game目录下，再从http://code.jquery.com/jquery-1.12.0.js 下载jquery，并copy到game/js目录中，在game/css目录中新建game.css文件，在game/js中新建game.js, 在game目录中新建game.html。
然后用编辑工具打开上面的三个文件，贴上内容：
game.css
body {
background-color: gray;
}
#screens {
height: 200px;
}
#leftScreen {
position: relative;
height: 100%;
background-color: black;
border-right: 2px solid gray;
padding: 0px;
}
#rightScreen {
position: relative;
height: 100%;
background-color: black;
border-left: 2px solid gray;
padding: 0px;
}
#controllers {
height: 40px;
line-height: 40px;
background-color: green;
}
#controllers button {
height: 40px;
}
@keyframes circle-show {
0% {
transform: scale(0);
}
25% {
transform: scale(0.25);
}
50% {
transform: scale(0.5);
}
75% {
transform: scale(0.75);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes circle-show {
0% {
-webkit-transform: scale(0);
}
25% {
-webkit-transform: scale(0.25);
}
50% {
-webkit-transform: scale(0.5);
}
75% {
-webkit-transform: scale(0.75);
}
100% {
-webkit-transform: scale(1);
}
}
.circle {
position: absolute;
-webkit-animation: circle-show 3s;
-moz-animation: circle-show 3s;
animation: circle-show 3s;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: white;
}
.circle-hidden {
display:none;
}
.circle-find {
background-color: red;
}
game.js
var LEVEL = {
1 : {
n : 10,
t : 20
},
2 : {
n : 20,
t : 30
},
3 : {
n : 50,
t : 100
},
4 : {
n : 200,
t : 500
},
5 : {
n : 500,
t : 1000
},
6 : {
n : 1000,
t : 2000
}
};
var FIND = 5;
var timer = false;
var data = {
status : -1,
level : 0,
time : -1,
pass:false,
find : FIND
};
var HEIGHT = 0, WIDTH = 0;
var resizeWin = function() {
var windowHeight = $(window).height();
var screensHeight = windowHeight - 41;
$("#screens").css('height', screensHeight);
$("#screens").css('max-height', screensHeight);
HEIGHT = $("#leftScreen").height();
WIDTH = $("#leftScreen").width();
};
var start = function() {
clean();
data.status = 1;
fillScreens();
data.time = LEVEL[data.level].t;
startTime();
};
var next = function() {
if (!data.status || data.status == -1) {
alert("客官请点隔壁的开始游戏按钮！");
return;
}
if (data.status == -2) {
alert("客官你当前关卡都伺候不好，还好意思找其他关卡！");
return;
}
if (data.status == 9) {
alert("客官，你太猛啦，没有关卡啦！");
return;
}
if (data.pass) {
data.status = 1;
fillScreens();
if (LEVEL[data.level]){
data.time = LEVEL[data.level].t;
}
} else {
alert("客官别着急啊，本轮的关卡你还没有伺候好呢！");
}
};
var clean = function() {
data = {
status : -1,
level : 0,
time : -1,
pass:false,
find : FIND
};
$("#leftScreen").empty();
$("#rightScreen").empty();
};
var fillScreens = function() {
if (data.level >= 6) {
alert('更多关卡敬请期待！');
data.level ++;
data.status = 9;
score();
return;
}
data.level++;
$("#rightScreen .circle").unbind('click');
$("#level").text(data.level);
$("#leftScreen").empty();
$("#rightScreen").empty();
var n = LEVEL[data.level].n;
for (var i = 0; i < n; i++) {
var circleLeft = createCircle();
var circleRight = createCircle();
var position = getPositions();
circleLeft.css(position[0]);
circleLeft.addClass("c" + i);
circleLeft.attr("index", i);
circleRight.css(position[1]);
circleRight.addClass("c" + i);
circleRight.attr("index", i);
$("#leftScreen").append(circleLeft);
$("#rightScreen").append(circleRight);
}
var map = {};
for (var j = 0 ; j < 3; j++) {
var rindex = -1;
while(rindex == -1) {
rindex = randomNumber(n);
if (!map[rindex]){
map[rindex] = {find:false};
$("#leftScreen .c"+rindex).addClass('circle-hidden');
} else {
rindex = -1;
}
}
}
data.points = map;
$("#rightScreen .circle").bind('click', clickCircle);
};
var clickCircle = function() {
var index = $(this).attr('index');
var flag = false;
for (var i in data.points){
if (index == i) {
if (!data.points[i].find) {
flag = true;
data.points[i].find = true;
$("#rightScreen .c"+ index).addClass('circle-find');
break;
}
}
}
if (!flag) {
data.time = data.time - 5;
data.time = data.time < 0 ? 0 : data.time;
} else {
checkAnswers();
}
};
var createCircle = function() {
return $("");
};
var getPositions = function() {
var h = HEIGHT - 10 + 1, w = WIDTH - 10 + 1;
var l = randomNumber(w);
var t = randomNumber(h);
return [ {
left : l,
top : t
}, {
left : WIDTH - 10 - l,
top : t
} ];
};
var randomNumber = function(i) {
return Math.floor(Math.random() * i);
};
var startTime = function() {
if (!timer){
data.time = LEVEL[data.level].t;
calTime();
timer = true;
}
};
var calTime = function() {
if (data.status == 1) {
if (data.time > 0) {
$('#time').text(data.time);
data.time--;
} else {
$('#time').text('0');
data.status = -2;
score();
}
} else if (data.status == 2){
} else {
$('#time').text('0');
}
setTimeout(calTime, 1000);
};
var checkAnswers = function() {
var total = 0, finds = 0;
for (var i in data.points){
total ++;
if (data.points[i].find) {
finds++;
}
}
if (total == finds) {
data.status = 2;
data.pass = true;
alert("恭喜客官，闯关成功，下面的关卡更强大哦！手动点下一关把！");
}
};
var score = function() {
var t = data.level - 1;
alert("恭喜客官, 你总共征服了【" + t + "】个关卡！");
};
var find = function() {
if (data.find > 0) {
var flag = false;
for (var i in data.points){
if (!data.points[i].find) {
data.points[i].find = true;
$("#rightScreen .c"+ i).addClass('circle-find');
flag = true;
break;
}
}
if (flag) {
data.find --;
$("#find .badge").text(data.find);
checkAnswers();
} else {
alert("当前关卡已经没有可以提示的了，全找出来啦");
}
} else {
alert("没有机会了！");
}
};
$(document).ready(function() {
resizeWin();
$("#start").click(start);
$("#next").click(next);
$("#find").click(find);
$("#find .badge").text(FIND);
});
$(window).resize(function() {
resizeWin();
});
game.html:
星际迷航
这样本地的就搭建好了，双击game.html，就可以打开游戏画面：
点击开始游戏，屏幕中会出现小白点，左边和右边是按中间的白线对称的，每一关左边的都比右边的少3个点，点击右边屏幕里面白点来找出多余的三个点，点错了会扣5秒钟。全部找齐后可以点击下一关。
