add t2048

index.html

@@ -9,6 +9,7 @@
 		<div id="main">
 			<div id="mycav">
 				<div id="fun_rate">vczero</div>
+				<div style="float:right;"><a href="t2048/t2048.html">T2048</a></div>
 				<canvas id="canvas"  width="910" height="1500">
 					您好！您的浏览器不支持HTML5 Canvas。请更换其他浏览器。
 				</canvas>

main.js

@@ -206,11 +206,11 @@ MyChart.prototype.drawBaseInfo = function(){
 	var baseinfo = [];
 	baseinfo.push('代号：vczero');
 	baseinfo.push('生日：1991-09-24');
-	baseinfo.push('公司：高德地图实习');
+	baseinfo.push('公司：高德地图');
 	baseinfo.push('毕业院校：CHZU');
 	baseinfo.push('专业：Geographic Information System');
 	baseinfo.push('爱好：打兵乓球');
-	baseinfo.push('实习安排：Node.js服务端&矢量地图');
+	baseinfo.push('从业：web app服务端&矢量地图');
 	baseinfo.push('E-amil：wlhmyit@126.com');
 
 	for(var i = 0; i < baseinfo.length; i++){
@@ -233,6 +233,7 @@ MyChart.prototype.drawBaseInfo = function(){
 	schoolShow.push('8. 2010年9月~2014年6月：担任学习委员、11级地信2班助理班主任');
 	schoolShow.push('9. 2012年6月~2013年6月：GIS首届会长、校技术创新团队MySpace组长');
 	schoolShow.push('10. 荣获2014年安徽省品学兼优毕业生');
+	schoolShow.push('11. 荣获校十佳大学生');
 
 	for(var n = 0; n < schoolShow.length; n++){
 		this.context.fillStyle ='#898788';

t2048/css/main.css

@@ -0,0 +1,157 @@
+
+#main_ui{
+	width:500px;
+	height: 578px;
+	border:1px solid #E0E0E0;
+	position: relative;
+	margin: 30px auto;
+	background-color: #FBF8F0;
+}
+
+
+#main_title{
+	font-size: 20px;
+	margin: 10px auto;
+	width: 140px;
+	height: 30px;
+	line-height: 30px;
+	color: #FFF;
+	background-color: #FF8402;
+	text-align: center;
+	border-radius: 4px;
+	font-family: 'consolas';
+}
+
+#score{
+	width: 130px;
+	margin-left: 340px;
+	margin-bottom: 10px;
+}
+
+#score img{
+	width: 18px;
+	height: 18px;
+}
+
+#score span{
+	color: #1E6823;
+	font-weight: bold;
+	font-family: 'consolas';
+	font-size: 15px;
+}
+
+
+#play_game{
+	width: 60px;
+	height: 30px;
+	line-height: 30px;
+	text-align: center;
+	border-radius: 3px;
+	background-color: #F1A900;
+	margin:10px auto;
+	color: #FFF;
+	font-weight: bold;
+}
+
+#play_game:hover{
+	text-decoration: none;
+	cursor: pointer;
+}
+
+#main_ui_cell{
+	background-color: #B9B2A8;
+	width: 450px;
+	height: 450px;
+	margin: 0 auto;
+	border-radius: 8px;
+	position: relative;
+}
+
+
+
+.bk_cell{
+	width: 100px;
+	height: 100px;
+	background-color: #CCC0B4;
+	border-radius: 5px;
+	position: absolute;
+	
+}
+
+.fr_cell{
+	border-radius: 5px;
+
+	font-size: 55px;
+	line-height: 100px;
+	font-weight: bold;
+	text-align: center;
+	position: absolute;
+}
+
+#author{
+	position:absolute;
+	right:20px;
+	top:20px;
+	font-size:13px;
+	font-weight:bold;	
+}
+
+#author a{
+	text-decoration: none;
+	color:blue;
+
+}
+
+#author a:hover{
+	text-decoration: none;
+}
+
+
+#show_game_over{
+	position:absolute;
+	top:150px;
+	left:50px;
+	width:400px;
+	height:200px;
+	border:1px solid #EBECEF;
+	background-color:#FFF;
+	opacity:0.8;
+}
+
+#close_div{
+	width:30px;
+	height:30px;
+	float:right;
+}
+
+#close_div img{
+	width:30px;
+	height:30px;
+}
+
+#close_div:hover{
+	cursor: pointer;
+}
+
+#cry_girl{
+	width:140px;
+	margin:50px auto;
+}
+
+#game_game{
+	position: absolute;
+	left: 40px;
+	top: 90px;
+	font-size: 30px;
+	font-family: 'consolas';
+	color: #A6E22A;
+}
+
+#game_over{
+	position: absolute;
+	right: 40px;
+	top: 90px;
+	font-size: 30px;
+	font-family: 'consolas';
+	color: #A6E22A;
+}

