项目实战02--纸牌记忆配对分析.ppt

结构说明： section为界面主要内容的容器，用于容纳牌桌、纸牌等游戏元素。 div id=“cards”为所有纸牌的容器。 div class=“card”为具体某一张纸牌的容器。 div class=“face front”为具体某一张纸牌的正面。 div class=“face back”为具体某一张纸牌的背面。 设计section标签的样式： section标签的id属性为”game”，样式要求如下： （1）宽度502px,高度462px; （2）自动居于body中间； （3）加边框1px，颜色#666，实线； （4）边框圆角半径10px； （5）背景使用table.jpg； （6）采用相对定位； （7）让其内部元素垂直和水平居中。 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；实现翻面后不可见。 * * * * * * * ChengDu Neusoft University Sep 2013 IT Education Training ChengDu Neusoft University Sep 2013 IT Education Training 项目实战--纸牌记忆配对 ?项目实战 —— 纸牌记忆配对 授课人： 毛丽娟 Email：maolijuan@ 本次课主体纲要 第一部分 前期准备 第二部分 舞台搭建 第三部分 剧本演绎 1.从FTP上得到“项目实践02资源文件.zip”，使用WebStorm创建个Project：MatchGame，创建如下目录结构： 其中未提供的文件都 自行创建 第一部分 前期准备 2.打开index.html，链接项目所用的.css文件以及.js 文件 3.本练习为节约时间，仅针对chrome浏览器开发， 凡CSS3中需要加前缀的，仅处理-webkit- 打开index.html文件，设计该项目的主要结构： 第二部分 舞台搭建-结构设计 设计body标签样式，要求： （1）文本居中； （2）使用图片bg.jpg作背景； 第二部分 舞台搭建-样式设计 弹性盒子模型 为父盒子添加如下样式,可以实现其子盒子的水平和垂直居中： display：-webkit-box； -webkit-box-pack:center; -webkit-box-align:center; （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中制作一个名为s