2048

最新推荐文章于 2024-04-03 11:30:25 发布

奥吼吼~~

最新推荐文章于 2024-04-03 11:30:25 发布

阅读量416

点赞数 2

分类专栏： js 文章标签： js 2048

本文链接：https://blog.csdn.net/zhoulib__/article/details/98524750

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			table{
				margin:100px auto;
				border: 1px solid black;
				width:240px;
				height:240px;
				box-sizing: border-box
			}
			td{
				width:60px;
				height:60px;
				text-align: center;
				font:bold 24px/60px "微软雅黑";
				border:1px solid black
			}
		</style>
	</head>
	<body>
		<table cellpadding="0" cellspacing="0" id="ta">
			
		</table>
		<script>
			var ta = document.getElementById("ta");
			var td = [  // 存储数字的二维数组
			   [0,0,0,0],
			   [0,0,0,0],
			   [0,0,0,0],
			   [0,0,0,0]
			]
			init();  // 首次初始化数字
			var sum = 0;
			function init(){
				sum = 16;
				var txts = ""; // 添加内容
				for(var i = 0;i < td.length;i++){
					txts += "<tr>";
					for(var j = 0;j < td[i].length;j++){
						if(td[i][j] == 0){
							td[i][j] = ""; // 没有数字的全部显示为空
						}else{
							sum--;
						}
						txts += "<td>" + td[i][j] + "</td>"
					}
					txts += "</tr>"
				}
				ta.innerHTML = txts; // 数组体现到表格中
			}
			function unonly(){  // 在没有数字的地方随机一个数字
				var keys = false; // 判断是否要重新执行该函数
				for(var i = 0;i < td.length;i++){
					for(var j = 0;j < td[i].length;j++){
						if(Math.random()<0.2 && td[i][j] == ""){ // 有20%的几率在没有数字的地方生成2 
							td[i][j] = 2;
							keys = true;
							break;   // 生成后跳出
						}else if(Math.random()>0.92 && td[i][j] == ""){ // 有8%的几率在没有数字的地方生成2 
							td[i][j] = 4;
							keys = true;
							break;
						}
					}
					if(keys){
						break; // 如果生成数字跳出循环
					}
				}
				if(!keys && sum>0){
					unonly();  // 没有生成的话再执行一边
				}
			}
			function randoms(which){
				unonly();
//				console.log(which);
				switch(which){  // 改变数组
					case 38:
//						console.log("up")
						for(var i = 1;i < td.length;i++){
							for(var j = 0;j < td[i].length;j++){
								if(td[i-1][j] == ""){
									td[i-1][j] = td[i][j];
									td[i][j] = "";
								}else if(td[i-1][j] == td[i][j]){
									td[i-1][j] += td[i][j];
									td[i][j] = "";
									j--;
								}
							}
						}
					break;
					case 39:
//					 console.log("left")
						for(var i = 0;i < td.length;i++){
							for(var j = 0;j < td[i].length;j++){
								if(td[i][j+1] == ""){
									td[i][j+1] = td[i][j];
									td[i][j] = "";
								}else if(td[i][j+1] == td[i][j]){
									td[i][j+1] += td[i][j];
									td[i][j] = "";
									j--;
								}
							}
						}
					break;
					case 40:
//						console.log("down")
						for(var i = 0;i < td.length-1;i++){
							for(var j = 0;j < td[i].length;j++){
								if(td[i+1][j] == ""){
									td[i+1][j] = td[i][j];
									td[i][j] = "";
								}else if(td[i+1][j] == td[i][j]){
									td[i+1][j] += td[i][j];
									td[i][j] = "";
									j--;
								}
							}
						}
					break;
					case 37:
//						console.log("right")
						for(var i = 0;i < td.length;i++){
//							console.log(td[i-1])
							for(var j = 1;j < td[i].length;j++){
								if(td[i][j-1] == ""){
									td[i][j-1] = td[i][j];
									td[i][j] = "";
								}else if(td[i][j-1] == td[i][j]){
									td[i][j-1] += td[i][j];
									td[i][j] = "";
									j--;
								}
							}
						}
					break;
				}
				init();  // 将改变的数字体现在界面
			}
			document.onkeydown = function(e){
				e = e.which;
				if(e == 38 || e == 37 || e == 39 || e== 40){
					randoms(e)
				}
			}
		</script>
	</body>
</html>

奥吼吼~~

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2048

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> table{ margin:100px auto; border: 1px solid black; width:...
复制链接

扫一扫

专栏目录