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 kvar 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>

以下是运行结果：

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

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

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

如何用python简单做一个植物大战僵尸源码
简单实现的植物大战僵尸我自己网上扣了王校长的图做了个热狗射手hhhhhhhh最后面给大家分享一下我扣的热狗png图片求点赞!!!""" v1.81.完善僵尸类2.加载僵尸 ...
合金弹头java视频_Java swing实现的仿植物大战僵尸版合金弹头游戏源码附带视频指导教程...
<p> <span style="font-family:微软雅黑;font-size:16px;color:#555555;line-height:2;"> ...
[Unity2D入门教程]简单制作仿植物大战僵尸游戏之①搭建场景
布置场景: 众所周知,植物大战僵尸非常好玩,所以我们来制作一款类似的,名字就叫Glitch Garden. 布置场景需要用到很多素材,这里我们在GitHub中找到一位老师的素材并把需要的导入到proj ...
HTML5写的简单小游戏-绵羊快跑
为什么80%的码农都做不了架构师?>>> 用HTML5仿一款灵敏测试的flash小游戏程序: 完整程序在我博客:http://meego123.net/post-61.html ...
[Unity2D入门教程]简单制作仿植物大战僵尸游戏之②搭建游戏场景+制作动画
布置场景: 我们首先要创建一个新场景就叫level1, 我们在project面板中找到这张图我们在新建的Canvas上创建一张background把这张拖进去点击Set Native Size 然后 ...
[Unity2D入门教程]简单制作仿植物大战僵尸游戏之⑤制作更多的敌人Attacker以及防御者Defender
制作更多的Defender: 之前我们创建了一个向日葵和一个仙人掌,今天我们多创建两个首先是一个老头Gnome,我们让它的功能和仙人掌一样,所以我会尽量快点讲完, 需要给它三个脚本Defender, ...
写一段植物大战僵尸的代码用Python
好的,我可以用 Python 写一段代码模拟植物大战僵尸的游戏.我们可以使用一个二维列表来存储游戏场地上的每一个单元格,并使用字符来表示每个单元格上的内容,例如 "P" 表示植物, ...
PC休闲游戏~植物大战僵尸-植物连连看v1.0正式发布啦（更新iPhone版本）！
11.29: 又稍微花了一些时间制作了HD的iPad版本,不过提交app store审核失败了,侥幸看来真的只有一次啊 -增加计分(done) -增加关卡选择(done) 6.14: 看到卖的很悲惨, ...
用Java写一个植物大战僵尸简易版！
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | https://urlify.cn/byeEj ...

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

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

最新文章

热门文章