记忆翻牌游戏介绍,翻牌记忆游戏技巧
翻开的2张牌如果配对就会消除，否则2张牌都会返回背面。需求分析
怎么绘制正的牌面和背的牌面及配对成功后怎么消除牌面
怎么生成牌组并且确定每张牌的位置和对应的图片
怎么洗牌
怎么记录牌组的配对信息
怎么确定点击事件是第一次点击还是第二次点击
作弊事件的处理：两次点击同一张牌点击已经消除的牌面点击牌面之外的区域
牌翻开之后需要给一定时间让玩家看清楚，怎么实现暂停
鼠标点击事件的响应及获得鼠标点击位置的坐标从而确定点击的是哪一张牌MYCode:复制代码代码如下：
html xmlns= http://。w3。 org/1999/XHTML
头
meta charset=utf-8 /
标题测试/标题
脚本类型=文本/javascript
var ctx
定义变量画布；
定义变量卡；
var first _ pick=true//第一次点击的标志
var first _ card=-1；
定义变量秒_卡；
var back_color=rgb(255，0，0)；//卡片背面颜色
var table _ color= # FFF ；
var deck=[]；//注意
var first _ x=10
var first _ y=50
var毛利=30
var卡_宽度=50
var卡_高度=50
定义变量对=[
[1_a.jpg ， 1_b.jpg]，
[2_a.jpg ， 2_b.jpg]，
[3_a.jpg ， 3_b.jpg]，
[4_a.jpg ， 4_b.jpg]，
[5_a.jpg ， 5_b.jpg]
];
函数draw_back()//绘制卡片背面
{
ctx.fillStyle=back _ color
ctx.fillRect(this.sx，this.sy，this.swidth，this。她打架)；
}
功能卡(sx，sy，swidth，sheight，img，info)//构造函数
{
this.sx=sx
这. sy=sy
this.swidth=swidth
this.sheight=sheight
this.info=info
this.img=img
this.draw=draw _ back
}
函数make_deck()//生成卡组并绘制
{
var I；
var a _卡
var b _ card
变量a _ pic
var b _ pic
var CX=first _ x；
var cy=first _ y；
for(I=0；我对。长度；我)
{
a _ pic=new Image()；
a _ pic。src=pairs[I][0]；
a_card=新卡(cx，cy，card_width，card_height，a_pic，I)；
甲板。推送(a _卡)；
b _ pic=new Image()；
b _ pic。src=pairs[I][1]；
b卡=新卡(cx，cy card_height margin，card_width，card_height，b_pic，I)；
甲板。推送(b卡)；
cx=cx卡_宽度边距；//注意
a卡。draw()；
b卡。draw()；
}
}
函数shuffle()//洗牌
{
var I；
var j；
变量温度信息
var temp _ img
var deck_length=deck。长度；
var k；
for(k=0；k3 *甲板_长度；k)
{
I=数学。地板(数学。random()* deck _ length)；
j=数学。地板(数学。random()* deck _ length)；
temp_info=deck[i].信息；
temp_img=deck[i].图片
甲板[我].info=deck[j].信息；
甲板[我].img=deck[j].图片
甲板[j]的缩写.信息=临时信息；
甲板[j]的缩写.img=temp _ img
}
}
功能选择
{
//var out；
var mx
var my
//var pick 1；
//var pick 2；
var I；
//注意
如果(ev。layerx ev。layerx==0){//Firefox
mx=ev.layerX
my=ev.layerY
} else if(ev。offsetx ev。offsetx==0){//Opera
mx=ev.offsetX
我的=ev。关闭sety
}
for(I=0；甲板长度；我)
{
card=deck[I]；
if (card.sx=0)//牌未被消除
{
//判断点击的是哪一张牌
如果(MX卡。sx MX卡。sx卡。刷了我的卡。塞我的名片。sy卡。她身高)
{
如果（我！=first_card)//如果两次点击同一张牌不做处理
打破；
}
}
}
如果（甲板长度)
{
if (first_pick)//如果是第一次点击
{
first _ card=I；
first _ pick=false//注意
ctx.drawImage(card.img，card.sx，card.sy，card.swidth，card。sheight)；
}
其他
{
first _ pick=true//注意
second _ card=I；
ctx.drawImage(card.img，card.sx，card.sy，card.swidth，card。sheight)；
tid=setTimeout(flip_back，1000)；
}
}
}
函数flip_back()
{
if (card.info==deck[first_card].信息)//配对成功
{
ctx.fillStyle=table _ color
ctx.fillRect(deck[first_card].sx，deck[first_card].sy，deck[first_card].一副牌.sheight)；
ctx.fillRect(deck[second_card].sx，甲板[秒_卡]。sy，deck[second_card].一副牌.sheight)；
甲板[第一张牌].sx=-1；
副牌. sy=-1；
first _ card=-1；
}
其他
{
甲板[第一张牌].draw()；
副牌. draw()；
first _ card=-1；
}
}
函数初始化()
{
画布=文档。getelementbyid(“canvas”)；
canvas.addEventListener(click ，choose，false)；
CTX=画布。获取上下文(“2d”)；
make _ deck()；
shuffle()；
}
/脚本
/头
body onLoad= init()；
canvas id= canvas width= 400 height= 400 /
123142
/body
/html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。