HTML5使用canvas制作一个简单的消消乐游戏

一、最终完成结果

二、过程

1. 绘制10*10方格图片，canvas宽高设置为480，并填充背景颜色，核心代码如下：

			var can = document.getElementById('mycanvas');
			var ctx = can.getContext('2d');
			var colors = ['red', 'green', 'blue', 'gray', 'yellow', 'orange'];
			var imgs = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png', 'img/5.png', 'img/6.png'];
			var nums = new Array(10);
			
			initArrays();//初始化数组
			drawBack();//绘制背景颜色及图片

			//数组初始化
			function initArrays() {
				for(var i = 0; i < 10; i++) {
					nums[i] = new Array(10);
				}
			}
			//背景颜色填充
			function drawBack() {
				ctx.beginPath();
				for(var i = 0; i < 10; i++) {
					for(var j = 0; j < 10; j++) {
						var num = parseInt(Math.random() * 6.0);
						nums[i][j] = num;
						ctx.fillStyle = colors[num];
						ctx.fillRect(48 * i, 48 * j, 48, 48);
						var img = new Image();
						img.src = imgs[num];
						getImg(img, 48 * i, 48 * j);
					}
				}
				ctx.closePath();
			}
			//图片绘制
			function getImg(img, x, y) {
				img.onload = function() {
					ctx.drawImage(img, x, y, 48, 48);
				}
			}

2. 图片绘制完成后，需要设置成鼠标单击图片，清除与之相连的相同图片，核心代码如下：

			var count = 0;
			
			can.onmousedown = function(e) {//此处can为js获取的canvas对象，详见上面代码
				var x = parseInt(e.offsetX / 48);
				var y = parseInt(e.offsetY / 48);
				count = 0;
				if(counttime > 1){
					clearSome(x, y, x, y, nums[x][y]);
				}
			}
			
			function clearSome(x, y, m, n, num) {
				/*console.log(m);
				console.log(nums[m][n]);*/
				if(nums[m][n] != num || nums[m][n] == -1) {
					return;
				}
				count++;
				if(m > 0 && m-1 != x) {
					x = m;
					clearSome(x, y, m - 1, n, num);
				}
				if(m < 9 && m + 1 != x) {
					x = m;
					clearSome(x, y, m + 1, n, num);
				}
				if(n < 9 && n + 1 != y) {
					y = n;
					clearSome(x, y, m, n + 1, num);
				}
				if(n > 0 && n - 1 != y) {
					y = n;
					clearSome(x, y, m, n - 1, num);
				}
				if(count > 1){
					ctx.clearRect(48 * m, 48 * n, 48, 48);
					nums[m][n] = -1;
				}
			}

3. 上述代码执行后，即可完成一个简单的消消乐游戏，单击某一图片即可消除与之相连的相同图片。