canvas与js简单实现图片消消乐

介绍

在canvas画布上随机排列一个10*10的地图

点击任意一张图片，与之同一行或同一列将被消去

地图初始化

Html

<div id="container">
   <canvas id="canvas" width="400px" height="400px"></canvas>
   <div id="score">score:<span id="show" style="color: #FF0000;">0</span></div>
   <button id="again">Play again</button>
</div>

Css

body{
	background-color: aliceblue;
   }	
	#container {   
			height:400px;
		    width: 400px;   
			background-color: white;
			position: relative; 
			border: 1px solid red;
		}		
	 button{
		width:100px;
		height: 30px;
		background-color: royalblue;
	    border-radius: 5px;
	 }
		 
	 #score{
		margin:5px 0 5px 0;
	}

地图初始化
1、用数组去每一个位置的图片情况

var canvas = document.getElementById('canvas');
		var containner = document.getElementById('container');
		var show=document.getElementById('show');
		var again=document.getElementById('again');
		var ctx = canvas.getContext('2d');
		var width = ctx.canvas.width;
		var height = ctx.canvas.height;
		var path=[];
		var k=0;
		var flag=false;
		var imgs=[];
		var score=0;
		
			      
		 for(var i=0;i<6;i++){
		      var img=new Image();
			  img.src="img/"+(i+1)+".png";
			  imgs.push(img);
		}
				  
		 window.onload = function(){
		          draw();					
		 }	       
	
		 function draw(){
			 for(var i=0;i<400;i=i+40){
			 	for(var j=0;j<400;j=j+40){
				var a=Math.floor(Math.random()*6);
				path[k++]=a;  //记录图片信息
				ctx.drawImage(imgs[a],j,i,40,40);
		      }
		    }
		 }

图片消去与计分

2、点击图片，获取其相对于浏览器的坐标
3、用点击的图片与path进行遍历（值为-1的跳过），获取其同一行、同一列相同的图片，消去。同时，把消去的图片在path中标记为-1。

//消图
     containner.onclick=function(e){
		   var x=Math.ceil(e.clientY/40)-1;  //拿到点击的坐标
		   var y=Math.ceil(e.clientX/40)-1;
		   var dic=x*10+y;
		   var begin=x*10;
				
			if(path[dic]==-1){
				alert("图片已被消除")
				return;
			}
			for(var i=begin;i<begin+10;i++){
				  
			  if(path[i]==path[dic]){   //对比图片路径进行消除
                       if(path[i]!=-1){
					    score+=1;
						ctx.beginPath();
						ctx.clearRect(40*(i%10),40*x,40,40);
						ctx.stroke();
						if(i!=dic){
							path[i]=-1;  //标记为清除
						}
						}
					}
				 }
				 
		    begin=y;
			for(var i=y;i<100;i=i+10){
				if(path[i]==path[dic]){   //对比图片路径进行消除
					  if(path[i]!=-1){
					    score+=1;
				 	  ctx.beginPath();
				 	ctx.clearRect(40*y,40*parseInt(i/10),40,40);
				 	ctx.stroke();
					path[i]=-1;
				}
				}
			 }
				  score-=1; //消除横、竖排重复部分
				  show.innerHTML=score;
				
		        };	
	again.onclick=function(){
		window.location="index.html";
	}