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


Posted in HTML / CSS onJuly 25, 2013

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

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

需求分析

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

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

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

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

MYCode:

复制代码
代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>test </title>
<script type="text/javascript">
var ctx;
var canvas;
var card;
var first_pick = true; //第一次点击的标志
var first_card = -1;
var second_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", "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 choose(ev)
{
//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;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
mx = ev.offsetX;
my = ev.offsetY;
}
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 = false; //note
ctx.drawImage(card.img, card.sx, card.sy, card.swidth, card.sheight);
}
else
{
first_pick = true; //note
second_card = i;
ctx.drawImage(card.img, card.sx, card.sy, card.swidth, card.sheight);
tid=setTimeout(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[second_card].sx, deck[second_card].sy, deck[second_card].swidth, deck[second_card].sheight);
deck[first_card].sx = -1;
deck[second_card].sy = -1;
first_card=-1;
}
else
{
deck[first_card].draw();
deck[second_card].draw();
first_card=-1;
}
}
function init()
{
canvas = document.getElementById('canvas');
canvas.addEventListener('click', choose, false);
ctx = canvas.getContext('2d');
make_deck();
shuffle();
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="400" height="400"/>
123142
</body>
</html>
HTML / CSS 相关文章推荐
利用CSS3实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
Html5 audio标签样式的修改
Jan 28 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
HTML5视频播放插件 video.js介绍
Sep 29 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 #HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 #HTML / CSS
html5弹跳球示例代码
Jul 23 #HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
Jul 22 #HTML / CSS
canvas使用注意点总结
Jul 19 #HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 #HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 #HTML / CSS
You might like
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php实现rc4加密算法代码
2012/04/25 PHP
一个非常实用的php文件上传类
2017/07/04 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
2010/11/16 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
django框架ModelForm组件用法详解
2019/12/11 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
小学教师师德反思
2014/02/03 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
科技活动总结范文
2015/05/11 职场文书
师德师风培训感言
2015/08/03 职场文书
话题作文之学会尊重
2019/12/16 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python