HTML5 canvas 2048 game

Insert picture description here
<!DOCTYPE html>
<html>
	<head>
		<title>2048</title>
		<style>
			canvas{
     
     
				background-color: white;

			}
		</style>
	</head>
	<body>
		<canvas id="mycanvas" style="position:absolute ">该浏览器不支持canvas</canvas>
		<script>
			// 设置canvas大小
			var canvas = document.getElementById("mycanvas");
			var WIDTH = document.documentElement.clientWidth;
			var HEIGHT = document.documentElement.clientHeight;
			var ctx = document.getElementById("mycanvas").getContext("2d");
			canvas.width = WIDTH;
			canvas.height = HEIGHT;

			// 游戏结束的标志
			var endFlag = 0;
			// 建一个类，2048棋盘类,array是数组, location是棋盘左上角的坐标，size是边长，jieshu是阶数
			function Pan(array, location, size, jieshu){
     
     
				this.array = array;
				this.location = location;
				this.size = size;
				this.jieshu = jieshu;
			}
			
			
			// 写一个函数，功能是：新建一个2
			Pan.prototype.add2 = function(){
     
     
				// 找出所有0位
				var zeroIndex = [];
				for(i=0; i<this.jieshu; i++)
				{
     
     
					for(j=0; j<this.jieshu; j++)
					{
     
     
						if(this.array[i][j]==0)
							zeroIndex.push([i, j]);
					}
				}
				// 如果没有0位了，就结束了（移不动了）
				if(zeroIndex.length <= 0)
					return -1; // 返回-1表示游戏结束
				else
				{
     
     
					var t1 = Math.ceil(Math.random()*zeroIndex.length) - 1; //产生一个随机数
					var t2 = zeroIndex[t1];
					this.array[t2[0]][t2[1]] = 2;
					return zeroIndex[t1];
				}
			}
			// 数组逆序
			function reverseArray(array){
     
     
				var t1 = [];
				for(i=0; i<array.length; i++)
					t1.push(array[array.length-i-1]);
				return t1;
			}
			// 数组消0
			function del_0(array){
     
     
				var t1 = array.length; // 数组元素个数
				var t2 = []; // 用来装非0元素
				var t3 = []; // 用来装0
				for(i = 0; i<t1; i++){
     
     
					if(array[i]==0)
						t3.push(array[i]);
					else
						t2.push(array[i])
				}
				var t4 = t3.concat(t2);
				return t4;
			}
			
			// 数组合并相同元素
			function merge(array){
     
     
				var t1 = array.length;
				for(i=t1-1; i>0; i--){
     
     
					if(array[i]==array[i-1]){
     
     
						array[i] = array[i] * 2;
						array[i-1] = 0;
						i--; // 跳过array[i-1]，因为置0了
					}
				}
				return array;
			}

			// 写一个函数，输入一维数组，以及移动方向，输出移动合并后的数组
			function move_1(array_1, direction){
     
     
				// direction只有两个值，0表示向左，1表示向右
				// 如果向右移动
				if(direction==1){
     
     
					var t1 = del_0(array_1);
					var t2 = merge(t1);
					var t3 = del_0(t2);
					return t3;
				}
				else{
     
     
					var t1 = del_0(reverseArray(array_1));
					var t2 = merge(t1);
					var t3 = del_0(t2);
					return reverseArray(t3);
				}
			}
			// 写一个函数，对二维数组进行转置，主要用于行列的交换
			function array2trans(array){
     
     
				var t6 = [];
				var t7 = array.length;
				for(i=0; i<t7; i++){
     
     
					var t8 = [];
					for(j=0; j<t7; j++){
     
     
						t8.push(array[j][i]);
					}
					t6.push(t8);
				}
				return t6;
			}

			// 写一个函数，输入二维数组和移动方向，输出移动后的数组,direction数字为1234分别表示上下左右
			Pan.prototype.move_1234 = function(direction){
     
     
				var array_2 = this.array;
				var t1 = array_2.length; // 表示阶数
				// 获取每条行、每条列，前面一半是所有的行，后面一半是所有的列
				var t2 = []; //所有的行
				for(i=0; i<t1; i++){
     
     
					var t3 = [];
					for(j=0; j<t1; j++){
     
     
						t3.push(array_2[i][j]);
					}
					t2.push(t3);

				}

				var t4 = []; //所有的列
				for(i=0; i<t1; i++){
     
     
					var t3 = [];
					for(j=0; j<t1; j++){
     
     
						t3.push(array_2[j][i]);
					}
					t4.push(t3);

				}

				if(direction==1) // 表示向上移动
				{
     
     
					var t5 = [];
					for(var i=0; i<t1; i++){
     
     
						var t6 = move_1(t4[i], 0);
						t5.push(t6);
					}
					this.array = array2trans(t5); // 更新array，这里要转置
				}
				else if(direction==2){
     
      // 表示向下移动
					var t5 = [];
					for(var i=0; i<t1; i++){
     
     
						var t6 = move_1(t4[i], 1);
						t5.push(t6);
					}
					this.array = array2trans(t5); // 更新array，这里要转置
				}
				else if(direction==3){
     
      //向左
					var t5 = [];
					for(var i=0; i<t1; i++){
     
     
						var t6 = move_1(t2[i], 0);
						t5.push(t6);
					}
					this.array = t5; // 更新array
				}
				else if(direction==4){
     
      //向右
					var t5 = [];
					for(var i=0; i<t1; i++){
     
     
						var t6 = move_1(t2[i], 1);
						t5.push(t6);
					}
					this.array = t5; // 更新array
				}

				var t10 = this.add2();  // 移了之后要在一个随机0位补充2
				if(t10==-1)
					endFlag = 1;
			}

			
			// 根据array画出棋盘
			Pan.prototype.draw = function(){
     
     
				// 画之前先清屏幕
				ctx.clearRect(0, 0, WIDTH, HEIGHT);
				//左上角数字的坐标
				var top = this.location[1];
				var left = this.location[0];
				ctx.font = this.size/4/this.jieshu + "px Arial";
				
				var maxNum = 0;
				var maxIndex = [0, 0];
				for(var i=0; i<this.jieshu; i++)
				{
     
     
					for(var j=0; j<this.jieshu; j++)
					{
     
     
						if(this.array[i][j]>maxNum){
     
     
							maxNum = this.array[i][j];
							maxIndex = [i, j];
						}
						if(this.array[i][j]==0)
							ctx.fillStyle = '#DCDCDC';
						else
							ctx.fillStyle = 'black'
						var top1 = top + this.size/this.jieshu * i;
						var left1 = left + this.size/this.jieshu * j;
						// alert([x1, y1]);
						ctx.fillText(this.array[i][j], left1, top1); //注意这里y1在前
					}
				}

				// 把最大的数字标红
				ctx.fillStyle = 'red';
				ctx.font = this.size/4/this.jieshu + "px Arial";
				var top1 = top + this.size/this.jieshu * maxIndex[0];
				var left1 = left + this.size/this.jieshu * maxIndex[1];
				ctx.fillText(this.array[maxIndex[0]][maxIndex[1]], left1, top1);
				
			}
			
			// 键盘事件函数
			function f(e){
     
     
				// 游戏结束了就移不动了
				if(endFlag==1){
     
     
					alert('GAME_OVER');
					return
				}
				var e = e || window.event;
				// alert(e.keyCode);
				switch(e.keyCode){
     
     
					case 87: // 上移
						p.move_1234(1);
						p.draw();
						break;
					case 83: // 下移
						p.move_1234(2);
						p.draw();
						break;
					case 65: // 左移
						p.move_1234(3);
						p.draw();
						break;
					case 68: // 右移
						p.move_1234(4);
						p.draw();
						break;
				}	
			}

			// 一个功能，输入阶数，输出全0二维数组
			function gen0Array(jieshu){
     
     
				var t8 = [];
				for(var i=0; i<jieshu; i++)
				{
     
     
					var t9 = [];
					for(var j=0; j<jieshu; j++){
     
     
						t9.push(0);
					}
					t8.push(t9);
				}
				return t8;
			}

			var jieshu = 5; // 阶数
			var array1 = gen0Array(jieshu);
			p = new Pan(array1, [300, 50], HEIGHT-50, jieshu);
			p.add2();
			p.add2();
			p.draw();
			// ctx.fillText("for", 10, 100);
			// document.onkeydown = f;  // 键盘控制，WSAD分别表示上下左右

			//自动移动就执行下面
			var nMove = 0; //移动次数
			setInterval(function(){
     
     
				if(nMove%2==0)
					p.move_1234(2);
				else
					p.move_1234(4);
				p.draw();
				nMove += 1;
			}, 100);
			
		</script>
	</body>
</html>
HTML5 canvas 2048 game

Guess you like
