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实现设置半个字符的样式
Jul 03 HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
flex弹性布局详解
Mar 20 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
德生PL550的电路分析
2021/03/02 无线电
php4的session功能评述(三)
2006/10/09 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
bootstrap模态框示例代码分享
2017/05/17 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
Python中for循环和while循环的基本使用方法
2015/08/21 Python
浅谈Python中函数的参数传递
2016/06/21 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python3解释器知识点总结
2019/02/19 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
python 的topk算法实例
2020/04/02 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
总经理助理工作职责
2014/02/06 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
Python实现批量自动整理文件
2022/03/16 Python
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技