t2048/js/config.js

@@ -0,0 +1,13 @@
+var text = [
+	"2",
+	"4",
+	"8",
+	"16",
+	"32",
+	"64",
+	"128",
+	"256",
+	"512",
+	"1024",
+	"2048"
+];

t2048/js/main.js

@@ -0,0 +1,271 @@
+
+$(function(){
+
+	t2048 = new T2048();
+	t2048.play();
+
+	$('#play_game').click(function(){
+		t2048 = new T2048();
+		t2048.play();
+	});
+
+	$('#show_game_over').hide();
+
+	$('#close_div').click(function(){
+		$('#show_game_over').hide();
+		t2048 = new T2048();
+		t2048.play();
+	});
+});
+
+
+//T2048类
+var T2048 = function(){
+	//记录数字变化的二维数组
+	var bk_table = [];
+	//玩家分数
+	var myScore = 0;
+	//UI绘制
+	var createUI = function (){
+		for(var i = 0; i < 4; i++){
+			bk_table[i] = [];
+			for(var j = 0; j <4; j++){
+				bk_table[i][j] = 0;
+				var bk_cell = $('#bk_cell_'+ i + '_' + j);
+				bk_cell.css('top', getTop(i, j));
+				bk_cell.css('left', getLeft(i, j));
+			}
+		}
+	}
+	//产生并显示随机数
+	var initNumber = function (){
+		var xy1 = createPosition(bk_table);
+		//能够产生随机数，则产生随机数
+		if(xy1){
+			var number1 = createNumber();
+			//产生一个数
+			bk_table[xy1.x][xy1.y] = number1;
+			// var xy2 = createPosition(bk_table);
+			// var number2 = createNumber();
+			// bk_table[xy2.x][xy2.y] = number2;
+			showNumber(bk_table);
+		}
+	}
+
+	//产生随机数
+	var createNumber = function (){
+		return Math.random() *10 > 5 ? 4:2;
+	}
+
+	//获取下一个绘制的位置
+	var createPosition = function (table){
+		var x = Math.floor(Math.random() *4);
+		var y = Math.floor(Math.random() *4);
+		var i = 0;
+		while(i < 500){
+			if(table[x][y] === 0)
+				return {x:x, y:y};
+			x = Math.floor(Math.random() *4);
+			y = Math.floor(Math.random() *4);
+			i++;
+		}
+
+		for(i = 0; i < 4; i++){
+			for(var j = 0; j < 4; j++){
+				if(table[i][j] === 0)
+					return {x:i, y:j};
+			}
+		}
+
+		return false;
+	}
+
+	//将数字绘制出来
+	var showNumber = function (table){
+		$('.fr_cell').remove();
+		for(var i = 0; i < 4; i++){
+			for(var j = 0; j < 4; j++){
+				var fr_cell_str = '<div class="fr_cell" id=fr_cell_' + i + '_' + j +'>' + '</div>'; 
+				$('#main_ui_cell').append(fr_cell_str);
+				var fr_cell = $('#fr_cell_'+ i + '_' + j);
+				if(table[i][j] == 0){
+					fr_cell.css('width', '0');
+					fr_cell.css('height', '0');
+					fr_cell.css('top', getTop(i, j) + 50);
+					fr_cell.css('left', getLeft(i, j) + 50);
+				}else{
+
+			
+					fr_cell.css('backgroundColor', getBackColor(table[i][j])); //设置背景色
+					fr_cell.css('color', getTextColor(table[i][j])); //设置文字颜色
+					fr_cell.css('width', '100px');
+					fr_cell.css('height', '100px');
+					fr_cell.css('top', getTop(i, j));
+					fr_cell.css('left', getLeft(i, j));
+					fr_cell.text(table[i][j]);
+				}
+			}
+		}
+	}
+
+	//获取背景色
+	var getBackColor = function (number){
+		switch(number){
+			case 2: return '#EEE4DA'; break;
+			case 4: return '#EEE4DA'; break;
+			case 8: return '#F3B079'; break;
+			case 16: return '#EB8E53'; break;
+			case 32: return '#FB795F'; break;
+			case 64: return '#EB573B'; break;
+			case 128: return '#00C6E5'; break;
+			case 256: return '#EDCA62'; break;
+			case 512: return '#FCD209'; break;
+			case 1024: return '#E12D2D'; break;
+			case 2048: return '#4CB649'; break;
+			default: break;
+		}
+	}
+
+	//获取文本颜色
+	var getTextColor = function (number){
+		if(number <= 4)
+			return '#665C52';
+		return '#FFF';
+	}	
+
+	var getTop = function (i , j){
+		return i*110 + 10;
+	}
+
+	var getLeft = function (i, j){
+		return j*110 + 10;
+	}
+
+	//判断是否还可以移动（游戏是否结束）
+	var notMove = function (){
+		var full = (function (){
+			for(var i = 0; i < 4; i++){
+				for(var j = 0; j < 4; j++){
+					if(bk_table[i][j] === 0)
+						return false;		
+				}
+			}
+
+			return true;
+		})();
+
+		var noLeftRight = (function (){
+			for(var i = 0; i < 4; i++){
+				for(var j = 0; j < 3; j++){
+					if(bk_table[i][j] === bk_table[i][j+1])
+						return false;
+				}
+			}
+			return true;
+		})();
+
+		var noTopBottom = (function (){
+			for(var j = 0; j < 4; j++){
+				for(var i = 0; i < 3; i++){
+					if(bk_table[i][j] === bk_table[i+1][j])
+						return false;
+				}
+			}
+			return true;
+		})();
+
+		return full & noLeftRight & noTopBottom;
+
+	}
+
+	//监听用户的键盘移动
+	var getKeyDowm = function (e){
+		var isOver = notMove();
+		if(!isOver){
+			switch(e.which){
+				case 37:
+					//left
+				 	//整体向左移 并合并相同的数字，i不变
+				 	for(var i = 0; i < 4; i++){
+				 		for(var j = 3; j > 0; j--){
+				 			if(bk_table[i][j-1] === 0 || (bk_table[i][j] === bk_table[i][j-1])){
+				 				bk_table[i][j-1] = bk_table[i][j] + bk_table[i][j-1];
+				 				myScore = myScore + bk_table[i][j-1];
+				 				bk_table[i][j] = 0;
+				 			}
+				 		}
+				 	}
+				 	//生成新的数字和UI
+				 	$('#my_score').text(myScore);
+				 	initNumber(bk_table);
+				 	break;
+				case 38:
+					//top
+				 	//j = 0不移，其余都移动 j不变
+				 	for(var j = 0; j < 4; j++){
+				 		for(var i = 3; i > 0 ; i--){
+					 		if(bk_table[i-1][j] === 0 || (bk_table[i][j] === bk_table[i-1][j])){
+					 			bk_table[i-1][j] = bk_table[i][j] + bk_table[i-1][j];
+					 			myScore = myScore + bk_table[i-1][j];
+					 			bk_table[i][j] = 0;
+					 		}
+				 		}
+				 	}
+				 	$('#my_score').text(myScore);
+				 	initNumber(bk_table);
+				 	break;
+				case 39: 
+					//right
+					//整体向右移 并合并相同的数字，i不变
+				 	for(var i = 0; i < 4; i++){
+				 		for(var j = 0; j < 3; j++){
+				 			if(bk_table[i][j+1] === 0 || (bk_table[i][j] === bk_table[i][j+1])){
+				 				bk_table[i][j+1] = bk_table[i][j] + bk_table[i][j+1];
+				 				myScore = myScore + bk_table[i][j+1];
+				 				bk_table[i][j] = 0;
+				 			}
+				 		}
+				 	}
+				 	//生成新的数字和UI
+				 	$('#my_score').text(myScore);
+				 	initNumber(bk_table);
+				 	break;
+				case 40: 
+					//bottom
+					for(var j = 0; j < 4; j++){
+				 		for(var i = 0; i < 3 ; i++){
+					 		if(bk_table[i+1][j] === 0 || (bk_table[i][j] === bk_table[i+1][j])){
+					 			bk_table[i+1][j] = bk_table[i][j] + bk_table[i+1][j];
+					 			myScore = myScore + bk_table[i+1][j];
+					 			bk_table[i][j] = 0;
+					 		}
+				 		}
+				 	}
+				 	$('#my_score').text(myScore);
+				 	initNumber(bk_table);
+					break;
+				default: 
+					break;
+			}
+		}else{
+			$('#show_game_over').show();
+			document.onkeydown = null;
+		}
+	}
+
+	document.onkeydown = getKeyDowm;
+
+	//暴露paly
+	return {
+		play: function play(){
+			myScore = 0;
+			$('#my_score').text(0);
+			createUI();
+			initNumber(bk_table);			
+		}
+	};
+
+}
+
+
+

