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

seaboycs

浏览: 127952 次
性别:
来自: 南通

最近访客更多访客>>

tadpole1027

heracer

chmanager

Eli_Gong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html
CSS
JQuery

游戏 html 星际

最强大脑上小四鄙视星际迷航的项目，认为就是放大版的找茬。个人感觉项目难度还是非常高的。闲来无事，用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，就可以打开游戏画面：