"Treasure Hunter" Exercise; bug or did I do something wrong?

Hello!

I am currently taking a course for game development here on codecademy. Right now I am working on a project called “Treasure Hunter”. I am on a step where I am making all the spaces in the grid to appear blank. To do this, I am making plot to be blank, and pushing that onto the grid.

// Create your global variables here
let plot;
let grid = [];
let coinCollection = [];
let playerCoins = 0;
let compCoins = 0;

class GameScene extends Phaser.Scene {
    constructor() {
      super({
        key: 'GameScene'
      })
    }

    preload() {
      // We have preloaded our images such as the background, the coins, the digging image etc.
      this.load.image('board', 'https://codecademy-content.s3.amazonaws.com/courses/learn-phaser/Treasure+Hunter/Gameboard+Default.png', {
        frameWidth: 240,
        frameHeight: 320
      });
      this.load.image('gold', 'https://codecademy-content.s3.amazonaws.com/courses/learn-phaser/Treasure+Hunter/gold+coin.png');
      this.load.image('playerGold', 'https://codecademy-content.s3.amazonaws.com/courses/learn-phaser/Treasure+Hunter/gold+coin+shine.png');
      this.load.image('dig', https://codecademy-content.s3.■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■.png');
      this.load.image('blank', 'https://codecademy-content.s3.amazonaws.com/courses/learn-phaser/Treasure+Hunter/blank.png'); // These are the actual images / tiles that load on top of 'board'
    }

    create() {
      // The background is provided below
      this.add.sprite(240, 320, 'board');
    
      // Create the for loops to create the grid
       for (let x = 46; x < 437; x += 78) {
        for (let y = 46; y < 437; y += 78){
          plot = this.add.sprite(x, y, 'blank');
          grid.push(plot)
        }
      } 
      // Create the coins from the grid created above  
      
      // Create the function which decides the coin locations here 
        
      } // End of Create

Supposedly, ‘blank’ is supposed to bring a blank image. However, what I am getting is this;

I failed to see what I am doing wrong, so I used the solution code from codecademy; it still is showing that error image.

What’s going on here?

BTW, the “dig” image is loading fine; idk why it looks that way on this post

2 Likes

Hey,

I am experiencing the same issue - have been trying for 30 minutes to fix it but cannot see why it wouldn’t work given the URL is correct and other images work in it’s place…

I am going to move on and see if anything appears here about it.

Leo

Yea. I had the same issue and i’m thinking it’s gotta be a bug. I tried copying the entire exercise over to Atom and ran the game in my browser, got the same result. I even tried creating my own little green square and still the same issue

So I was doing some research and checked the developer tools in chrome and apparently the problem is a CORS policy issue. Not sure how to fix it yet but working on it

I’m also having this issue. The inspector shows this error in accessing the image from codecadmeny.

Access to XMLHttpRequest at ‘https://codecademy-content.s3.amazonaws.com/courses/learn-phaser/Treasure+Hunter/blank.png’ from origin ‘https://c8132621cfd74d5dbc33090e2d68d4a7.cc-propeller.cloud’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Once I had this error the comparison of clicked plot could not identify as a ‘blank’ square. I was able to make the program still work by replacing the broken ‘blank’ squares with the regular ‘gold’ square. To make this work you have to change the comparison of the item clicked as well as for the computers choices.

create() {
  // The background is provided below
  this.add.sprite(240, 320, 'board'); 
  // Create the for loops to create the grid
  for(let x = 46; x < 437; x += 78){
     for(let y = 46; y < 437; y += 78){
      plot = this.add.sprite(x, y, 'gold');
       grid.push(plot);
     }
  }

 if (gameObject.texture.key === 'gold') {
        game.input.enabled = false;
        let clickedPlot = gameObject;

					//playerCheck starts here
        function playerCheck() {
         for(let i =0; i < coinCollection.length; i++){
           if(clickedPlot === coinCollection[i]){
             playerCoins += 1;
             clickedPlot.setTexture('playerGold')
             break;
           } else{
             clickedPlot.setTexture('dig');
           }
           
         }
          if (playerCoins !== 3) {
            setTimeout(function () {
              compTurn()
            }, 450);
          }
        }
        playerCheck();

      if (compChoice.key !== 'gold') {
        compTurn()
      } else {
        for (let i = 0; i < coinCollection.length; i++) {
          if (compChoice.c === coinCollection[i]) {
            compCoins++;
            grid[item].setTexture('playerGold')
            break;
          } else {
            grid[item].setTexture('dig')
          }
        }
      }
      function input() {
        game.input.enabled = true;
      }
      setTimeout(function () {
        input()
      }, 1000)
    }

hi, i’m having the same problem:/

Hello!

I had a similar issue on a different project.
To solve it, I changed from google chrome to Microsoft edge, and the issue resolved itself. Give it a shot!

Maybe you should continue onward. It may not look the same but it at least functions the same.

nvm I finished yet the computer doesn’t respond

also i tried to switch to edge but still I have issues

I’m running into the same problem in Chrome. When I mouse over the black crossed over squares, their outline and crossline disappear, but clicking on them does nothing. A pity because I wanted to see if my code was right, but guess I’ll just move on then.

I vaguely remember reading something about image loading problems in the little message before starting the project but whenever I try to read it again, it just automatically puts me directly in the project steps part.