2021-11-23 使用jQuery实现一个翻翻乐小游戏

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/121502471

本文介绍了如何使用jQuery和CSS3实现一个翻翻乐小游戏。核心思路是通过点击事件和transform属性实现翻牌效果，利用类名管理翻牌状态，并通过JavaScript验证匹配情况。文章还探讨了解构赋值和位运算符的知识，并提出将行内绑定改为DOM2级绑定的改进方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.项目需求

翻翻乐游戏:
在若干张显示背面的图片中,连续点击其中两张,
若翻过来发现是一样的,那么会固定住,不会再回翻,
若翻过来发现是不一样的,那么两张图片会自动会回翻

游戏结束:所有的图片配对成功时则视为游戏结束

2.核心思路

玩家点击鼠标左键可以翻牌==>点击div实现3d翻转
玩家连续点击两张牌
- 两张牌一样==>取消这两个div的翻转
- 两张牌不一样==>自动再次翻转回去
结束游戏==>所有div都没有背景图

3.实现点击翻牌功能

2021-11-22 transform属性的用法和示例,使用transform属性实现扑克牌的正反面翻转,transition属性的用法和示例

4.通过设置类名来确定翻牌状态

在这里插入图片描述

翻牌0张:默认类名是item
翻牌1张:新增类名on

在这里插入图片描述

翻牌2张(匹配到相同图片时):新增类名right

代码:

		if($(".on").length==1){
   //翻第1张牌,或者第3张
			//div.id.toString()[0]==>点击的item容器的id名的第一个数字,即123456==>这里是指点击的第二张图片
			//$(".on")[0].id.toString()[0]==>翻哪张牌就给它添加on类名
			if (div.id.toString()[0]==$(".on")[0].id.toString()[0]) {
   //第2张图片和第2张匹配上了
				/*两张图片匹配上时,就为它们新增类名right,并保持翻过来的状态*/
				$("#"+div.id+" .blank").css("transform","rotateY(180deg)");
				$("#"+div.id+" .content").css("transform","rotateY(0deg)");
				$("#"+div.id).attr("class","item right");
				$(".on").attr("class","item right");
			} else {
   
				/*两张图片没有匹配上时,就为它们新增类名on,并保持翻过来的状态(等到翻第3长得时候再把这两张翻回去)*/
				$("#"+div.id+" .blank").css("transform","rotateY(180deg)");
				$("#"+div.id+" .content").css("transform","rotateY(0deg)");
				$("#"+div.id).attr("class","item on");
			}
		}else if($(".on").length==0){
   //翻第2张牌,一对牌匹配成功时
				/*$(".on").length==0时,是它们配对成功后,被赋予类名item right时*/
				$("#"+div.id+" .blank").css("transform","rotateY(180deg)");
				$("#"+div.id+" .content").css("transform","rotateY(0deg)");
				$("#"+div.id+" .content").css("z-index","200");
				$("#"+div.id).attr("class","item on");
		}else if($(".on").length==2){
   //翻第2张牌,一对牌匹配不成功时
			/*有两个on的情况下继续触发点击事件,实际上就是翻第3张牌,此时需要做的是:*/
			//step1:把前面匹配不成功的2张牌翻回去,类名重置
			$(".on .blank").css("transform","rotateY(0deg)");
			$(".on .content").css("transform","rotateY(-180deg)");
			$(".on").attr("class","item");
			//step2:把第3张牌翻转过来,添加类名
			$("#"+div.id+" .blank").css("transform","rotateY(180deg)");
			$("#"+div.id+" .content").css("transform","rotateY(0deg)");
			$("#"+div.id).attr("class","item on");
		}
		console.log("类名on的数量:",$(".on").length);

验证:

console.log(“类名on的数量:”,$(“.on”).length);
在这里插入图片描述

点击第一张牌,这张牌会新增类名on
点击第二张牌,
- 若匹配成功,on的数量为0,并让这对牌新增类名right
- 否则on的数量为2
点击第三张牌.若on的数量为2,会把前面两张转回去,同时把第三张转过来,新增类名on

5.完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      div,
      dl,
      dt,
      dd,
      ul,
      ol,
      li,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      pre,
      form,
      fieldset,
      input,
      textarea,
      p,
      blockquote,
      th,
      td,
      select,
      img {
     
        margin: 0;
        padding: 0;
      }
      /*面板*/
      .board {
     
        width: 1000px;
        margin: 50px auto;
        background-color: #905a3d;
        padding: 50px;
        padding-right: 0px;
        padding-bottom: 0px;
        display: flex;
        flex-flow: row wrap;
        align-content: center;
      }
      /*img容器*/
      .item {
     
        width: 200px;
        height: 200px;
        margin-right: 50px;
        margin-bottom: 50px;
      }
      /*反面*/
      .blank {
     
        width: 200px;
        height: 200px;
        /* 隐藏其背面 */
        backface-visibility: hidden;
        /* 提供背景图片 */
        background-image: url(./pic/back.png);
        /* transform的主体和反转用时 */
        transition: all 1s;
      }
      /*正面*/
      .content {
     
        width: 200px;
        height