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 相关文章推荐
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
HTML5 canvas基本绘图之文字渲染
Jun 27 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
html5简介及新增功能介绍
May 18 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针对cookie操作的队列操作类实例
2014/12/10 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
JS实现打字游戏
2019/12/17 Javascript
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python中sys模块是做什么用的
2020/08/16 Python
python中如何打包用户自定义模块
2020/09/23 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
市场营销专业毕业生求职信
2014/07/21 职场文书
力学专业求职信
2014/07/23 职场文书
西岭雪山导游词
2015/02/06 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
社会实践单位意见
2015/06/05 职场文书
Flink 侧流输出源码示例解析
2022/09/23 Servers