项目实战02纸牌记忆配对课件

,项目实战-纸牌记忆配对,项目实战 纸牌记忆配对,授课人： 毛丽娟 Email：,本次课主体纲要,第一部分 前期准备 第二部分 舞台搭建 第三部分 剧本演绎,1.从FTP上得到“项目实践02资源文件.zip”，使用WebStorm创建个Project：MatchGame，创建如下目录结构： 其中未提供的文件都 自行创建,第一部分 前期准备,2.打开index.html，链接项目所用的.css文件以及.js 文件,3.本练习为节约时间，仅针对chrome浏览器开发， 凡CSS3中需要加前缀的，仅处理-webkit-,打开index.html文件，设计该项目的主要结构：,第二部分 舞台搭建-结构设计,结构说明：,为界面主要内容的容器，用于容纳牌桌、纸牌等游戏元素。 为所有纸牌的容器。 为具体某一张纸牌的容器。 为具体某一张纸牌的正面。 为具体某一张纸牌的背面。,设计body标签样式，要求： （1）文本居中； （2）使用图片bg.jpg作背景；,第二部分 舞台搭建-样式设计,设计section标签的样式：,section标签的id属性为”game”，样式要求如下： （1）宽度502px,高度462px; （2）自动居于body中间； （3）加边框1px，颜色#666，实线； （4）边框圆角半径10px； （5）背景使用table.jpg； （6）采用相对定位； （7）让其内部元素垂直和水平居中。,弹性盒子模型,为父盒子添加如下样式,可以实现其子盒子的水平和垂直居中： display：-webkit-box； -webkit-box-pack:center; -webkit-box-align:center;,section标签的设计后效果如下：,设计纸牌容器的样式：,id属性值为“cards”的div标签，为其设计css属性如下： （1）宽度380px; （2）高度400px； （3）相对定位； class属性为”card”的div标签，为其设计css属性如下： （1）高度120px; （2）宽度80px; （3） 绝对定位,设计class属性为“face”的div的样式,（1）宽度和高度都是card的100%； （2）边框圆角半径为10px; （3） 绝对定位； （4）翻面后不可见 CSS3新增背面可见性属性： backface-visibility -webkit-backface-visibility：hidden；实现翻面后不可见。,（5）设计扑克的翻底样式为front，要求背景色为#999，使用背景图片deck.png最底部的图像，每张牌面图像大小80x120像素。 （6）设计扑克的牌面样式为back，要求背景色为#efefef，背景图片同样采用deck.png，并且用3d转换先将牌背过去让其隐藏。 -webkit-transform:rotateY(-180deg); （7） 用css控制这两个div的重叠可见性。 设置各自的z-index属性值，值大的叠放在值小的盒子上层。 （8）为翻动前的扑克加上阴影效果，当鼠标放上去 时产生效果。 box-shadow:5px 5px 5px gray;,1. htm5game.matchgame.js； 2. 设计一个游戏脚本命名空间neusoft.matchingGame，添加属性cardWidth值为80,cardHeight值为120; 3. 在该命名空间中添加字符串数组deck，作为扑克的字符串对，先准备好6张已配对的牌号，值分别是: “cardAK”,”cardAK” “cardAQ”,”cardAQ” “cardAJ”,”cardAJ” “cardBK”,”cardBK” “cardBQ”,”cardBQ” “cardBJ”,”cardBJ”,第三部分 剧本演绎,随机洗牌的实现,4.在.js中制作一个名为shuffle的函数，它能随机返回-1或1，用该函数作为数组排序函数sort的参数，即可实现随机洗牌：,5.在.js中使用jQuery语法添加一个页面加载处理方法，页面加载后首先将已配好的牌（符号）进行随机洗牌，这里完成后可以测试下是否已将原顺序打乱。 6.桌面上已作好了一张牌，现在想办法在页面加载完成后,再复制11张出来，把它附加在cards中完成后使用chrome的“审查元素“，应该可以看到元素已附加上去，但在界面上始终只看到一张牌，因为所有牌的坐标都一样。 jQuery的元素复制方法： $(selector).clone(); jQuery的元素附加方法： $(selector).appendTo($(selector);,7.使用jQuery的.css方法对每张扑克进行坐标设定， 效果应该如下所示:,扑克牌的坐标定位,8.打开.css文件，利用CSS Spirite技术，把我们需要 的6张牌面的位置定出来，为了在后面迅速找到 这些牌面，选择器的对象名和牌号完全一致：,9.从deck数组出栈取出（用数组的pop方法）牌号，把牌号以data-pattern方式写入元素暂存，以背景图片形式把当前的牌面图放入back的div中。,使用chrome的“审查元素”，随机打开几个牌的 html，应该看到类似的结果，当前牌的图片贴图 已经成功与牌附加,10.在.js文件中再添加个selectCard的函数，作为每 张牌点击后的功能,将每张牌的点击事件与 selectCard挂接，随意点击扑克，确认都弹出当前扑克中隐藏的data-pattern属性。,11.下面来实现点击每张扑克将牌翻过来，打开.css 文件，添加一个样式.card-flipped .front，控制原 来的牌底层叠性降低，保证比牌面低，再添加个样式.card-flipped .back，控制原有的牌面层叠性升高，保证比牌底高，另外原来已翻过去的牌面要再用3d转换翻回来。,打开.js，在selectCard函数中实现当前牌面样式动 态添加，运行效果如下，点击后都能得到相应牌 面,12.现在来加上3d的翻牌效果，打开.css，找到.face 选择器，使用CSS3的过渡，加上点翻牌特效： -webkit-transition:all 3s; 13.让牌底翻牌时也跟着旋转,14.现在考虑如何每次只能翻动2张牌？被翻动的牌 的特点是会自动附加样式card-flipped，可以利用 这个特点，打开.js，在selectCard函数中实现控制 测试效果是仅能任意翻动2张牌 15.在.js中再添加一个函数checkPattern，用以检测 翻动的2张牌是否一致,16. 在selectCard中处理翻动2张牌后，检测2张牌是 否一致 17.在checkPattern中分别取出两张牌的data-pattern 值，这里可以测试下 18.如果不匹配，两张牌不同，把牌要翻回去，即 移除样式card-flipped，实际的测试效果并不如 意，牌能翻回去，但也只能翻一张牌了,原因是翻第2张牌时，可能已经检测到不同了，第 2张牌还没来得及实现动画就翻过去了，需要采用 js的延时处理，让牌翻过来一会儿再去检测 完成后，效果明显，翻了2张牌，如果不一样，牌 会自动翻回去 19.现在来考虑2张牌面一样时，如何让牌消失，这 里可以使用CSS3的opacity来控制，打开.css，添加 样式.card-removed，让两张牌一样时，翻出的牌 都消失掉,20.现在牌面能消失了，很可惜，其它的牌也点不 动了，why?调试下，看看原因，发现因为牌虽然 消失了，但是card-flipped样式还附加着呢，所以 还得去掉样式card-flipped. 21.额外的优化，牌虽然消失了，但在HTML