html5_canvas-记忆力卡片游戏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pock_game</title>
</head>
<body>
<style>
form{
    width:330px;
    margin:20px;
    background-color:pink;
    padding:20px;
}
input{
    text-align:right;
}
</style>
<canvas id="canvas" width="1000" height="400"></canvas>
<script>
var ctx = document.getElementById('canvas').getContext('2d'),
    firstpick = true,
    firstcard,
    secondcard,
    fontbgcolor = "rgb(251,215,73)",
    polycolor = "rgb(254,11,0)",
    backcolor = "rgb(128,0,128)",
    tablecolor = "rgb(255,255,255)",
    cardrad = 30,
    deck = [],
    firstsx = 30,
    firstsy = 50,
    margin = 30,
    cardwidth = 4*cardrad,
    cardheight = 4*cardrad,
    matched,
    starttime;
function Card(sx, sy, swidth, sheight, info){
    this.sx = sx;
    this.sy = sy;
    this.swidth = swidth;
    this.sheight = sheight;
    this.info = info;
    this.draw = drawback;
};
function makedeck(){
    var i;
    var acard;
    var bcard;
    var cx = firstsx;
    var cy = firstsy;
    for(i=3; i<9; i+=1){
        acard = new Card(cx, cy, cardwidth, cardheight, i);
        deck.push( acard );
        bcard = new Card(cx, cy+cardwidth+margin, cardwidth, cardheight, i);
        deck.push( bcard );
        cx = cx + cardwidth + margin;
        acard.draw();
        bcard.draw();
    };
    shuffle();
};
function shuffle(){
    var i;
    var k;
    var holder;
    var dl = deck.length;
    var nt;
    for(nt=0; nt<3*dl; nt++){
        i = Math.floor( Math.random()*dl );
        k = Math.floor( Math.random()*dl );
        holder = deck[i].info;
        deck[i].info = deck[k].info;
        deck[k].info = holder;
    };
};
function Polycard(sx, sy, rad, n){
    this.sx = sx;
    this.sy = sy;
    this.rad = rad;
    this.draw = drawpoly;
    this.n = n;
    this.angle = (2*Math.PI)/n;
};
function drawpoly(){
    ctx.fillStyle = fontbgcolor;
    ctx.fillRect(this.sx - 2*this.rad, this.sy - 2* this.rad, 4*this.rad, 4*this.rad)
    var i;
    var rad = this.rad;
    document.title = this.n;
    //ctx.moveTo(this.sx+rad*Math.cos(-0.5*this.angle, this.sy+rad*Math.sin(-0.5*this.angle)))
    //for(i=0; i<this.n; i++){
    //    ctx.lintTo(this.sx + rad*Math.cos((i-0.5)*this.angle),this.sy+rad*Math.sin(i-0.5*this.angle));
    //};
    //ctx.fill();
};
function drawback(){
    ctx.fillStyle = backcolor;
    ctx.fillRect(this.sx, this.sy, this.swidth, this.sheight);
};
function choose(ev){
    var mx;
    var my;
    var pick1;
    var pick2;
    if(ev.layerX || ev.layerX==0){
        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<deck.length; i++){
        var card =deck[i];
        if(card.sx >= 0){
            if((mx > card.sx)&&(mx<card.sx+card.swidth)&&(my>card.sy)&&(my<card.sy+card.sheight)){
                if((firstpick) || (i!=firstcard))break;
            };
        };
    };
    //如果是全部循环完毕了，那么i就等于deck的length了，所以就不会走里面了;
    //for +  break 是一种挺好的写法;
    if(i<deck.length){
        if(firstpick){
            firstcard = i;
            firstpick = false;
            pick = new Polycard(card.sx + cardwidth*0.5,card.sy+cardheight*0.5,cardrad,card.info)
            pick.draw();
        }else{
            secondcard = i;
            pick2 = new Polycard(card.sx+cardwidth*0.5,card.sy+cardheight*0.5,cardrad,card.info);
            pick2.draw();
            if( deck[i].info == deck[firstcard].info ){
                matched = true;
                var nm = 1 + Number(document.f.count.value);
                document.f.count.value = nm;

                if(nm >= 0.5*deck.length){
                    var now = (new Date()).getTime();
                    alert( (now-starttime)/1000 );
                }
            }else{
                matched = false;
            };
            firstpick = true;
            setTimeout(flipback,1000);
        }
    };
};
function flipback(){
    if(!matched){
        deck[firstcard].draw();
        deck[secondcard].draw();
    }else{
        ctx.fillStyle = tablecolor;
        ctx.fillRect(deck[secondcard].sx,deck[secondcard].sy,deck[secondcard].swidth,deck[secondcard].sheight);
        ctx.fillRect(deck[firstcard].sx,deck[firstcard].sy,deck[firstcard].swidth,deck[firstcard].sheight);
        deck[firstcard].sx = -222;
        deck[secondcard].sx = -222;
    }
};
function init(){
    ctx = document.getElementById('canvas').getContext('2d');
    canvas1 = document.getElementById('canvas');
    canvas1.addEventListener('click',choose,false);
    makedeck();
    starttime = (new Date()).getTime();
};
init();
</script>
<form name="f" id="f">
<input type="text" name="count" id="count" />
</form>
</body>
</html>