<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>连连看</title>
</head>


<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
	
	let canvas = document.querySelector("#canvas") //获取画布元素
	let cxt = canvas.getContext('2d') //获取画布的上下文对象，用于绘制
	let rows = 0; //当前颜色块的行数
	let cols = 0; //当前颜色块的列
	
	
	function drawYuansu() {
		for (let i = 0; i < newarr.length; i++) {
			cxt.fillStyle = newarr[i].color;
			cxt.beginPath();
			cxt.fillRect(
				cols * (newarr[i].width),
				rows * (newarr[i].height),
				newarr[i].width, newarr[i].height);
			newarr[i].x = cols *(newarr[i].width);
			newarr[i].y = rows *(newarr[i].height);
			cols++;
			if (cols % 6 == 0) {
				//下文增加包围圈时4要改为6
				rows++;
				cols = 0;
			}
		}
	}
	
	
	//创建基本色块
	let arr = [];//储存基本元素的数组
	function setYuansu() {
		for (let i = 0; i < 8; i++) {
			let obj = {
				width: 50,
				height: 50,
				isBorder: false,
				color: "rgba(" + parseInt(255 * Math. random()) + "," + parseInt(255 *Math.random()) + "," + parseInt(255 * Math.random()) + ",1)"
			};
			arr.push(obj);
		}
	}
				
	//创建成对色块
	let newarr = [];//储存成对元素的数组
	function setDouble(){
		for (let i = 0; i < 2; i++) {
			for (let j = 0; j < arr.length; j++) {
				//解决传址问题
				let obj1 = {};
				for (let att in arr[j]) {
					obj1[att] = arr[j][att];
				}
				newarr.push(obj1);
			}
		}
	}
	
	//打乱并判断
	function reorder() {
		//执行打乱方法，并判断元素是否有至少一对相邻颜色相同的色块
		panduan: while (true) {
			daluan(newarr.length);
			for (let i = 0; i < newarr.length; i++) {
				if ((((i + 1) % 4 != 0) && (newarr[i].color == newarr[i + 1].color)) || ((i < 12) &&(newarr[i].color == newarr[i + 4].color)))
					break panduan;
			}
		}
	}
	
	function daluan(length) {
		//每次都在数组中随机找一个元素下标，与当前元素交换位置
		for (let i = 0; i < length; i++) {
			let index = parseInt(Math.random() * 1000) % length;
			let temp = newarr[i];
			newarr[i] = newarr[index];
			newarr[index] = temp;
		}
	}
	
	//绘制色块
	function initYuansu() {
		setYuansu(); //创建基本元素
		setDouble(); //创建成对元素
		reorder(); //打乱和判断
		drawYuansu(); //绘制元素
	}
	
	//画布点击事件
	canvas.onclick = function (e) {
		mx = e.pageX - this.offsetLeft;
		my = e.pageY - this.offsetTop;
		drawImg();
	}
	function drawImg() {
		cxt.clearRect(0, 0, 500, 500);
		for (let i = 0; i < newarr.length; i++) {
			// 进行消除判断以及重绘元素操作
		}
	}
	
	//自定义Event事件
	function Event(cxt, type, data, callback) {
		this.cxt = cxt;
		this.type = type;
		this.data = data;
		this.callback = callback;
		this.draw();
	}
	Event.prototype = {
		draw() {
			if (this.type == "rect") {
				let a = this.data.split(",");
				cxt.rect(a[0], a[1], a[2], a[3]);
				cxt.fill();
			}
		},
		add (mx, my) {
			//如果点击坐标在该路径中，则调用回调函数
			if (this.cxt.isPointInPath(mx, my))
				this.callback();
		}
	}
	
	function drawImg() {
		cxt.clearRect(0, 0, 500, 500);
		for (let i = 0; i < newarr.length; i++) {
			cxt.fillStyle = newarr[i].color;
			cxt.beginPath();
			let data = newarr[i].x + "," + newarr[i].y + "," + newarr[i].width + "," + newarr[i]. height;
			let event1 = new Event(cxt,"rect",data, () => {
				//回调函数内容 进行消除判断
			});
			event1.add(mx, my);
		}
	}
	
	
	
	//消除算法
	for (let ii = 0; ii < ((n - y) / 50) - 1; ii++) {
		//判断两色块之间是否通行
		if (newarr[index1 - (ii + 1) * 6].color !="rgba(0,0,0,0)") {
			return false;
		}
	}
	return true;
	
	function linePathFinding(x, y, m, n, index0, index1) {
		if (x == m) {
			if (n - y > 0) {
				for (let ii = 0; ii < ((n - y) / 50) - 1; ii++) {
					if (newarr[index1 - (ii + 1) * 6].color !="rgba(0,0,0,0)") {
						return false;
					}
				}
				return true;
			} else {
				for (let ii = 0; ii < ((y - n) / 50) - 1; ii++) {
					if (newarr[index0 - (ii + 1) * 4].color !="rgba(0,0,0,0)") {
						return false;
					}
				}
				return true;
			} }
		else if (y == n) {
			if (m - x > 0) {
				for (let ii = 0; ii < ((m - x) / 50) - 1; ii++) {
					if (newarr[index1 - (ii + 1)].color !="rgba(0,0,0,0)") {
						return false;
					}
				}
				return true;
			} else {
				for (let ii = 0; ii < ((x - m) / 50) - 1; ii++) {
					if (newarr[index0 - (ii + 1)].color !="rgba(0,0,0,0)") {
						return false;
					}
				}
				return true;
			}
		}
	}
	
	//无拐点
	function noPoint(x, y, m, n, index0, index1) {
		if (linePathFinding(x, y, m, n, index0, index1)) {
			return true;
		} else {
			return false;
		}
	}
	
	
	function getIndex(x, y, m, n, index) {
		if (x == m) {
			//如果是同列
			if (n - y > 0) {
				//如果(m,n)在(x,y)下面
				return index - (n - y) / 50 * 6;
			} else {
				//如果(m,n)在(x,y)上面
				return index + (y - n) / 50 * 6;
			}
		} else if (y == n) {
			//如果是同行
			if (m - x > 0) {
				//如果(m,n)在(x,y)右面
				return index - (m - x) / 50;
			} else {
				//如果(m,n)在(x,y)左面
				return index + (x - m) / 50;
			}
		}
	}
	
	//单拐点函数
	function onePoint(x, y, m, n, index0, index1) {
		if ((x == m) || (y == n)) {
			return false;
		}
		let indextemp = getIndex(m, y, m, n, index1);
		if (linePathFinding(m, y, m, n, indextemp, index1) && linePathFinding(x, y, m, y, index0, indextemp) && (newarr[indextemp].color =="rgba(0,0,0,0)")) {
			c = m;
			d = y;
			return true;
		} else {
			indextemp = getIndex(x, n, m, n, index1);
			if (linePathFinding(x, n, m, n, indextemp, index1) && linePathFinding(x, y, x,n, index0, indextemp) && (newarr[indextemp].color =="rgba(0,0,0,0)")) {
				c = x;
				d = n;
				return true;
			} else {
				return false;
			}
		}
	}
	
	function addSound() {
		let obj = {
			width: 50,
			height: 50,
			isBorder: true,
			x: 0, y: 0, color: "rgba(0,0,0,0)"
		}
		for (i = 0; i < 7; i++) {
			let obj1 = {};//解决传址问题
			for (let att in obj) {
				obj1[att] = obj[att];
			}
			newarr.push(obj1);
		}
		for (i = 0; i < 2; i++) {
			let obj1 = {};//解决传址问题
			for (let att in obj) {
				obj1[att] = obj[att];
			}
			newarr.splice(12, 0, obj1);
		}
		for (i = 0; i < 2; i++) {
			let obj1 = {};//解决传址问题
			for (let att in obj) {
				obj1[att] = obj[att];
			}
			newarr.splice(8, 0, obj1);
		}
		for (i = 0; i < 2; i++) {
			let obj1 = {};//解决传址问题
			for (let att in obj) {
				obj1[att] = obj[att];
			}
			newarr.splice(4, 0, obj1);
		}
		for (i = 0; i < 7; i++) {
			let obj1 = {};//解决传址问题
			for (let att in obj) {
				obj1[att] = obj[att];
			}
			newarr.splice(0, 0, obj1);
		}
	}
	
	
	function initYuansu() {
		setYuansu(); //创建基本元素
		setDouble(); //创建成对元素
		reorder(); //打乱和判断
		addSound(); //增加包围圈
		drawYuansu(); //绘制元素
	}
	
	function twoPoint(x, y, m, n, index0, index1) { //以(x,y)为终点，以(m,n)为起点，遍历起点四周
		if (newarr[index1 - 6].color =="rgba(0,0,0,0)") {//上
			if (canGo(index1 - 6, -6, x, y, index0)) {
				return true;
			}
		}
		if (newarr[index1 + 6].color =="rgba(0,0,0,0)") {//下
			if (canGo(index1 + 6, 6, x, y, index0)) {
				return true;
			}
		}
		if (newarr[index1 - 1].color =="rgba(0,0,0,0)") {//左
			if (canGo(index1 - 1, -1, x, y, index0)) {
				return true;
			}
		}
		if (newarr[index1 + 1].color =="rgba(0,0,0,0)") {//右
			if (canGo(index1 + 1, 1, x, y, index0)) {
				return true;
			}
		}
	}
	
	function canGo(indexz, temp, x, y, index0) {
		if (onePoint(newarr[indexz].x, newarr[indexz].y, x, y, indexz, index0)) {
			a = newarr[indexz].x;
			b = newarr[indexz].y;
			return true;
		} else {
			if (newarr[indexz].isBorder) {
				return false;
			} else {
				indexz = indexz + temp;
				if (newarr[indexz].color =="rgba(0,0,0,0)") {
					canGo(indexz, temp, x, y, index0);
				} else {
					return false;
				}
			}
		}
	}
	
	
	
	let event1 = new Event(cxt,"rect",data, () => {
		if (i == bindex[0]) {
			return;
		}
		barr.push(newarr[i]);
		bindex.push(i)
		if (barr.length == 2) {
			if (barr[0].color == barr[1].color&& bindex[0] != bindex[1]) {
				let x = barr[0].x;
				let y = barr[0].y;
				let m = barr[1].x;
				let n = barr[1].y;
				let index0 = bindex[0];
				let index1 = bindex[1];
				if ((x == m) || (y == n)) {
					if (noPoint(x, y, m, n, index0,index1)) {
						strokeLine0(x, y, m, n);
						window.setTimeout(() => {
							myinit();
						}, 500);
					} else if (twoPoint(x, y, m, n,index0, index1)) {
						strokeLine2(m, n, x, y, a, b, c, d);
						window.setTimeout(() => {
							myinit();
						}, 500);
					} else {
						barr = [];
						bindex = [];
					}
				} else {
					if (onePoint(x, y, m, n, index0, index1)) {
						strokeLine1(x, y, m, n, c, d);
						window.setTimeout(() => {
							myinit();
						}, 500);
					} else if (twoPoint(x, y, m, n, index0, index1)) {
						strokeLine2(m, n, x, y, a, b, c, d);
						window.setTimeout(() => {
							myinit();
						}, 500);
					} else { barr = [];
							bindex = [];
						   }
				}
			} else { barr = [];
					bindex = [];
				   }
		}
	}
						  );
	
	
	function myinit() {
		//设置透明，重绘画布
		barr[0].color ="rgba(0,0,0,0)";
		barr[1].color ="rgba(0,0,0,0)";
		drawImg();
		barr = [];
		bindex = [];
	}
	
	
	function strokeLine0(x, y, m, n) {
		cxt.beginPath();
		cxt.strokeStyle ="blue";
		cxt.lineWidth = 5;
		cxt.moveTo(x + 25, y + 25);
		cxt.lineTo(m + 25, n + 25);
		cxt.stroke();
	}
	
	function strokeLine1(x, y, m, n, a, b) {
		cxt.beginPath();
		cxt.strokeStyle ="blue";
		cxt.lineWidth = 5;
		cxt.moveTo(x + 25, y + 25);
		cxt.lineTo(a + 25, b + 25);
		cxt.lineTo(m + 25, n + 25);
		cxt.stroke();
	}
	
	function strokeLine2(x, y, m, n, a, b, c, d) {
		cxt.beginPath();
		cxt.strokeStyle ="blue";
		cxt.lineWidth = 5;
		cxt.moveTo(m + 25, n + 25);
		cxt.lineTo(c + 25, d + 25);
		cxt.lineTo(a + 25, b + 25);
		cxt.lineTo(x + 25, y + 25);
		cxt.stroke();
	}
	
	function allwhite() {
		for (let m = 0; m < newarr.length; m++) {
			if (newarr[m].color !="rgba(0,0,0,0)") {
				return false;
			}
		}
		return true;
	}
	
	function drawImg() {
		if (allwhite()) {
			alert("好吧，你赢了");
		}
		
	}
	
</script>
</body>
</html>
jujiawu1024

消息循环和消息映射在C++ 6.0中的区别是什么？

3条回答

为你推荐
