最強の脳-星間迷路-JQueryバージョン

11926 ワード

ゲーム html 星間

詳細
最強の脳の小四は星間迷航のプロジェクトを軽蔑し、拡大版の仕事だと思っている.個人的には種目の難易度が非常に高いと思います.暇で大丈夫で、jqueryで似たような小さなゲームを書きました.

JQuery+Bootstrapのフレームワークを使用してhtmlを構築します.構造は以下の通りです.
game
--css
--js
--fonts
--game.html

新しいフォルダgameを作成します.
からhttp://d.bootcss.com/bootstrap-3.3.5-dist.zipbootstrapをダウンロードし、解凍してすべてのフォルダ(css,fonts,js)をgameディレクトリの下にコピーし、http://code.jquery.com/jquery-1.12.0.jsjqueryをダウンロードし、copyをgame/jsディレクトリに、game/cssディレクトリにgameを新規作成します.cssファイル、game/jsにgameを新規作成します.js,gameディレクトリにgameを新規作成する.html.

編集ツールで上の3つのファイルを開き、内容を貼り付けます.

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つないで、のスクリーンののいをクリックしてな3つのをしして、がって5 ボタンをかけます. したら、のボタンをクリックしてください.

サイズ:43.1 KB

サイズ:44.4 KB

ファイルを

jspsmartupload utf 8サポート

redis哨兵版配置指導