html5写的简单的连连看（植物大战僵尸版）
接下来又学习了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>
以下是运行结果：
当点击两张相同的小图片时，这两张图片会消失，同时会响起“植物大战僵尸”游戏特有的音效，右侧有计时和所得分数。
这其实并不能算真正意义上的连连看，因为相隔很远的两张图片不管之间有没有障碍物，依旧可以配对成功。其中的算法还有待研究啊！