Как заставить работать предварительную версию игры на память? - PullRequest
Новая
       0

Как заставить работать предварительную версию игры на память?

0 голосов
/ 17 июня 2020

Здравствуйте, я следил за этим видео на YouTube под названием «Learn JavaScript by Building 7 Games - Full Course». И у меня было до 6 минут, когда мы должны были посмотреть, что было сделано в браузере, и я не могу ничего показать, кроме названия заголовка, ничего не работает, даже писать. Это предварительный просмотр игры с картами памяти, и я должен видеть сделанные мной пустые карты, а также текст с надписью «Score:», но я ничего не вижу ни в одном браузере.

Это мой html код. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Memory Game</title>
<link rel="stylesheet" href="style.css"></link>
<script src="app.js" charset="utf-8"><script>
</head>
<body>

<h3>Score:<span id="result"></span></h3>

<div class="grid">
</div>

</body>
</html>

А это мой javascript код 

document.addEventListener('DOMContentLoaded', () => {

    //card options
    const cardArray = [
    {
        name: 'kyung',
        img: 'images/kyung.png'
    },
    {
        name: 'kyung',
        img: 'images/kyung.png'
    },
    {
        name: 'marmalade',
        img: 'images/marmalade.png'
    },
    {
        name: 'marmalade',
        img: 'images/marmalade.png'
    },
    {
        name: 'jangmi',
        img: 'images/jangmi.png'
    },
    {
        name: 'jangmi',
        img: 'images/jangmi.png'
    },
    {
        name: 'tadashi',
        img: 'images/tadashi.png'
    },
    {
        name: 'tadashi',
        img: 'images/tadashi.png'
    },
    {
        name: 'jason',
        img: 'images/jason.png'
    },
    {
        name: 'jason',
        img: 'images/jason.png'
    },
    {
        name: 'genki',
        img: 'images/genki.png'
    },
    {
        name: 'genki',
        img: 'images/genki.png'
    },
]

const grid = document.querySelector('.grid')

//create your board
function createBoard() {
    for (let i = 0; i < cardArray.length; i++) {
        var card = document.createElement('img')
        card.setAttribute('src', 'images/blank.png')
        card.setAttribute('data-id', i)
        // card.addEventListener('click', flipcard)
        grid.appendChild(card)
    }
}
createBoard()

Кто-нибудь, пожалуйста, скажите мне, что я делаю не так? "// card.addEventListener ('click', flipcard)" должен быть закомментирован, потому что видео еще не соответствует этой части.

Ответы [ 2 ]

0 голосов
/ 17 июня 2020

Вы забыли закрыть тег скрипта: 

<script src="app.js" charset="utf-8"><script>

Весь ваш код HTML записан в теге скрипта, который обязательно вызовет ошибку Syntex.

0 голосов
/ 17 июня 2020

У вас есть 1 < cardArray.length, но это должно быть i < cardArray.length в вашем for l oop.

Это приводит к бесконечному l oop, так как 1 всегда меньше cardArray.length (12).

Изменить: 

for (let i = 0; 1 < cardArray.length; i++) {
    // Code inside loop
}

Кому: 

for (let i = 0; i < cardArray.length; i++) {
    // Code inside loop
}

Или используйте более современный способ на l oop через массивы: 

cardArray.forEach((_, i) => {
    // Code inside loop
});

Обратите внимание, что я использовал _, чтобы указать, что значение не используется внутри вашего l oop, а просто индекс. 

document.addEventListener('DOMContentLoaded', () => {

  //card options
  const cardArray = [{
      name: 'kyung',
      img: 'images/kyung.png'
    },
    {
      name: 'kyung',
      img: 'images/kyung.png'
    },
    {
      name: 'marmalade',
      img: 'images/marmalade.png'
    },
    {
      name: 'marmalade',
      img: 'images/marmalade.png'
    },
    {
      name: 'jangmi',
      img: 'images/jangmi.png'
    },
    {
      name: 'jangmi',
      img: 'images/jangmi.png'
    },
    {
      name: 'tadashi',
      img: 'images/tadashi.png'
    },
    {
      name: 'tadashi',
      img: 'images/tadashi.png'
    },
    {
      name: 'jason',
      img: 'images/jason.png'
    },
    {
      name: 'jason',
      img: 'images/jason.png'
    },
    {
      name: 'genki',
      img: 'images/genki.png'
    },
    {
      name: 'genki',
      img: 'images/genki.png'
    },
  ]

  const grid = document.querySelector('.grid')

  //create your board
  function createBoard() {
    for (let i = 0; i < cardArray.length; i++) {
      var card = document.createElement('img')
      card.setAttribute('src', 'images/blank.png')
      card.setAttribute('data-id', i)
      // card.addEventListener('click', flipcard)
      grid.appendChild(card)
    }
  }
  createBoard()
});
<h3>Score:<span id="result"></span></h3>
<div class="grid"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...