«NS_ERROR_NOT_AVAILABLE» при попытке вставить изображение в игру змея

Question

Я написал полностью функциональную игру со змеями. Я использовал дугу, чтобы нарисовать яблоко, но я хотел изменить это и нанести изображение яблока. Теперь это не работает, и я получаю следующую ошибку: NS_ERROR_NOT_AVAILABLE:

Может кто-нибудь объяснить мне, где моя ошибка и как ее исправить? : / Спасибо :) PS: извините за мой английский, я бельгиец;)

Полный рабочий код здесь: https://codepen.io/graphtylove/pen/MZXegG

    function Apple(position) {
        this.position = position;
        this.draw = function() {
          const radius = blockSize / 2;
          const x = this.position[0] * blockSize + radius;
          const y = this.position[1] * blockSize + radius;
          ctx.save();
          ctx.drawImage(foodImg,x,y );
          ctx.restore();
        };

        this.setNewPosition = function() {
          const newX = Math.round(Math.random() * (widthInBlocks - 1));
          const newY = Math.round(Math.random() * (heightInBlocks - 1));
          this.position = [newX, newY];
        };
        this.isOnSnake = function(snakeToCheck) {
          let isOnSnake = false;

          for (let i = 0; i < snakeToCheck.body.length; i++) {
            if (
              this.position[0] === snakeToCheck.body[i][0] &&
              this.position[1] === snakeToCheck.body[i][1]
            ) {
              isOnSnake = true;
            }
          }
          return isOnSnake;
        };
      }

Я хочу иметь изображение яблока вместо красного круга, который у меня есть на самом деле. Но когда я меняю код, игра вылетает.

Answer 1

Ваш код использует различные внешние файлы, и они не работают на codepen. Если вы пытаетесь использовать codepen для создания своего веб-сайта, внешние файлы не будут работать, если только они не созданы по URL-адресу, например google.com/javascriptfile.js. Если вы используете Notepad ++, Notepad или что-то еще, что вы загрузили, то файлы с вашего компьютера могут работать. Например, <img src='myFiles/myImage.png'> не будет работать на codepen и подобных веб-сайтах. Однако Notepad ++ и подобные приложения найдут файл, если папка «myFiles» находится в той же папке, что и ваш файл .html. Вместо этого, при использовании codepen и аналогичных веб-сайтов, вы должны указать URL. Вы можете загрузить свою фотографию / скрипт на сайт, а затем использовать файл внутри сайта. Это также относится к тегу <script> и другим тегам, которые используют src=. Если это не имеет смысла, просто скажите мне в комментариях! Если это поможет, пометьте этот ответ как правильный.