t2048/t2048.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+
+<html>
+	<title>2048</title>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<link rel="stylesheet" type="text/css" href="css/main.css">
+		<script type="text/javascript" src="js/jquery2.1.1.js"></script>
+		<script type="text/javascript" src="js/main.js"></script>
+	</head>
+
+<body>
+	<div id="main_ui">
+		<div id="main_title">
+			<span>TAILOR 2048</span>
+		</div>
+		<div id="score">
+			<img src="images/doll.png">
+			<span id="my_score">0</span>
+		</div>
+		<div id="main_ui_cell">
+			<div class="bk_cell" id="bk_cell_0_0"></div>
+			<div class="bk_cell" id="bk_cell_0_1"></div>
+			<div class="bk_cell" id="bk_cell_0_2"></div>
+			<div class="bk_cell" id="bk_cell_0_3"></div>
+
+			<div class="bk_cell" id="bk_cell_1_0"></div>
+			<div class="bk_cell" id="bk_cell_1_1"></div>
+			<div class="bk_cell" id="bk_cell_1_2"></div>
+			<div class="bk_cell" id="bk_cell_1_3"></div>
+
+			<div class="bk_cell" id="bk_cell_2_0"></div>
+			<div class="bk_cell" id="bk_cell_2_1"></div>
+			<div class="bk_cell" id="bk_cell_2_2"></div>
+			<div class="bk_cell" id="bk_cell_2_3"></div>
+
+			<div class="bk_cell" id="bk_cell_3_0"></div>
+			<div class="bk_cell" id="bk_cell_3_1"></div>
+			<div class="bk_cell" id="bk_cell_3_2"></div>
+			<div class="bk_cell" id="bk_cell_3_3"></div>
+		</div>
+		<div id="play_game">开始</div> 
+		<div id="author"><a href="http://vczero.github.io/">developer:王利华</a></div>
+		<div id="show_game_over">
+			<div id="close_div"><img src="images/close.png"/></div>
+			<div id="cry_girl"><img src="images/cry.jpeg" /></div>
+			<div id="game_game">Game</div>
+			<div id="game_over">Over</div>
+		</div>
+	</div>
+</body>
+</html>

test.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-		<meta http-equiv="Access-Control-Allow-Origin" content="*">
-		<style type="text/css">
-			body{font-size:13px;margin-left: 0;margin-top: 0;margin-right: 0;margin-bottom: 0;}
-			.mainFrame{width: 960px;margin-right: auto;margin-left: auto;border:1px solid red;min-height: 900px;}
-		</style>
-	</head>
-	<body>
-		<div class="mainFrame">
-			
-		</div>
-	</body>
-</html>