时间戳

首页 > 解决方案 > 代码适用于桌面和 Android，但不适用于 Apple

javascript - 代码适用于桌面和 Android，但不适用于 Apple

问题描述

嘿伙计们，我希望有人可以帮助我。我正在尝试建立我的第一个投资组合网站，但我创建的记忆匹配游戏在 IOS 设备上无法正常运行。我并没有真正将它构建为针对移动设备进行优化，但它可以在我的桌面和我的安卓设备上完美运行。在 IOS 上，卡片旋转但不能正确翻转。有人可以告诉我我需要修复什么吗？下面的代码

HTML

  <html lang="en">
  <head>
    <meta charset="UTF-8">

    <title> Memory Game </title>

    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1 selection class= "title">Philadelphia Eagles Memory Match</h1>
    <section class="memory-game">
      <div class="memory-card" data-framework="CarsonWentz">
        <img class="front-face" src="images/cw.png"
        alt="CarsonWentz"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="CarsonWentz"">
        <img class="front-face" src="images/cw.png"
        alt="CarsonWentz"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="CoreyClement">
        <img class="front-face" src="images/cc.png"
        alt="CoreyClement"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="CoreyClement">
        <img class="front-face" src="images/cc.png"
        alt="CoreyClement"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="NelsonAgholor">
        <img class="front-face" src="images/na.png"
        alt="NelsonAgholor"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="NelsonAgholor">
        <img class="front-face" src="images/na.png"
        alt="NelsonAgholor"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="NickFoles">
        <img class="front-face" src="images/nf.png"
        alt="NickFoles"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="NickFoles">
        <img class="front-face" src="images/nf.png"
        alt="NickFoles"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="FletcherCox">
        <img class="front-face" src="images/fc.png"
        alt="FletcherCox"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="FletcherCox">
        <img class="front-face" src="images/fc.png"
        alt="FletcherCox"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="ZachErtz">
        <img class="front-face" src="images/ze.png"
        alt="ZachErtz"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
      <div class="memory-card" data-framework="ZachErtz">
        <img class="front-face" src="images/ze.png"
        alt="ZachErtz"/>
        <img class="back-face" src="images/eaglesfront.png"
        alt="PhillyEagles"/>
      </div>
    <script src="scripts.js"></script>
  </body>
  </html>

CSS

 {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  background: #004C54;
}

h1 {
  color: #ACC0C6;
  text-align: center;
}

.memory-game {
  width: 640px;
  height: 640px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}

.memory-card {
  width:calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 5px;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform.5s;
}

.memory-card:active {
  transform: scale(.97);
  transition: transform .2s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background: #A5ACAF;
  backface-visibility: hidden;
}

.front-face {
  transform: rotateY(180deg);
}

JS

const cards = document.querySelectorAll('.memory-card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

function flipCard() {
  if(lockBoard) return;
  if (this === firstCard) return;
  this.classList.add('flip');

  if (!hasFlippedCard) {
    //first click
    hasFlippedCard = true;
    firstCard = this;
  } else {
    //second click
    hasFlippedCard = false;
    secondCard = this;

    checkForMatch();
  }
}

function checkForMatch() {
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

  isMatch ? disableCards() : unflipCards();
}

function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);
}

function unflipCards() {
  lockBoard = true;
  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');
    lockBoard = false;
  }, 1500);
}

function resetBoard() {
  hasFlippedCard, lockBoard = [false, false];
  firstCard, secondCard = [null, null];
}

(function shuffle() {
  cards.forEach(card => {
    let randomPos = Math.floor(Math.random() * 12);
    card.style.order = randomPos;
  });
})();

cards.forEach(card => card.addEventListener('click', flipCard));

标签： javascripthtmlcssiosdebugging

解决方案

推荐阅读