最强大脑-星际迷航-JQuery 版本

69 阅读 0 评论 46 点赞

我是靠谱客的博主魁梧外套，这篇文章主要介绍最强大脑-星际迷航-JQuery 版本，现在分享给大家，希望可以做个参考。

最强大脑上小四鄙视星际迷航的项目，认为就是放大版的找茬。个人感觉项目难度还是非常高的。闲来无事，用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 $("<div class='circle'></div>");
};
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:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>星际迷航</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/game.css" rel="stylesheet">
<script src="js/jquery-1.12.0.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/game.js"></script>
</head>
<body>
<div class="container-fluid">
<div id = "controllers"
class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button id="start" class="btn btn-primary"><span class="glyphicon glyphicon-play"></span> 开始游戏</button>
<button id="next" class="btn btn-primary"><span class="glyphicon glyphicon-forward"></span> 下一关</button>
<button class="btn btn-primary"><span class="glyphicon glyphicon-tag"></span> 第 <span class="badge" id="level">0</span> 关</button>
<button class="btn btn-primary"><span class="glyphicon glyphicon-time"></span> 剩余 <span class="badge"
id="time" >0</span> 秒</button>
<button id="find" class="btn btn-warning"><span class="glyphicon glyphicon-search"></span> 提示<span class="badge">0</span></button>
</div>
</div>
<div id="screens" class="row">
<div id ="leftScreen" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
</div>
<div id ="rightScreen" class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
</div>
</div>
</div>
</body>
</html>

这样本地的就搭建好了，双击game.html，就可以打开游戏画面：