考验记忆力的翻牌小游戏
考验记忆力的翻牌小游戏，主要运用到 setTimeout ,在匹配失败后反转牌面。使用index参数记录翻开第一张牌的索引，与第二张翻开牌对比。html
<html>
<head>
<title>翻牌游戏</title>
<script>
var ctx;
var bkcolor = "rgb(211, 33, 204)";
var frontcolor = "rgb(31, 232, 131)";
var mapcolor = "rgb(129, 63, 195)";
var cwidth = 100;
var cheight = 150;
var margin =20;
var rad = 40;
var pstime=0;
var position=[];
var deck=[];
var index=[];
var match=0;
var clk=0;
var tid;
//得到 position
function pos(){
var i;
var j;
for(i=10;i<400;i=i+cwidth+margin){
for(j=10;j<400;j=j+cheight+margin){
position.push([i,j]);
}
}
}
//牌定义
function Card(cx,cy,n){
this.cx = cx;
this.cy = cy;
this.checked = false;
this.msg = n;
this.draw = drawcard;
this.isdelete = false;
}
function drawcard(){
if(this.checked==false && this.isdelete==false){
ctx.fillStyle = bkcolor;
ctx.fillRect(this.cx,this.cy,cwidth,cheight);
}
else{
ctx.fillStyle = frontcolor;
ctx.fillRect(this.cx,this.cy,cwidth,cheight);
if(this.msg==3) ctx.fillStyle="rgb(223, 237, 50)";
if(this.msg==4) ctx.fillStyle="rgb(43, 206, 227)";
if(this.msg==5) ctx.fillStyle="rgb(129, 63, 195)";
if(this.msg==6) ctx.fillStyle="rgb(209, 147, 46)";
if(this.msg==7) ctx.fillStyle="rgb(229, 23, 229)";
if(this.msg==8) ctx.fillStyle="rgb(239, 26, 84)";
var angle = (2*Math.PI)/this.msg;
var vx = this.cx + cwidth/2;
var vy = this.cy + cheight/2;
ctx.beginPath();
ctx.moveTo(vx,vy);
var i;
for (i=1;i<(this.msg+2);i++){
ctx.lineTo(vx+rad*Math.cos(i*angle),vy-rad*Math.sin(i*angle));
}
ctx.fill();
}
if(this.isdelete){
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(this.cx,this.cy,cwidth,cheight);
}
}
//得到牌组
function makedeck(){
pos();
var i;
var count=0;
for(i=3;i<9;i++){
po = position[count];
var cd1 = new Card(po[0],po[1],i);
deck.push(cd1);
count++;
po = position[count];
var cd2 = new Card(po[0],po[1],i);
deck.push(cd2);
count++;
}
shuffle();
}
//洗牌
function shuffle(){
var dl = deck.length;
var i;
for(i=0;i<3*dl;i++){
var cd1 = Math.floor(Math.random()*dl);
var cd2 = Math.floor(Math.random()*dl);
var temp = deck[cd1].msg;
deck[cd1].msg = deck[cd2].msg;
deck[cd2].msg = temp;
}
}
//绘制全部
function drawall(){
var i;
for(i=0;i<deck.length;i++){
deck[i].draw();
}
}
//翻牌
function choose(ev){
var mx;
var my;
if(ev.layerX || ev.layerX==0){
mx = ev.layerX;
my = ev.layerY;
}
if(ev.offsetX || ev.offsetX==0){
mx = ev.offsetX;
my = ev.offsetY;
}
var i;
for(i=0;i<deck.length;i++){
var cd = deck[i];
if((cd.isdelete==false) && (mx>=cd.cx) && (mx<=(cd.cx+cwidth)) && (my>=cd.cy) && (my<=(cd.cy+cheight))){
deck[i].checked = true;
drawall();
if(index.length==0){
index[0]=i;
clk++;
document.f.ck.value = clk;
}
else if(i != index[0]){
clk++;
document.f.ck.value = clk;
if(deck[i].msg == deck[(index[0])].msg){
deck[i].isdelete = true;
deck[(index[0])].isdelete = true;
index=[];
match++;
if(match!=6)
setTimeout(drawall,500);
}
else{
deck[i].checked = false;
deck[(index[0])].checked =false;
index=[];
setTimeout(drawall,500);
}
}
}
}
if(match==6){
ctx.fillStyle = "rgb(195, 28, 188)";
ctx.fillRect(0,0,485,500);
ctx.fillStyle = "rgb(255,255,255)";
ctx.font="40px Arial";
ctx.fillText("YOU WIN!",140,255);
clearInterval(tid);
}
}
function timing(){
pstime++;
document.f.tm.value = pstime;
}
function init(){
ctx=document.getElementById('canvas').getContext('2d');
makedeck();
drawall();
canvas1 = document.getElementById('canvas');
canvas1.addEventListener('click',choose,false);
tid = setInterval("timing();",1000);
}
</script>
</head>
<body οnlοad="init();">
<p>点击翻牌</p>
<canvas id="canvas" width="485" height="510"></canvas>
<br/>
<form id="f" name="f">
点击次数<input id="ck" name="ck" value="0"/>
<br/>
用时(s)<input id="tm" name="tm" value="0"/>
</form>
</body>
</html>
