首页 > 作文

html5记忆翻牌游戏实现思路及代码

更新时间:2023-04-06 17:09:00 阅读: 评论:0

翻开的2张牌如果配对就会消除,否则2张牌都会返回背面。

需求分析

怎么绘制正的牌面和背的牌面及配对成功后怎么消除牌面
怎么生成牌组并且确定每张牌的位置和对应的图片

怎么洗牌
怎么记录牌组的配对信息
怎么确定点击事件是第一次点击还是第二次点击

作弊事件的处理:两次点击同一张牌 点击已经消除的牌面 点击牌面之外的区域
牌翻开之后需要给一定时间让玩家看清楚,怎么实现暂停

鼠标点击事件的响应及获得鼠标点击位置的坐标从而确定点击的工程机械销售是哪一张牌

mycode:

复制代码 代码如下:

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta chart=”两情若是久长时utf-8″ />

<title>test </title>

<script type=”text/javascript”>

var ctx;

var canvas;

var card;

var first_pick = true; //第一次点击的标志

var first_card = -1;

var cond_card;

var back_color = “rgb(255,0,0)”; //卡片背面颜色

var table_color = “#fff”;

var deck = []; //note

var first_x = 10;

var first_y = 50;

var margin = 30;

var card_width = 50;

var card_height = 50;

var pairs = [

[“1_a.jpg”, “1_b.jpg”],

[“2_a.jpg”, “2_b.jpg”],

[“3_a.jpg”, “3_b.jpg”],

[“4_a.jpg”我爱冬季500字, “4_b.jpg”],

[“5_a.jpg”, “5_b.jpg”]

];

function draw_back()//绘制卡片背面

{

ctx.fillstyle = back_color;

ctx.fillrect(this.sx, this.sy, this.swidth, this.sheight);

}

function card(sx, sy, swidth, sheight, img, info)//构造函数

{

this.sx = sx;

this.sy = sy;

this.swidth = swidth;

this.sheight = sheight;

this.info = info;

this.img = img;

this.draw = draw_back;

}

function make_deck()//生成卡组并绘制

{

var i;

var a_card;

var b_card;

var a_pic;

var b_pic;

var cx = first_x;

var cy = first_y;

for (i = 0; i < pairs.length; i++)

{

a_pic = new image();

a_pic.src = pairs[i][0];

a_card = new card(cx, cy, card_width, card_height, a_pic, i);

deck.push(a_card);

b_pic = new image();

b_pic.src = pairs[i][1];

b_card = new card(cx, cy + card_height + margin, card_width, card_height, b_pic, i);

deck.push(b_card);

cx = cx + card_width + margin; //note

a_card.draw();

b_card.draw();

}

}

function shuffle()//洗牌

{

var i;

var j;

var temp_info;

var temp_img;

var deck_length = deck.length;

var k;

for (k = 0; k < 3 * deck_length; k++)

{

i = math.floor(math.random() * deck_length);

j = math.floor(math.random() * deck_length);

temp_info = deck[i].info;

temp_img = deck[i].img;

deck[i].info = deck[j].info;

deck[i].img = deck[j].img;

deck[j].info = temp_info;

deck[j].img = temp_img;

}

}

function choo(ev)food safety

{

//var out;

var mx;

var my;

//var pick1;

//var pick2;

var i;

//note

if (ev.layerx || ev.layerx == 0) { // firefox

mx = ev.layerx;

my = ev.layery;

} el if (ev.offtx || ev.offtx == 0) { // opera

mx = ev.offtx;

my = ev.offty;

}

for (i = 0; i < deck.length; i++)

{

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 (i != first_card)//如果两次点击同一张牌不做处理

break;

}

}

}

if (i < deck.length)

{

if (first_pick)//如果是第一次点击

{

first_card = i;

first_pick = fal; //note

ctx.drawimage(card.img, card.sx, card.sy, card.swidth, card.sheight);

}

el

{

first_pick = true如何查询学籍号; //note

cond_card = i;

ctx.drawimage(card.img, card.sx, card.sy, card.swidth, card.sheight);

tid=ttimeout(flip_back,1000);

}

}

}

function flip_back()

{

if (card.info == deck[first_card].info)//配对成功

{

ctx.fillstyle = table_color;

ctx.fillrect(deck[first_card].sx, deck[first_card].sy, deck[first_card].swidth, deck[first_card].sheight);

ctx.fillrect(deck[cond_card].sx, deck[cond_card].sy, deck[cond_card].swidth, deck[cond_card].sheight);

deck[first_card].sx = -1;

deck[cond_card].sy = -1;

first_card=-1;

}

el

{

deck[first_card].draw();

deck[cond_card].draw();

first_card=-1;

}

}

function init()

{

canvas = document.getelementbyid(‘canvas’);

canvas.addeventlistener(‘click’, choo, fal);

ctx = canvas.getcontext(‘2d’);

make_deck();

shuffle();

}

</script>

</head>

<body onload=”init();”>

<canvas id=”canvas” width=”400″ height=”400″/>

123142

</body>

</html>

本文发布于:2023-04-06 17:08:55,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/766364fefc4e9964f3f7af65f2ae3a8c.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:html5记忆翻牌游戏实现思路及代码.doc

本文 PDF 下载地址:html5记忆翻牌游戏实现思路及代码.pdf

标签:背面   两次   事件   卡片
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图