<!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>
转载于:https://www.cnblogs.com/diligenceday/p/3470349.html
相关资源：html5记忆力游戏
