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

来源：互联网发布：php substr 中文乱码编辑：程序博客网时间：2024/04/29 10:56

接下来又学习了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){//Firefoxmx=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>

以下是运行结果：

当点击两张相同的小图片时，这两张图片会消失，同时会响起“植物大战僵尸”游戏特有的音效，右侧有计时和所得分数。

这其实并不能算真正意义上的连连看，因为相隔很远的两张图片不管之间有没有障碍物，依旧可以配对成功。其中的算法还有待研究啊！