JavaScript 实战-翻牌游戏

前言

有段子说学习xxx语言从入门到放弃，当然这只是一句调侃，说明学习的门槛还是存在的，比如底层的C和汇编，难度不小，且需要更多基础知识，有时学起来少许枯燥，有编程天赋的人除外。如果想学得有趣不乏味，语言能简单、容易上手，开发所用的工具也不复杂，那么JavaScript是一个不错的选择。JavaScript 从一款不受待见的“早产”编程语言，逐渐上升开发语言排行榜前列，正可谓时势造英雄，Java也从版本8开始吸取函数式编程语言的优秀特性引入了Lambda表达式。在这一系列文章中，我们使用JavaScript和HTML5、CSS3来实现翻牌小游戏。主要使用盒子模型、Flex布局、Grid布局，CSS伪元素、DOM等。

善其事必先利其器

任务

界面上有偶数张牌，找到两个相同数字的牌，点击任意两张牌之后，如果牌面数字相同，则表示找到这相同的牌，然后删除这两张牌，继续翻牌，直到翻出所有相同的牌，游戏结束

游戏界面

游戏界面设计

一、HTML结构设计

第一部分：游戏标题以及时间和点击次数
第二部分：扑克牌

<body><!-- 游戏标题 --><h1 class="game-title">翻牌游戏</h1><!-- 游戏容器区域 --><div class="game-container"><!-- 游戏倒计时和点击次数 --><div class="game-info-container"><div class="game-info">时间: <span id="timeRemaining" class="time-remaining">100</span></div><div class="game-info">点击: <span id="clickCount" class="click-count">0</span></div></div><!-- 扑克牌部分 --><div class="card" data-number="8" data-turn='back' onclick="handlerClick(this)"><!-- 牌的背面 --><div class="card-back card-face"><img class="cobweb cobweb-top-left" src="Images/Cobweb.png"><img class="cobweb cobweb-top-right" src="Images/Cobweb.png"><img class="cobweb cobweb-bottom-left" src="Images/Cobweb.png"><img class="cobweb cobweb-bottom-right" src="Images/Cobweb.png"><img class="spider" src="Images/Spider.png"></div><!-- 牌的前面 --><div class="card-front card-face"><div class="card red" data-value="8   ♥"><div>♥</div></div> </div></div><div class="card" data-number="9" data-turn="back" onclick="handlerClick(this)"><!-- 牌的背面 --><div class="card-back card-face"><img class="cobweb cobweb-top-left" src="Images/Cobweb.png"><img class="cobweb cobweb-top-right" src="Images/Cobweb.png"><img class="cobweb cobweb-bottom-left" src="Images/Cobweb.png"><img class="cobweb cobweb-bottom-right" src="Images/Cobweb.png"><img class="spider" src="Images/Spider.png"></div><!-- 牌的前面 --><div class="card-front card-face"><div class="card red" data-value="9   ♥"><div>♣</div></div> </div></div><div class="card" data-number="8" data-turn="back" onclick="handlerClick(this)"><!-- 牌的背面 --><div class="card-back card-face"><img class="cobweb cobweb-top-left" src="Images/Cobweb.png"><img class="cobweb cobweb-top-right" src="Images/Cobweb.png"><img class="cobweb cobweb-bottom-left" src="Images/Cobweb.png"><img class="cobweb cobweb-bottom-right" src="Images/Cobweb.png"><img class="spider" src="Images/Spider.png"></div><!-- 牌的前面 --><div class="card-front card-face"><div class="card black" data-value="8   ♣"><div>♣</div></div></div></div><div class="card" data-number="9" data-turn="back" onclick="handlerClick(this)"><!-- 牌的背面 --><div class="card-back card-face"><img class="cobweb cobweb-top-left" src="Images/Cobweb.png"><img class="cobweb cobweb-top-right" src="Images/Cobweb.png"><img class="cobweb cobweb-bottom-left" src="Images/Cobweb.png"><img class="cobweb cobweb-bottom-right" src="Images/Cobweb.png"><img class="spider" src="Images/Spider.png"></div><!-- 牌的前面 --><div class="card-front card-face"><div class="card black" data-value="9   ♣"><div>♣</div></div></div></div></div>

