考验记忆力的翻牌小游戏

来源：互联网发布：c语言中什么时候用void 编辑：程序博客网时间：2024/04/30 20:40
考验记忆力的翻牌小游戏，主要运用到 setTimeout ,在匹配失败后反转牌面。使用index参数记录翻开第一张牌的索引，与第二张翻开牌对比。
<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 onload="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>
0 0