我正在为我的孩子们编写一些基本的网络应用程序游戏。他们有这台旧 iPad：运行版本 9.3.5 的第三代型号 MC707B/A 有人可以帮我解决如何使此代码兼容吗？
游戏在这里：games.lauraizzard.co.uk/MoanaMatch，代码如下。
它适用于其他操作系统（在 Chrome/Safari 等中），但我需要它以便他们可以使用 iPad 的触摸屏功能！非常感谢。
HTML：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Moana Matching Game</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" carset="utf-8"></script>
</head>
<body>
<div class="title"><h1>Moana Matching Game</h1></div>
<div class="score"><h2>Score:<span id="result"></span></h2></div>
<div class="grid">
</div>
</body>
JS：
// fires when the initial HTML document has been loaded
document.addEventListener('DOMContentLoaded', () => {
//intial card array
const cardArray = [
{
name: 'T1',
img: 'images/Moana-tile-1.jpg'
},
{
name: 'T1',
img: 'images/Moana-tile-1.jpg'
},
{
name: 'T2',
img: 'images/Moana-tile-2.jpg'
},
{
name: 'T2',
img: 'images/Moana-tile-2.jpg'
},
{
name: 'T3',
img: 'images/Moana-tile-3.jpg'
},
{
name: 'T3',
img: 'images/Moana-tile-3.jpg'
},
{
name: 'T4',
img: 'images/Moana-tile-4.jpg'
},
{
name: 'T4',
img: 'images/Moana-tile-4.jpg'
},
{
name: 'T5',
img: 'images/Moana-tile-5.jpg'
},
{
name: 'T5',
img: 'images/Moana-tile-5.jpg'
},
{
name: 'T6',
img: 'images/Moana-tile-6.jpg'
},
{
name: 'T6',
img: 'images/Moana-tile-6.jpg'
},
{
name: 'T7',
img: 'images/Moana-tile-7.jpg'
},
{
name: 'T7',
img: 'images/Moana-tile-7.jpg'
},
{
name: 'T8',
img: 'images/Moana-tile-8.jpg'
},
{
name: 'T8',
img: 'images/Moana-tile-8.jpg'
},
{
name: 'T9',
img: 'images/Moana-tile-9.jpg'
},
{
name: 'T9',
img: 'images/Moana-tile-9.jpg'
}
]
//sort the card array randomly.
cardArray.sort(() => 0.5 - Math.random());
console.log(cardArray);
// arrow function returns anything on the right of the =>
// default sorting is alphabetical unless you have something in the parentheses
//console.log(cardArray);
//select the html element 'grid' and define it as 'grid' in JS:
const grid = document.querySelector('.grid');
//select the 'result' span in order to update text
//const resultDisplay = document.querySelector('#result')
//setup 3 blank arrays:
var cardsChosen = [];
var cardsChosenId = [];
var cardsWon = [];
//create game board
function createBoard() {
for (var i = 0; i < cardArray.length; i++) {
//give each card an image elemet:
var card = document.createElement('img');
card.setAttribute('src', 'images/Moana-tile-BACK.jpg')
//give each card an id number:
card.setAttribute('data-id', i)
//console.log(card);
//run the function 'flipcard' when a card is clicked
card.addEventListener('click', flipCard);
//console.log("CARD = " + card);
// WHAT DOES THIS DO ?? DELETE SOMETHING? RESET?
grid.appendChild(card);
}
}
//check for match
function checkForMatch() {
//returns all image elements in the document:
var cards = document.querySelectorAll('img');
//console.log("CARDS = " + cards); //object NodeList
//only need this next bit to turn them white:
const optionOneId = cardsChosenId[0];
const optionTwoId = cardsChosenId[1];
//console.log("Cards Chosen IDs: " + cardsChosenId[0],cardsChosenId[1]);
//checks if the image names are the same
if (cardsChosen[0] === cardsChosen[1]) {
alert('You found a match!');
//makes selected images white:
cards[optionOneId].setAttribute('src', 'images/white.jpg')
cards[optionTwoId].setAttribute('src', 'images/white.jpg')
cardsWon.push(cardsChosen);
} else {
//turn them back over
cards[optionOneId].setAttribute('src', 'images/Moana-tile-BACK.jpg');
cards[optionTwoId].setAttribute('src', 'images/Moana-tile-BACK.jpg');
alert("Sorry, try again!")
}
// empty these arrays:
cardsChosen = [];
cardsChosenId = [];
//print the score at the top of the page
//resultDisplay.textContent = cardsWon.length;
//once score matches half initial card array then game is over:
// THIS BIT ISN'T WORKING:
// MIGHT NEED TO BE IN A DIFFERENT PLACE?
//console.log("cardsWon.length = " + cardsWon.length);
//console.log("cardArray/2 = " + cardArray.length/2);
//if (cardsWon.length === cardArray/2) {
//resultDisplay.textContent = 'Congratulations! 100%';
//}
}
//flip card
function flipCard() {
// this line tells you which card you clicked on [0-17]:
var cardId = this.getAttribute('data-id');
console.log("CARD ID = " + cardId);
// push the ID of the chosen card into the array 'cardsChosen':
cardsChosen.push(cardArray[cardId].name);
//console.log("cardsChosen = " + cardsChosen);
// push the DATA ID into the array:
cardsChosenId.push(cardId);
//console.log(cardsChosenId);
//console.log(cardArray);
//add an image to the square based on the CARD ID it holds
this.setAttribute('src', cardArray[cardId].img)
console.log(cardsChosen.length);
if (cardsChosen.length === 2) {
// check for a match after 500ms:
setTimeout(checkForMatch, 500)
}
}
//run the create board function
createBoard();
})