设计网页时我们可以先设计好网页结构，同时使用类选择器和ID选择器标识元素的作用，方便后面CSS样式编写。

此页面游戏区域我们定义了一个game-container，它包含游戏信息 game-info-container和card, game-info-container内部每一项都是 game-info；card表示一张扑克牌，其中包含牌的背面card-back和正面card-front, 不管是正面还是背面都包含有牌的内容，这里我们使用card-face表示；

在card类节点中我们还设计了用户自定义属性data-number和data-turn用于表示扑克牌的数字值和是否翻转，同时还使用了HTML页面中注册事件的方式οnclick=handlerClick(this)

card-back牌的背面，内容有五张图片，分别是蜘蛛网和蜘蛛，牌的前面就是数字和花色，这些内容需要用到传统的position排版以及伪元素，还包括使用CSS3中的flex布局

二、CSS样式设计

通用样式

/* 定义字体 */
@font-face {font-family: "恐怖蜘蛛";src: url(Fonts/恐怖蜘蛛.ttf) format("truetype");
}* {/* 非常重要 */box-sizing: border-box;
}html {/* 使用上面定义的字体 */font-family: "恐怖蜘蛛", serif;min-width: 100vw;min-height: 100vh;
}
/* 整个背景的径向渐变，从中心向四周扩散 */
body {margin: 0;background: radial-gradient(#f15f66, #7e2625);
}

在通用样式设计中，我们使用了自定义字体，这个字体文件是从网上直接下载的免费字体，后面在html 样式中使用了这种自定义字体，定义字体时不能少了format,不同类型的字体文件format的参数值不同

box-sizing它的常用值有两个:content-box和border-box, 这两个不同的值决定元素width和height的值

body中我们使用到了CSS3中的渐变色

html样式中还使用到了vw和vh单位

游戏标题game-title和游戏信息game-info样式

/* 游戏标题 */
.game-title {color: #ebd409;text-align: center;font-size: 4em;font-weight: normal;
}
/* 游戏信息 */
.game-info {color: #f0f3f8;font-size: 3em;
}

标题和游戏信息只是让文字内容居中，定义了简单的颜色和字体大小，使用到了相对单位em

游戏内容部分CSS

/* 整个游戏界面使用Grid布局 */
.game-container {display: grid;grid-template-columns: repeat(8, auto);justify-content: center;gap: 10px;perspective: 800px;
}
/* 游戏信息部分容器 */
.game-info-container {grid-column: 1 / -1;display: flex;justify-content: space-between;
}

grid网格布局相当好用，grid-template-columns: repeat(8, auto); 将自动将容器分为8列，这个值可改成你希望的

grid-column: 1 / -1; 可以认为是将整个行中的所有列进行了合并，合并后设置布局方式为flex

perspective: 800px;是CSS3中3D的内容，指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果

扑克牌布局CSS

/* 扑克牌样式，主要是定义宽和高 */
.card {position: relative;height: 175px;width: 125px;
}/* 鼠标放在card样式对象的div下的子元素card-back和card-front 后的翻牌效果，可以改成点击 */
.card:hover .card-back {transform: rotateY(-180deg);
}
.card:hover .card-front {transform: rotateY(0deg);
} /* 不管牌的背面还是前面的内容样式设计 */
.card-face {position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;overflow: hidden;backface-visibility: hidden;/* 面向观察者的背面不可见 */border-radius: 12px;border-width: 1px;border-style: solid;font-size: 7em;transition: transform 500ms ease-in-out;
}
/* 背面层样式 */
.card-back {background-color: black;border-color: #FF6D00;
}
/* 字面层样式 */
.card-front {background-color: #FFBB89;border-color: #333;transform: rotateY(180deg);
}/* 背面层 内容样式 */
.cobweb {position: absolute;width: 45px;height: 45px;transition: width 100ms ease-in-out, height 100ms ease-in-out;
}.card-face:hover .cobweb {width: 55px;height: 55px;
}.cobweb-top-left {top: 0;left: 0;transform: rotate(270deg);
}
.cobweb-top-right {top: 0;right: 0;
}
.cobweb-bottom-left {bottom: 0;left: 0;transform: rotate(180deg);
}
.cobweb-bottom-right {bottom: 0;right: 0;transform: rotate(90deg);
}.spider {align-self: flex-start;transform: translateY(-20px);transition: transform 100ms ease-in-out;
}
/* 鼠标放在背面上 蜘蛛的样式 */
.card-back:hover .spider {transform: translateY(0);
}.card.red {color: red;display: flex;justify-content: center;align-items: center;
}.card.black {color: black;display: flex;justify-content: center;align-items: center;
}
.card::before, .card::after {content: attr(data-value);font-size: 2rem;position: absolute;
}
.card::before {top: .1rem;left: .1rem;
}
.card::after {bottom: .1rem;right: .1rem;transform: rotate(180deg);
}

此处CSS的重点部分内容很多，其实也是CSS中常用的，比如在背面设计中使用了position:relative和position:absolute，内部图片元素中使用了top/left/bottom/right, 它们是盒子模型的基础排版方式，同时也结合了flex布局

before和after伪元素，用在了牌的正面文字和花色的位置

transition和transform是CSS3中变形和过渡动画

总结

这里没有贴出运行结果图片，有兴趣的朋友可以将代码搬回去试试。
使用了CSS中老式的position和新的 flex和grid排版布局，看你的浏览器是否支持了
CSS设计中过渡和动画以及3D变换技术让界面变得更加美观

JavaScript 实战-翻牌游戏 - H5和CSS3 (1)相关推荐

html5+canvas+纯原生javascript+audio开发仙剑记忆力翻牌游戏
感觉又是在发小白文,没办法,我还在不断学习中.前端进阶计划再一次因为学习难度,项目经验而告吹. 好在,我在缓慢进步~ 文章内容来源我网络上看到别人用js和css3写的仙剑记忆力翻牌游戏,感觉自己可以学 ...
尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记
前言这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...
HTML小游戏设计（2）-扑克翻牌游戏
游戏介绍前言:终于开题结束了, 写个小游戏放松一下. [游戏玩法介绍] 有24张(两两相同)盖着的牌,玩家翻到两种相同的扑克牌则消去.如果规定的时间内,玩家没有消除所有的牌,则游戏失败. 代码模块设 ...
HTML5 实现扑克翻牌游戏
扑克翻牌游戏就是桌面24张牌,玩家翻到两张相同扑克牌则消去,如果时间2分钟到了,仍然没有成功则游戏失败.扑克翻牌游戏运行结果如图1. 01.程序设计的思路 1.Html5倒计时功能 Html5倒计时功 ...
cocos creator 2.3.2火柴人密室逃脱闯关游戏 H5+安卓+IOS三端源码
cocos creator 2.3.2火柴人密室逃脱闯关游戏 H5+安卓+IOS三端源码,开发脚本为javaScript方便扩展和阅读,支持cocos creator2.X版本,完整的源码可直接运营. ...
记忆翻牌游戏代码html,原生JS实现记忆翻牌游戏
本文实例为大家分享了JS实现记忆翻牌游戏的具体代码,供大家参考,具体内容如下 html代码 css代码 * { padding: 0; margin: 0; } #game { width: 600p ...
javaScript开发扫雷游戏
前言扫雷是windows自带的游戏,通过翻开小方块,来推理雷的位置本文讲解如何通过javaScript制作扫雷游戏,并运用canvas画布绘制windows扫雷效果一.技术拆分 canvas画图 ...
青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 3
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
JavaScript实现跳跃游戏的贪婪方法的算法（附完整源码）
JavaScript实现跳跃游戏的贪婪方法的算法(附完整源码) greedyJumpGame.js完整源代码 greedyJumpGame.test.js完整源代码 greedyJumpGame.js ...

JavaScript 实战-翻牌游戏 - H5和CSS3 (1)

前言