8-6 代码展示：@shinyaOwO
本节编程练习不计算学习进度，请电脑登录imooc.com操作

代码展示：@shinyaOwO

个人介绍：
工科女，专业通信工程与通信系统。
几个月前突然对前端产生了兴趣，正在努力学习中，也希望以后能从事这方面的工作。
慕课ID=微博ID=shinyaOwO

 

 

任务

2048的不同：

1.最早看到3-4节时，发现一个小bug（看了后面的课程才知道老师也改了，不过我这里没有照老师的写）：当有一行为[2,2,4,8]时，向左移动会变成[16,0,0,0]，并且源程序的移动算法是从左向右判断（以左移为例），我修改后为左移时从右向左判断能不能移动，这样只需要循环一次就可以了，并且对每个cell增加一个flag指示，是否能合并。

2.对提示gameover和gamewin，没有采用alert的方法，改为添加了一个div表示。

3.颜色只用了两个颜色，2的偶数次幂和奇数次幂颜色不同。

 

index.html2048.cssmain2048.jsmove2048.jssupport2048.js 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5. 	<meta http-equiv = "X-UA-Compatible" content="IE=edge"	/>
  6. 	<meta name = "viewport" content = "width=device-width, height=device-height, initial-scale=1.0, minimum-scale = 1.0, maximum-scale=1.0, user-scalable = no" />
  7. 	<title>2048</title>
  8. 	<link rel="stylesheet" href = "2048.css" />
  9. 	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  10. 	<script type="text/javascript" src="main2048.js"></script>
  11. 	<script type="text/javascript" src="support2048.js"></script>
  12. 	<script type="text/javascript" src="move2048.js"></script>
  13. </head>
  14.  
  15. <body>
  16. 	<header>
  17. 		<h1>2048</h1>
  18. 		<a href="javascript:newGame();" class="btm" id="newGameButtom">new game</a><br />
  19. 		<p>score: <span id="score">0</span></p>
  20. 	</header>
  21. 	<div id="container">
  22. 		<div class="cell" id="cell-00"></div>
  23. 		<div class="cell" id="cell-01"></div>
  24. 		<div class="cell" id="cell-02"></div>
  25. 		<div class="cell" id="cell-03"></div>
  26. 		<div class="cell" id="cell-10"></div>
  27. 		<div class="cell" id="cell-11"></div>
  28. 		<div class="cell" id="cell-12"></div>
  29. 		<div class="cell" id="cell-13"></div>
  30. 		<div class="cell" id="cell-20"></div>
  31. 		<div class="cell" id="cell-21"></div>
  32. 		<div class="cell" id="cell-22"></div>
  33. 		<div class="cell" id="cell-23"></div>
  34. 		<div class="cell" id="cell-30"></div>
  35. 		<div class="cell" id="cell-31"></div>
  36. 		<div class="cell" id="cell-32"></div>
  37. 		<div class="cell" id="cell-33"></div>
  38.  
  39.  
  40. 			<div  class="alert" id="gameOver">
  41. 				<p>Game is Over</p>
  42. 				<a href="javascript:newGame();" class="btm" id="tryAgain">try again</a><br />
  43. 			</div>
  44.  
  45. 			<div class="alert" id="gameWin" >
  46. 				<p>GOOD!NOW YOU HAVE GET 2048!</p>
  47. 				<p><a href="javascript:newGame();" class="btm" id="restart">new game</a></p>
  48. 				<p><a href="javascript:continuePlay();" class="btm" id="continue">GoGoGO</a></p>
  49. 			</div>
  50.  
  51.  
  52.  
  53.  
  54. </body>
  55. </html>
  1. /* CSS Document */
  2.  
  3. header{
  4.     display:block;
  5. 	margin:0 auto;
  6. 	width:100%;
  7. 	text-align:center;
  8. }
  9.  
  10. header h1{
  11. 	font-family:Verdana;
  12. 	font-size:20pt;
  13. 	color:orange;
  14. }
  15.  
  16. .btm{
  17. 	margin:20px auto;
  18. 	width:5%;
  19.  
  20. 	padding:5px 5px;
  21.  
  22. 	text-decoration:none;
  23. 	border-radius:10px;
  24. 	font-family:Verdana;
  25.  
  26. 	background-color:orange;
  27. 	color:#ffffff;	
  28. }
  29.  
  30. .btm:hover{
  31. 	background-color:#FFCC99;
  32. }
  33.  
  34. header p{
  35. 	font-family:Verdana;
  36. 	font-size:20px;
  37. 	color:orange;
  38. 	margin-top:20px;
  39. 	margin-bottom:10px;
  40. }
  41.  
  42. header p #score{
  43.  
  44. 	border-bottom:1px dashed orange;
  45. 	width:60px;
  46.  
  47. }
  48.  
  49. #container{
  50. 	width:500px;
  51. 	height:500px;
  52. 	padding:0px;
  53. 	margin:20px auto;
  54. 	border-radius:10px;
  55. 	border:1px solid orange;
  56. 	position:relative;
  57. }
  58.  
  59. .cell{
  60. 	/*
  61. 	width:100px;
  62. 	height:100px;
  63. 	border-radius:6px;
  64. 	*/
  65. 	background-color:#FFCC99;
  66. 	border:0px solid #FFCC99;
  67. 	position:absolute;	
  68. }
  69.  
  70. .cellNumber{
  71. 	/*width:100px;
  72. 	height:100px;
  73. 	border-radius:6px;
  74. 	*/
  75. 	position:absolute;	
  76. 	font-family:Verdana;
  77. 	text-align:center;
  78. 	font-size:20px;
  79. 	line-height:100px;
  80. }
  81.  
  82. #gameOver{
  83. 	position:relative;
  84. 	width:50%;
  85. 	text-align:center;
  86.  
  87. 	margin:0 auto;
  88. 	font-size:30px;
  89. 	opacity:0.7;
  90. 	font-family:Verdana;
  91. 	color:orange;
  92. 	background-color:#fff;
  93. 	padding:20px;
  94.  
  95. 	border-radius:30%;
  96. 	border:orange dashed 1px;
  97.  
  98. 	z-index:100;
  99. }
  100.  
  101. #gameWin{
  102. 	position:relative;
  103. 	width:80%;
  104. 	text-align:center;
  105.  
  106. 	margin:0 auto;
  107. 	font-size:20px;
  108. 	opacity:0.7;
  109. 	font-family:Verdana;
  110. 	color:orange;
  111. 	background-color:#fff;
  112. 	padding:20px;
  113.  
  114. 	border-radius:30%;
  115. 	border:orange dashed 1px;
  116.  
  117. 	z-index:100;
  118. }
  1. // JavaScript Document
  2. // 面向过程设计
  3.  
  4. var board = new Array();
  5. var flag = new Array();
  6. var score = 0;
  7.  
  8. //支持触碰
  9. var startx = 0;
  10. var starty = 0;
  11. var endx = 0;
  12. var endy = 0;
  13.  
  14. $(document).ready(function(){
  15.  
  16. 	prepareForMobile();
  17. 	newGame();
  18. });
  19.  
  20.  
  21. function prepareForMobile(){
  22. 	//移动端初始化
  23.  
  24. 	if (documentWidth >500){
  25. 		containerWidth = 500;
  26. 		cellLength = 100;
  27. 		cellSpace = 20;
  28. 	}
  29.  
  30. 	$('#container').css({'width':containerWidth - 2*cellSpace,
  31. 						'height':containerWidth - 2*cellSpace,
  32. 						'padding':cellSpace,
  33. 						'border-radius':0.02 * containerWidth
  34. 							});
  35. 	$('.cell').css({'width':cellLength,
  36. 					'height':cellLength,
  37. 					'border-radius' : 0.1 * cellLength
  38. 					});			
  39.  
  40. }
  41.  
  42.  
  43. function newGame(){
  44. 	//初始化棋盘
  45. 	$(".alert").css('display','none');
  46. 	init();
  47. 	//随机产生数字
  48. 	initNum();
  49. 	initNum();
  50. }
  51.  
  52. function init(){
  53.  
  54. 	//初始化
  55. 	for (var i = 0; i < 4; i++)
  56. 		for (var j = 0; j < 4; j++){
  57. 			//初始化网格
  58. 			var gridCell = $("#cell-" + i + j);
  59. 			gridCell.css({'top':getPos(i),'left':getPos(j)});
  60. 			//gridCell.css('left',getPos(j));		
  61. 		}
  62. 		board = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
  63.  
  64. 	updateBoardView();
  65. 	score = 0;
  66. 	updateScore(score);
  67. }
  68.  
  69. function updateBoardView(){
  70. 	$(".cellNumber").remove();
  71. 	for (var i = 0; i < 4; i++)
  72. 		for (var j = 0; j < 4; j++){
  73. 			$("#container").append('<div class="cellNumber" id="cellNumber-' + i + j +'"></div>');
  74. 			var temp = $('#cellNumber-' + i + j);
  75. 			var num = board[i][j]
  76. 			if (num==0){
  77. 				temp.css({'width':'0px',
  78. 						'height':'0px',
  79. 						'top':getPos(i) + cellLength/2,
  80. 						'left':getPos(j) + cellLength/2
  81. 						});
  82. 			}else{
  83. 				temp.css({'width':cellLength,
  84. 						'height':cellLength,
  85. 						'top':getPos(i),
  86. 						'left':getPos(j),
  87. 						'border-radius':0.1*cellLength,
  88. 						'background-color':getColor(num)[0],
  89. 						'color':getColor(num)[1],
  90. 						'z-index':50
  91. 						});				
  92. 				temp.text(board[i][j]);
  93. 			}
  94. 		}
  95. 	$(".cellNumber").css({
  96. 					'line-height':cellLength+'px',
  97. 					'font-size':0.4*cellLength+'px'
  98. 					});
  99. }
  100.  
  101. function initNum(){
  102. 	if (noSpace(board))
  103. 		return false;
  104.  
  105. 	//产生随机位置
  106. 	var randi = parseInt(Math.floor(Math.random()*4));
  107. 	var randj = parseInt(Math.floor(Math.random()*4));
  108.  
  109. 	var loop=0;
  110. 	while(board[randi][randj]!=0 && loop<50){
  111. 		randi = parseInt(Math.floor(Math.random()*4));
  112. 		randj = parseInt(Math.floor(Math.random()*4));
  113. 		loop = loop + 1;
  114. 	}
  115.  
  116. 	//产生随机数
  117. 	var randNum = Math.random()<0.5?2:4;
  118. 	//随机位置产生随机数
  119. 	if (board[randi][randj]==0){
  120. 		board[randi][randj] = randNum;
  121. 	}else{
  122. 		for (var i = 0; i < 4; i++)
  123. 			for (var j = 0; j < 4; j++)
  124. 				if (board[i][j]==0)
  125. 					board[i][j] = randNum;
  126. 	}
  127.  
  128.  
  129.  
  130. 	showNum(randi,randj,randNum);	
  131.  
  132.  
  133.  
  134. }
  135.  
  136. $(document).keydown(function(event){	
  137.  
  138. 	switch(event.keyCode){
  139. 		case 37: //left
  140. 			event.preventDefault();
  141. 			if(moveLeft()){
  142. 				setTimeout("initNum()",250);
  143. 				setTimeout("isGameOver()",400);
  144. 			}
  145. 			break;
  146. 		case 38: //up
  147. 			event.preventDefault();
  148. 			if(moveUp()){
  149. 				setTimeout("initNum()",250);
  150. 				setTimeout("isGameOver()",400);
  151. 			}
  152. 			break;
  153. 		case 39: //right
  154. 			event.preventDefault();
  155. 			if(moveRight()){
  156. 				setTimeout("initNum()",250);
  157. 				setTimeout("isGameOver()",400);
  158. 			}
  159. 			break;
  160. 		case 40://down
  161. 			event.preventDefault();
  162. 			if(moveDown()){
  163. 				setTimeout("initNum()",250);
  164. 				setTimeout("isGameOver()",400);
  165. 			}
  166. 			break;
  167. 		default:
  168. 			break;
  169. 	}
  170. });
  171.  
  172. /*
  173. 	监听触碰事件
  174. */
  175. document.addEventListener('touchstart',function(event){
  176. 	startx = event.touches[0].pageX;
  177. 	starty = event.touches[0].pageY;
  178. });
  179. document.addEventListener('touchmove',function(event){
  180. 	event.preventDefault();
  181. });
  182. document.addEventListener('touchend',function(event){
  183. 	endx = event.changedTouches[0].pageX;
  184. 	endy = event.changedTouches[0].pageY;
  185.  
  186. 	//判断左右移动还是上下移动
  187. 	var deltax = endx - startx;
  188. 	var deltay = endy - starty;
  189.  
  190. 	if (Math.abs(deltax)<0.3 * documentWidth && Math.abs(deltay)<0.3 * documentWidth){
  191. 		return ; //不移动
  192. 	}
  193.  
  194. 	if (Math.abs(deltax) >= Math.abs(deltay)){
  195. 		if(deltax > 0){
  196. 			//右移动
  197. 			if(moveRight()){
  198. 				setTimeout("initNum()",250);
  199. 				setTimeout("isGameOver()",300);
  200. 			}
  201. 		}else{
  202. 			//左移动
  203. 			if(moveLeft()){
  204. 				setTimeout("initNum()",250);
  205. 				setTimeout("isGameOver()",300);
  206. 			}
  207. 		}
  208. 	}else{
  209. 		if(deltay > 0){
  210. 			//下移动
  211. 			if(moveDown()){
  212. 				setTimeout("initNum()",250);
  213. 				setTimeout("isGameOver()",300);
  214. 			}
  215. 		}else{
  216. 			//上移动
  217. 			if(moveUp()){
  218. 				setTimeout("initNum()",250);
  219. 				setTimeout("isGameOver()",300);
  220. 			}
  221. 		}
  222. 	}
  223.  
  224. });
  225.  
  226.  
  227. function updateScore(score){
  228. 	$('#score').text(score);	
  229. }
  1. function moveLeft(){
  2.     if (!canMoveLeft(board))
  3. 		return false;
  4.  
  5. 	//move left
  6. 	flag = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
  7. 	for (var i = 0; i < 4; i++)
  8. 		for (var j = 1; j < 4; j++){
  9. 			if (board[i][j]!=0){
  10.  
  11. 				for (var k = j - 1; k >= 0 ; k--){
  12. 					if (k == 0){
  13. 						if(board[i][k] == 0){
  14. 							moveAnimation(i,j,i,k);
  15. 							board[i][k] = board[i][j];
  16. 							board[i][j] = 0;
  17. 						}else if (board[i][k] == board[i][j] && flag[i][k]!=1){
  18.  
  19. 							moveAnimation(i,j,i,k);
  20. 							board[i][k] = board[i][k]*2;
  21.  
  22. 							score = score + board[i][j]*2;
  23. 							updateScore(score);
  24.  
  25. 							board[i][j] = 0;
  26. 							flag[i][k] = 1;
  27.  
  28.  
  29. 						}else if (k!=j-1){
  30. 								board[i][k+1] = board[i][j];
  31. 								board[i][j] = 0;
  32. 						}
  33. 					}else{
  34. 						if (board[i][k]!=0){
  35. 							if (board[i][k] == board[i][j] && flag[i][k]!=1){
  36.  
  37. 								moveAnimation(i,j,i,k);
  38. 								board[i][k] = board[i][k]*2;
  39.  
  40. 								score = score + board[i][j]*2;
  41. 								updateScore(score);
  42.  
  43. 								board[i][j] = 0;
  44. 								flag[i][k] = 1;
  45. 							}else if (k!=j-1){
  46.  
  47. 								moveAnimation(i,j,i,k);
  48. 								board[i][k+1] = board[i][j];
  49. 								board[i][j] = 0;
  50. 							}
  51. 							break;
  52. 						}
  53. 					}					
  54. 				}
  55.  
  56. 			}
  57.  
  58.  
  59. 		}
  60.  
  61. 	setTimeout("updateBoardView()",200);
  62. 	checkNum(2048);
  63. 	return true;
  64.  
  65. }
  66.  
  67. function moveUp(){
  68. 	if (!canMoveUp(board))
  69. 		return false;
  70.  
  71. 	//move Up
  72. 	flag = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
  73. 	for (var j = 0; j < 4; j++)
  74. 		for (var i = 1; i < 4; i++){
  75. 			if (board[i][j]!=0){
  76.  
  77. 				for (var k = i - 1; k >= 0 ; k--){
  78. 					if (k == 0){
  79. 						if(board[k][j] == 0){
  80.  
  81. 							moveAnimation(i,j,k,j);
  82. 							board[k][j] = board[i][j];
  83. 							board[i][j] = 0;
  84. 						}else if (board[k][j] == board[i][j] && flag[k][j]!=1){
  85.  
  86. 							moveAnimation(i,j,k,j);
  87. 							board[k][j] = board[k][j]*2;
  88.  
  89. 							score = score + board[i][j]*2;
  90. 							updateScore(score);
  91.  
  92. 							board[i][j] = 0;
  93. 							flag[i][k] = 1;
  94. 						}else if (k!=i-1){
  95.  
  96. 							moveAnimation(i,j,k,j);
  97. 							board[k+1][j] = board[i][j];
  98. 							board[i][j] = 0;
  99. 						}
  100. 					}else{
  101. 						if (board[k][j]!=0){
  102. 							if (board[k][j] == board[i][j] && flag[k][j]!=1){
  103.  
  104. 								moveAnimation(i,j,k,j);
  105. 								board[k][j] = board[k][j]*2;
  106.  
  107. 								score = score + board[i][j]*2;
  108. 								updateScore(score);
  109.  
  110. 								board[i][j] = 0;
  111. 								flag[k][j] = 1;
  112. 							}else if (k!=i-1){
  113.  
  114. 								moveAnimation(i,j,k,j);
  115. 								board[k+1][j] = board[i][j];
  116. 								board[i][j] = 0;
  117. 							}
  118. 							break;
  119. 						}
  120. 					}					
  121. 				}
  122.  
  123. 			}
  124.  
  125.  
  126. 		}
  127.  
  128. 	setTimeout("updateBoardView()",200);
  129. 	checkNum(2048);
  130. 	return true;
  131. }
  132.  
  133. ////////////////
  134.  
  135. function moveRight(){
  136. 	if (!canMoveRight(board))
  137. 		return false;
  138.  
  139. 	//move right
  140. 	flag = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
  141. 	for (var i = 0; i < 4; i++)
  142. 		for (var j = 2; j >= 0; j--){
  143. 			if (board[i][j]!=0){
  144.  
  145. 				for (var k = j + 1; k <=3; k++){
  146. 					if (k == 3){
  147. 						if(board[i][k] == 0){
  148. 							moveAnimation(i,j,i,k);
  149. 							board[i][k] = board[i][j];
  150. 							board[i][j] = 0;
  151. 						}else if (board[i][k] == board[i][j] && flag[i][k]!=1){
  152.  
  153. 							moveAnimation(i,j,i,k);
  154.  
  155. 							board[i][k] = board[i][k]*2;
  156.  
  157. 							score = score + board[i][j]*2;
  158. 							updateScore(score);
  159.  
  160. 							board[i][j] = 0;
  161. 							flag[i][k] = 1;
  162. 						}else if (k!=j+1){
  163.  
  164. 							moveAnimation(i,j,i,k);
  165. 							board[i][k-1] = board[i][j];
  166. 							board[i][j] = 0;
  167. 						}
  168. 					}else{
  169. 						if (board[i][k]!=0){
  170. 							if (board[i][k] == board[i][j] && flag[i][k]!=1){
  171.  
  172. 								moveAnimation(i,j,i,k);
  173. 								board[i][k] = board[i][k]*2;
  174.  
  175. 								score = score + board[i][j]*2;
  176. 								updateScore(score);
  177.  
  178. 								board[i][j] = 0;
  179. 								flag[i][k] = 1;
  180. 							}else if (k!=j+1){
  181.  
  182. 								moveAnimation(i,j,i,k);
  183. 								board[i][k-1] = board[i][j];
  184. 								board[i][j] = 0;
  185. 							}
  186. 							break;
  187. 						}
  188. 					}					
  189. 				}
  190.  
  191. 			}
  192.  
  193.  
  194. 		}
  195.  
  196. 	setTimeout("updateBoardView()",200);
  197. 	checkNum(2048);
  198. 	return true;
  199. }
  200.  
  201.  
  202. function moveDown(){
  203. 	if (!canMoveDown(board))
  204. 		return false;
  205.  
  206. 	//move down
  207. 	flag = [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]];
  208. 	for (var j = 0; j < 4; j++)
  209. 		for (var i = 2; i >= 0; i--){
  210. 			if (board[i][j]!=0){
  211.  
  212. 				for (var k = i + 1; k <=3; k++){
  213. 					if (k == 3){
  214. 						if(board[k][j] == 0){
  215.  
  216. 							moveAnimation(i,j,k,j);
  217. 							board[k][j] = board[i][j];
  218. 							board[i][j] = 0;
  219. 						}else if (board[k][j] == board[i][j] && flag[k][j]!=1){
  220.  
  221. 							moveAnimation(i,j,k,j);
  222. 							board[k][j] = board[k][j]*2;
  223.  
  224. 							score = score + board[i][j]*2;
  225. 							updateScore(score);
  226.  
  227. 							board[i][j] = 0;
  228. 							flag[k][j] = 1;
  229. 						}else if (k!=i+1){
  230.  
  231. 							moveAnimation(i,j,k,j);
  232. 							board[k-1][j] = board[i][j];
  233. 							board[i][j] = 0;
  234. 						}
  235. 					}else{
  236. 						if (board[k][j]!=0){
  237. 							if (board[k][j] == board[i][j] && flag[k][j]!=1){
  238.  
  239. 								moveAnimation(i,j,k,j);
  240. 								board[k][j] = board[k][j]*2;
  241.  
  242. 								score = score + board[i][j]*2;
  243. 								updateScore(score);
  244.  
  245. 								board[i][j] = 0;
  246. 								flag[k][j] = 1;
  247. 							}else if (k!=i+1){
  248.  
  249. 								moveAnimation(i,j,k,j);
  250. 								board[k-1][j] = board[i][j];
  251. 								board[i][j] = 0;
  252. 							}
  253. 							break;
  254. 						}
  255. 					}					
  256. 				}
  257.  
  258. 			}
  259.  
  260.  
  261. 		}
  262.  
  263. 	setTimeout("updateBoardView()",200);
  264. 	checkNum(2048);
  265. 	return true;
  266. }
  267.  
  268. function canMoveLeft( board ){
  269.  
  270.     for( var i = 0 ; i < 4 ; i ++ )
  271.         for( var j = 1; j < 4 ; j ++ )
  272.             if( board[i][j] != 0 )
  273.                 if( board[i][j-1] == 0 || board[i][j-1] == board[i][j] )
  274.                     return true;
  275.  
  276.     return false;
  277. }
  278.  
  279. function canMoveUp( board ){
  280.  
  281.     for( var i = 1 ; i < 4 ; i ++ )
  282.         for( var j = 0; j < 4 ; j ++ )
  283.             if( board[i][j] != 0 )
  284.                 if( board[i-1][j] == 0 || board[i-1][j] == board[i][j] )
  285.                     return true;
  286.  
  287.      return false;
  288. }
  289.  
  290. function canMoveRight( board ){
  291.  
  292.     for( var i = 0 ; i < 4 ; i ++ )
  293.         for( var j = 0; j < 3 ; j ++ )
  294.             if( board[i][j] != 0 )
  295.                 if( board[i][j+1] == 0 || board[i][j+1] == board[i][j] )
  296.                     return true;
  297.  
  298.      return false;
  299. }
  300.  
  301. function canMoveDown( board ){
  302.  
  303.     for( var i = 0 ; i < 3 ; i ++ )
  304.         for( var j = 0; j < 4 ; j ++ )
  305.             if( board[i][j] != 0 )
  306.                 if( board[i+1][j] == 0 || board[i+1][j] == board[i][j] )
  307.                     return true;
  308.  
  309.      return false;
  310. }
  1. // JavaScript Document
  2.  
  3.  
  4. //定义长宽，以便在移动端中自适应
  5.  
  6. documentWidth = window.screen.availWidth;
  7. containerWidth = 0.92 * documentWidth;
  8. cellLength = 0.18 * documentWidth;
  9. cellSpace = 0.04 * documentWidth;
  10.  
  11. function getPos(i){
  12.     //初始化行和列，输入i为top，输入j为left
  13. 	//return i * 120 + 20;
  14. 	return i * (cellSpace + cellLength) + cellSpace;
  15. }
  16.  
  17.  
  18. function getColor(num){
  19. 	//设置cell的颜色
  20. 	var color = new Array;
  21. 	var bg = "";
  22. 	var textcolor = "";
  23.  
  24. 	if ((Math.log(num)/Math.log(2))%2==1){
  25. 		bg = "orange";
  26. 		textcolor="#ffffff";
  27. 	}else{
  28. 		bg = "#eee4da";
  29. 		textcolor="orange";
  30. 	}
  31. 	/* 每个格子不同颜色
  32. 	switch(num){
  33. 		case 2: bg = "orange";
  34. 				textcolor="#ffffff";
  35. 				break;
  36. 		case 4: bg = "#eee4da";
  37. 				textcolor="orange";
  38. 				break;
  39. 		case 8: bg = "orange";
  40. 				textcolor="#ffffff";
  41. 				break;
  42. 		case 16: bg = "#eee4da";
  43. 				textcolor="orange";
  44. 				break;
  45. 		case 32: bg = "orange";
  46. 				textcolor="#ffffff";
  47. 				break;
  48. 		case 64: bg = "#eee4da";
  49. 				textcolor="orange";
  50. 				break;
  51. 		case 128: bg = "orange";
  52. 				textcolor="#ffffff";
  53. 				break;	
  54. 		case 256: bg = "#eee4da";
  55. 				textcolor="orange";
  56. 				break;	
  57. 		case 512: bg = "orange";
  58. 				textcolor="#ffffff";
  59. 				break;	
  60. 		case 1024: bg = "#eee4da";
  61. 				textcolor="orange";
  62. 				break;	
  63. 		case 2048: bg = "orange";
  64. 				textcolor="#ffffff";
  65. 				break;	
  66. 		case 4096: bg = "#eee4da";
  67. 				textcolor="orange";
  68. 				break;	
  69. 		case 8192: bg = "orange";
  70. 				textcolor="#ffffff";
  71. 				break;
  72. 	}
  73. 	*/
  74. 	color[0] = bg;
  75. 	color[1] = textcolor;
  76. 	return color;
  77.  
  78. }
  79.  
  80. function checkNum(num){
  81. 	for (var i = 0; i < 4; i++)
  82. 		for (var j = 0; j < 4; j++)
  83. 			if (board[i][j]==num){
  84. 				$("#gameWin").show(500);
  85. 			}
  86.  
  87. }
  88.  
  89. function noSpace(board){
  90. 	for (var i = 0; i < 4; i++)
  91. 		for (var j = 0; j < 4; j++)
  92. 			if (board[i][j]==0)
  93. 				return false;
  94.  
  95. 	return true;
  96. }
  97.  
  98. function showNum(i,j,num){
  99. 	//数字产生动画
  100. 	var cell = $('#cellNumber-'+i+j);
  101. 	cell.css({'background-color':getColor(num)[0],
  102. 				'color':getColor(num)[1]
  103. 			});
  104. 	cell.text(num);
  105. 	cell.animate({'width':cellLength,
  106. 				'height':cellLength,
  107. 				'border-radius':0.1*cellLength,
  108. 				'top':getPos(i),
  109. 				'left':getPos(j)
  110. 	},80);
  111. }
  112.  
  113. function moveAnimation(fromx,fromy,tox,toy){
  114.  
  115. 	var numCell = $('#cellNumber-' + fromx + fromy);
  116. 	numCell.animate({
  117.         top:getPos( tox ),
  118.         left:getPos( toy )
  119.     },200);
  120.  
  121. }
  122.  
  123.  
  124. function noMove(board){
  125. 	if (canMoveUp( board ) || canMoveDown( board )
  126. 	|| canMoveLeft( board ) || canMoveRight( board ))
  127. 		return false;
  128.  
  129. 	return true;
  130.  
  131. }
  132.  
  133. function isGameOver(){
  134.  
  135. 	if (noSpace(board) && noMove(board)){
  136. 	//if (score>15){ //测试用
  137. 		//$("#gameOver").css('display','block');
  138. 		$("#gameOver").show(500);
  139. 	}
  140.  
  141. }
  142.  
  143. function continuePlay(){
  144. 	$("#gameWin").remove();
  145.  
  146. }
返回课程