<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>HTML5 SVG记忆配对小游戏代码</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="game">
<section class="game__cards js-cards">
<div class="game__card js-card" data-animal="dog">
<div class="game__back-card">
<svg width="70" height="70" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M60.1845 47.6985C56.1346 41.3807 49.2373 37.6083 41.7336 37.6083C34.23 37.6083 27.3326 41.3807 23.2835 47.6985L13.5249 62.9221C11.9057 65.4476 11.1587 68.3659 11.364 71.359C11.5693 74.3527 12.7084 77.1405 14.6578 79.4229C16.6086 81.7033 19.1862 83.262 22.112 83.9308C25.0378 84.5995 28.0371 84.3139 30.7851 83.1061L30.9691 83.0244C37.8836 80.0457 45.7848 80.0732 52.6815 83.1061C54.4606 83.8882 56.3454 84.2837 58.2475 84.2837C59.2815 84.2837 60.3218 84.1663 61.3525 83.9314C64.2783 83.2633 66.8559 81.7046 68.8074 79.4236C70.7574 77.1433 71.8973 74.3548 72.1033 71.3603C72.3093 68.3659 71.5622 65.4483 69.9431 62.9215L60.1845 47.6985Z" fill="white"/>
<path d="M16.1533 47.6787C19.0565 46.5635 21.262 44.2241 22.3634 41.091C23.4119 38.1096 23.326 34.7436 22.121 31.6125C20.9152 28.4835 18.7221 25.9291 15.9453 24.4192C13.0284 22.8337 9.82385 22.5756 6.92552 23.6927C1.09453 25.9346 -1.58133 33.1403 0.961316 39.7589C2.99241 45.0268 7.72958 48.3523 12.5189 48.3523C13.7418 48.3523 14.9682 48.1353 16.1533 47.6787Z" fill="white"/>
<path d="M35.0883 35.7516C42.3777 35.7516 48.3083 28.995 48.3083 20.69C48.3083 12.383 42.3777 5.625 35.0883 5.625C27.7995 5.625 21.8697 12.383 21.8697 20.69C21.8697 28.995 27.7995 35.7516 35.0883 35.7516Z" fill="white"/>
<path d="M57.9192 39.4519H57.9199C59.0412 39.8241 60.1852 40.0019 61.3243 40.0019C66.6403 40.0019 71.821 36.1327 73.7979 30.1863C74.9364 26.7634 74.8615 23.1441 73.5871 19.9958C72.2536 16.6999 69.7824 14.3076 66.6279 13.2591C63.4728 12.2106 60.0609 12.648 57.0197 14.4896C54.1145 16.2488 51.8884 19.1032 50.7513 22.5261C48.3515 29.7469 51.5671 37.3398 57.9192 39.4519V39.4519Z" fill="white"/>
<path d="M85.7592 37.6941L85.7572 37.692C80.7302 33.9786 73.2122 35.5881 68.9969 41.2818C64.7857 46.9782 65.4442 54.6364 70.4635 58.3525C72.2941 59.7086 74.4571 60.3568 76.6708 60.3568C80.5291 60.3568 84.5432 58.3875 87.2266 54.7662C91.4371 49.0698 90.7793 41.4116 85.7592 37.6941V37.6941Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="90" height="90" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<div class="game__front-card">
<svg width="70" height="70" viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M76.9354 7.9838H62.4192C57.1572 10.0705 55.9907 6.5322 45 6.5322C34.0092 6.5322 32.8428 10.0705 27.5806 7.9838H13.0646L11.129 44.4558C12.3388 58.7904 21.2298 66.5928 28.2461 69.4355H61.754C68.7702 66.5928 77.6614 58.7904 78.8711 44.4558L76.9354 7.9838Z" fill="#F5DCB4"/>
<path d="M62.4194 7.9838C78.7637 12.876 69.866 38.1048 80.39 49.0101C81.9009 50.5756 84.5703 49.8802 85.2008 47.798C86.034 45.0469 86.8662 40.6946 86.7338 34.4758C86.5524 25.9476 90 25.4034 90 25.4034C90 25.4034 85.6452 5.0806 72.5806 5.0806C68.2258 5.0806 62.4194 7.9838 62.4194 7.9838Z" fill="#965A50"/>
<path d="M29.758 45.7258C26.9636 45.7258 24.6774 43.4396 24.6774 40.6452V37.742C24.6774 34.9476 26.9636 32.6614 29.758 32.6614C32.5524 32.6614 34.8386 34.9476 34.8386 37.742V40.6452C34.8388 43.4398 32.5524 45.7258 29.758 45.7258Z" fill="#4B3F4E"/>
<path d="M29.758 32.6612C29.5096 32.6612 29.2713 32.7001 29.0322 32.7349V39.9192C29.0322 41.5225 30.3321 42.8224 31.9354 42.8224C33.5389 42.8224 34.8386 41.5225 34.8386 39.9192V37.742C34.8388 34.9478 32.5524 32.6612 29.758 32.6612Z" fill="#5D5360"/>
<path d="M29.758 38.4676C30.9606 38.4676 31.9354 37.4928 31.9354 36.2902C31.9354 35.0877 30.9606 34.1128 29.758 34.1128C28.5555 34.1128 27.5806 35.0877 27.5806 36.2902C27.5806 37.4928 28.5555 38.4676 29.758 38.4676Z" fill="white"/>
<path d="M60.242 45.7258C57.4476 45.7258 55.1614 43.4396 55.1614 40.6452V37.742C55.1614 34.9476 57.4476 32.6614 60.242 32.6614C63.0364 32.6614 65.3226 34.9476 65.3226 37.742V40.6452C65.3226 43.4398 63.0362 45.7258 60.242 45.7258Z" fill="#4B3F4E"/>
<path d="M60.242 32.6612C59.9936 32.6612 59.7552 32.7001 59.5162 32.7349V39.9192C59.5162 41.5225 60.8161 42.8224 62.4194 42.8224C64.0229 42.8224 65.3226 41.5225 65.3226 39.9192V37.742C65.3226 34.9478 63.0362 32.6612 60.242 32.6612Z" fill="#5D5360"/>
<path d="M60.242 38.4676C61.4445 38.4676 62.4194 37.4928 62.4194 36.2902C62.4194 35.0877 61.4445 34.1128 60.242 34.1128C59.0394 34.1128 58.0646 35.0877 58.0646 36.2902C58.0646 37.4928 59.0394 38.4676 60.242 38.4676Z" fill="white"/>
<path d="M80.39 49.0103C81.9009 50.5758 84.5703 49.8804 85.2008 47.7981C85.6786 46.2203 86.1499 44.0961 86.4453 41.4149C83.5917 39.9925 81.1557 35.4542 79.6572 27.7622C76.9354 13.7904 73.125 5.98798 62.4194 7.9838C78.7637 12.876 69.866 38.105 80.39 49.0103Z" fill="#824641"/>
<path d="M28.2461 69.4356H35.1263C35.1263 69.4356 23.0445 61.3308 21.0485 46.996C17.1657 19.1095 24.5566 10.7661 30.9492 8.63702C29.9366 8.6713 28.8847 8.50097 27.5808 7.98399H13.0646L11.129 44.4558C12.3388 58.7904 21.2298 66.5928 28.2461 69.4356Z" fill="#E7C9A5"/>
<path d="M27.5806 7.9838C11.2363 12.876 20.1342 38.1049 9.60996 49.0101C8.09912 50.5756 5.42971 49.8802 4.79918 47.798C3.96598 45.0469 3.13383 40.6946 3.26619 34.4758C3.4476 25.9476 0 25.4034 0 25.4034C0 25.4034 4.35481 5.0806 17.4194 5.0806C21.7742 5.0806 27.5806 7.9838 27.5806 7.9838Z" fill="#965A50"/>
<path d="M27.0947 7.75265C25.6217 7.06921 21.0275 5.0806 17.4194 5.0806C4.35481 5.0806 0 25.4034 0 25.4034C0 25.4034 3.4476 25.9478 3.26619 34.476C3.26373 34.5899 3.26707 34.6924 3.26531 34.805C11.6186 3.11395 24.4545 6.63978 27.0947 7.75265Z" fill="#824641"/>
<path d="M45 82.016C53.8189 82.016 60.968 76.8171 60.968 70.4039C60.968 63.9907 53.8189 58.7918 45 58.7918C36.1811 58.7918 29.032 63.9907 29.032 70.4039C29.032 76.8171 36.1811 82.016 45 82.016Z" fill="#BC8E78"/>
<path d="M37.742 70.4032V77.6612C37.742 81.6697 40.9915 84.9192 45 84.9192C49.0085 84.9192 52.258 81.6697 52.258 77.6612V70.4032H37.742Z" fill="#FF8087"/>
<path d="M37.742 76.0725C39.841 75.8095 41.8215 75.1709 43.5484 74.2054V76.2096C43.5484 77.0112 44.1984 77.6612 45 77.6612C45.8016 77.6612 46.4516 77.0112 46.4516 76.2096V74.1869C48.1618 75.1628 50.1476 75.8085 52.258 76.073V70.403H37.742V76.0725V76.0725Z" fill="#E6646E"/>
<path d="M54.4354 57.3388H35.5646C29.5518 57.3388 24.6776 60.9133 24.6776 65.3226C24.6776 69.7319 29.552 73.3064 35.5646 73.3064C38.5924 73.3064 41.3271 72.3978 43.2981 70.9337C43.7972 70.5632 44.3989 70.3779 44.9995 70.3779C45.6012 70.3779 46.2029 70.563 46.7019 70.9337C48.673 72.3978 51.4076 73.3064 54.4354 73.3064C60.4482 73.3064 65.3225 69.7319 65.3225 65.3226C65.3226 60.9133 60.4482 57.3388 54.4354 57.3388Z" fill="#D4AF91"/>
<path d="M45 51.5322C49.8103 51.5322 53.7096 54.1318 53.7096 57.3386C53.7096 60.4313 50.0491 62.0597 47.4073 63.2638C45.8759 63.9619 44.1237 63.9619 42.5923 63.2638C39.9505 62.0597 36.29 60.4313 36.29 57.3386C36.2904 54.132 40.1897 51.5322 45 51.5322Z" fill="#5D5360"/>
<path d="M40.5999 55.751C40.3968 53.9241 41.6837 51.9704 41.6837 51.9704C38.5192 52.8404 36.2904 54.9149 36.2904 57.3386C36.2904 60.4311 39.9509 62.0596 42.5927 63.2638C44.1239 63.9617 45.8763 63.9617 47.4077 63.2638C47.9758 63.0049 48.5911 62.7244 49.2068 62.4159C45.6351 61.7843 41.008 59.4255 40.5999 55.751Z" fill="#4B3F4E"/>
</svg>
</div>
</div>
<div class="game__card js-card" data-animal="rabbit">
<div class="game__back-card">
<svg width="70" height="70" viewBox="0 0 90 90" fill="none"
