<!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{ 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>