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中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
Sep 11 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
Nov 21 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 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做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python标准库defaultdict模块使用示例
2015/04/28 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python获取栅格点和面值的实现
2020/03/10 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
python如何快速生成时间戳
2020/07/21 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
String和StringBuffer的区别
2015/08/13 面试题
新东网科技Java笔试题
2012/07/13 面试题
"引用"与多态的关系
2013/02/01 面试题
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android