html5写的简单的连连看（植物大战僵尸版）

最新推荐文章于 2025-04-22 14:12:47 发布

SherryWang0622

最新推荐文章于 2025-04-22 14:12:47 发布

阅读量7.8k

点赞数 1

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/supersnow0622/article/details/8563111

版权

Web 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何使用 HTML5 的 canvas 标签实现一个简单的连连看游戏，包括游戏界面设置、图片随机排列、点击事件处理、匹配逻辑、计时与得分显示等关键功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接下来又学习了html5，其实主要练习的是html5的canvas，下面是用基于html5的canvas标签写的连连看游戏。

<!DOCTYPE html>
<meta charset="utf-8">
<script>
var cwidth=120;//画布的宽
var cheight=600;//画布的高
var firstpick=true;//是否是第一次挑选
var firstPic=-1//选出的第一张图片序号
var secondPic;//选出的第二张图片序号
var tablecolor="rgb(255,255,255)";//页面颜色
var firstpicx=200;//第一张图片x坐标
var firstpicy=50;//第一张图片y坐标
var picwidth=50;//图片宽
var picheight=50;//图片高
var pic=[];//存放图片的数组
var matched;//第一张和第二张图片是否匹配
var num=45;//匹配对数
var context;
var tid;
var music;//点击时所播放的音乐
var starttime;//记录游戏开始时间
var scores=0;//记录得分
var time;//记录游戏已经用过的时间
var award=[["5xing.png"],["4xing.png"],["3xing.png"],["2xing.png"],["1xing.png"]];
function Card(picx,picy,picw,pich,img,picindex,code){//code属于图片，而picindex属于位置
	this.picx=picx;
	this.picy=picy;
	this.picw=picw;
	this.pich=pich;
	this.img=img;
	this.picindex=picindex;
	this.draw=drawPic;
	this.code=code;
	}
function drawPic(){
	context.drawImage(this.img,this.picx,this.picy,this.picw,this.pich);
}
function makepic(){
	var picture;
	var image;
	var px=firstpicx;
	var py=firstpicy;
	for(var i=1;i<=45;i++){
		if(px>firstpicx+450){
			px=firstpicx;
			py+=50;
			}
	  image=new Image();
	  image.src=i+".png";
	  picture=new Card(px,py,picwidth,picheight,image,2*i-1,i);
	  pic.push(picture);
	  px+=50;
	  image.src=i+".png";
	  picture=new Card(px,py,picwidth,picheight,image,2*i,i);
	  pic.push(picture);
	  px+=50;
	}
}
function shuffle(){
  var i; 
  var k
  var holderindex;
  var holderimage;
   for(var n=0;n<3*pic.length;n++)
	{
	  i=Math.floor(Math.random()*pic.length);
	  k=Math.floor(Math.random()*pic.length);
	  holderindex=pic[i].code;
	  holderimage=pic[i].img;
	  pic[i].code=pic[k].code;	
	  pic[i].img=pic[k].img;
	  pic[k].code=holderindex;
	  pic[k].img=holderimage;
	} 
   for(var n=0;n<pic.length;n++){
	   pic[n].draw();
	   }
}
function  choose(ev){
	var mx;
	var my;
	//取得鼠标点击位置的坐标
	if(ev.layerX||ev.layerX==0){//Firefox
		mx=ev.layerX;
		my=ev.layerY;
	}else if(ev.offsetX||ev.offsetX==0){
		mx=ev.offsetX;
		my=ev.offsetY;
		}
	//检查哪一张图片被点击了
	var i;
	for(i=0;i<pic.length;i++){
	   if(pic[i].picx>0)//pic[i]=-1说明此处的图片已完成配对
		if((mx>=pic[i].picx)&&(mx<=pic[i].picx+picwidth)&&(my>=pic[i].picy)&&(my<=pic[i].picy+picheight))   
		   if((firstpick)||i!=firstPic)
		      break;
	}
	if(i<pic.length){
		if(firstpick)//如果是选的第一张
		{
		  firstPic=i;	
		  firstpick=false;
		}
		else{//如果是选的第二张
			 secondPic=i;
			 if(pic[i].code==pic[firstPic].code){
				 matched=true;
				 
				 }
			else{
				 matched=false;
				}
				firstpick=true;
			 setTimeout(flipback,100);
			}
		
		}
	}
function flipback() {
	if (matched) {
			     music.play();
				 scores++;
				 context.font="bold 35px comic sans ms";
	             context.fillStyle="#F00";//实体字的颜色
	             context.clearRect(935,350,100,100);
	             context.fillText(scores,950,380);	
				 context.clearRect(pic[secondPic].picx,pic[secondPic].picy,picwidth,picheight);
			     context.clearRect(pic[firstPic].picx,pic[firstPic].picy,picwidth,picheight);
				 pic[firstPic].picx=-1;
				 pic[secondPic].picx=-1;	
				 if(scores==45){
					 context.clearRect(200,150,500,500); 
					
					 var awardstar=new Image();
					 if(time<=90){
					  awardstar.src=award[0];
					  context.drawImage(awardstar,30,200,790,150);	
					 
						 }
					 else if(time<=120){
						 awardstar.src=award[1];
						 context.drawImage(awardstar,0,200,780,150);					 
						 }
					 else if(time<=180){
						 awardstar.src=award[2];
						 context.drawImage(awardstar,0,200,780,150);	
						 						 }
				     else if(time<=240){
						awardstar.src=award[3];
						 context.drawImage(awardstar,0,200,780,150);		 
							 }	 
					 else if(time<=300){
						 awardstar.src=award[4];
						 context.drawImage(awardstar,0,200,780,150);					 
						 }
					 else{
						  context.font="bold 50px comic sans ms";
	                      context.fillStyle="#F00";//实体字的颜色
	                      context.fillText("You are too slow!Come On!",0,200);	 					 
						 }
						 
						 return;
					 }
	}
}
function GetTime(){
	var endtime=new Date();
    time=Math.floor((endtime-starttime)/1000+0.5);	
	context.font="bold 35px comic sans ms";
	context.fillStyle="#ccc";//实体字的颜色
	context.clearRect(935,250,100,100);
	context.fillText(time,950,300);	
	if(scores==45){
	  clearInterval(tid);
	}
	}
function drawText(){
	context.font="bold 50px comic sans ms";
	context.fillStyle="#F00";
	context.fillText("连连看",800,100);
	context.font="bold 35px comic sans ms";
	context.strokeStyle="#666";//空心字的颜色
	context.strokeText("TIMES:",800,300);
	context.strokeText("SCORES:",780,380);
	}
function init(){
	context=document.getElementById("canvas").getContext("2d");
	drawText();
	canvas1 = document.getElementById('canvas');
    canvas1.addEventListener('click',choose,false);
	makepic();
	shuffle();
	music = document.getElementById("music");
	starttime=new Date();
	GetTime();
	tid=setInterval(GetTime,1000,false);
	}
</script>
<html>
<body onLoad="init()"> 
<canvas id="canvas" width="1200" height="600">
Your brower doesn't support the canvas.
</canvas>
<audio id="music" autobuffer>
<source  src="awooga.ogg" />
</audio>
</body>
</html>

以下是运行结果：