Find Your Hat Challenge Project (JavaScript)

Projects Challenge Projects
483

GitHub link
Website deployment link

Good evening to everyone! 3 days ago I posted my successfull solution for a Find my hat game. Now I’m ready to show you a web version of this app. It’s fully debugged and well designed, so you can spend some time and play it few times. I would appreciate any feedback on it. That’s my first project, that I can proudly call a web app. Thanks CodeCademy for a knowledge base that led me to this point. Keep grinding. React is my next destination!

1 Like
484

Please see my version of the Hat Challenge Project. This was enjoyable, especially learning about the terminal kit module and the maze solver enhancement. Whilst the terminal kit module hasn’t actually worked and some function can be made more readable, I am happy to present a working code for now.

485

Great game! I commend you took your time to turn it into a webpage! I feel like I would get stressed in no time :joy:
The webpage looks polished too, great job!

486

Hello! I’m done once again… I recommend you that the first thing you do is pressing H for help to see all the “commands” you have to choose from…
I am thinking on perhaps styling it a little bit with colors in a future, but take my word with a grain of salt because I’m not too sure about it just yet.

Alright, here you have it on my repository: Find your hat
and here it is on Gits: Find-your-hat

If you have any question go ahead and ask, I’m well aware my code is all a mess, so I will do my best to explain it if you want me to!

487

I decided to use WASD keys for movement. This project was a lot of fun.

488

Wonderful work I can tell you really had fun with this.

489

Hello all. This is Roxanne from the Front-End Study cohort. Here is my version of find your hat. It is still fully functional although I do plan on revisiting at some point to complete the final challenge of determining weather or not a puzzle is solvable.

I also did slightly cheat, as I do not like the bulkiness of allowing a user to determine both a height and a width for their field. In my version all fields are square, and I shall probably keep it this way to simplify my logic in the final challenge.

If anyone is on here because they are struggling with building their project, please reach out, I am usually close by and happy to help.

490

This was a fun and challenging project, I hope to get some reviews from others. I definitely did it different than any of the other challenge projects I looked through. And I appreciate the good ideas of how I could further improve the game in the future. I hope my comment descriptions will be useful to anyone else who reviews it.
https://gist.github.com/EliCove/484d423644427d8fe7e2f8ac1906d0cf

491

Hello, here is my solution for the Challenge Find Your Hat. I would appreciate some feedback, it was very challenging to complete.

Thanks!

Challenge Project: Find Your Hat

492

Wow. I feel deeply incompetent. :sweat_smile: Here’s my solution.
Hoping to keep working on this to ensure each generated field can be completed.
IJKL keys for movement.

493

Here is my solution. I’ll be honest, I used a little bit of ChatGPT to help me out… but not enough to simply copy and paste, just to explain concepts.
solution

494

Nice job! I had the same initial thought of using an ‘initial’ options array! Your use of Arrays is really, really good. I guess one thing I would say, and it’s picky, is to maybe separate your move() method into more methods just to keep things small and organized, but that’s also subjective. Great job!

1 Like
495

100%
I always get carried away with huge chunks of code and then have to refactor them into smaller pieces.

496

Here’s my code. It doesn’t seem to be as efficient as everyone else’s (my code always seems to be so much longer than everyone else’s!), but I had a fun time doing this.

Repo: https://github.com/michellecordovi/FindYourHat/tree/main

497

This was a fun project, here is my solution
I made it so that the user dictactes the size of the environment, and it randomly generates the hole locations and quantities.
I’d love some feedback!

498

My solution:

https://gist.github.com/codecademydev/f30c6b3cffbff9efe4d56088101ba349

499

Hi Jessie, that was so nice of you, thank you!

unfortunately the link to that specific blog page doesn’t seem to work anymore, any chance that you still have it up somewhere else?

Thank you again:)

500

[Codecademy export · GitHub]

const prompt = require('prompt-sync')({sigint: true});

const hat = '^';
const hole = 'O';
const fieldCharacter = '░';
const pathCharacter = '*';

let position = [null, null];

class Field {

    constructor(field) {
        this.field = field;
    }

    print() {
        let output = '';
        for (let i = 0; i < this.field.length; i++) {
            output += this.field[i].join('') + '\n';
        }
        console.log(output);
    }

    move(direction) {
        if (!['left', 'right', 'up', 'down'].includes(direction)) console.log('Invalid direction');
        else {
            switch (direction) {
                case 'left':
                    position[1]--;
                    break;
                case 'right':
                    position[1]++;
                    break;
                case 'up':
                    position[0]--;
                    break;
                case 'down':
                    position[0]++;
                    break;
            }
            if ((position[0] >= 0 && position[0] < this.field.length) && (position[1] >= 0 && position[1] < this.field[0].length)) {
                if (this.field[position[0]][position[1]] === fieldCharacter) {
                    this.field[position[0]][position[1]] = pathCharacter;
                }
            }
        }
    }

    static generateField(width, height, percentage) {
        const field = new Array(height).fill(null).map(() => new Array(width).fill(fieldCharacter));
        // Place the first path character in the first row
        let indexRow = 0;
        let indexCol = Math.floor(Math.random() * width);
        field[indexRow][indexCol] = pathCharacter;
        position = [indexRow, indexCol];
        // Place the hat character
        indexRow = Math.floor(Math.random() * height);
        indexCol = Math.floor(Math.random() * width);
        while (field[indexRow][indexCol] === pathCharacter) {
            indexRow = Math.floor(Math.random() * height);
            indexCol = Math.floor(Math.random() * width);
        }
        field[indexRow][indexCol] = hat;
        // Place hole characters
        for (let i = 0; i < Math.floor(height * width * percentage); i++) {
            indexRow = Math.floor(Math.random() * height);
            indexCol = Math.floor(Math.random() * width);
            while ([pathCharacter, hat, hole].includes(field[indexRow][indexCol])) {
                indexRow = Math.floor(Math.random() * height);
                indexCol = Math.floor(Math.random() * width);
            }
            field[indexRow][indexCol] = hole;
        }
        // Return the field
        return field;
    }

}

// Prompt the user to enter the width of the field
const width = Number(prompt('Enter the width of the field: '));

// Prompt the user to enter the height of the field
const height = Number(prompt('Enter the height of the field: '));

// Prompt the user to enter the percentage of holes in the field
const percentage = Number(prompt('Enter the percentage of holes in the field: '));

// Create an instance of the Field class
const field = new Field(Field.generateField(width, height, percentage));

// Print the field
field.print();

// Play the game
while (true) {
    // Prompt the user to enter a direction
    const direction = prompt('Enter a direction (left, right, up, down): ');
    // Move the player
    field.move(direction);
    // Check if the player is out of bounds
    if (position[0] < 0 || position[0] >= field.field.length || position[1] < 0 || position[1] >= field.field[0].length) {
        console.log('You lost because you ran out of bounds');
        break;
    }
    // Check if the player has hit a hole
    if (field.field[position[0]][position[1]] === hole) {
        console.log('You lost because you hit a hole');
        break;
    }
    // Check if the player has hit the hat
    if (field.field[position[0]][position[1]] === hat) {
        console.log('You win !!! you hit the hat !!!');
        break;
    }
    // Print the field
    field.print();
}
501

Here is my code for the following challenge…

const prompt = require('prompt-sync')({sigint: true}); const hat = '^'; const hole = 'O'; const fieldCharacter = '░'; const pathCharacter = '*'; class Field{ constructor(hatsAndHoles,field){ this._field = field; this._hatsAndHoles = hatsAndHoles; } print(field=this._field){ for(let row of this._field){ console.log(row.join(' ')); } } play(){ let x = 0; let y = 0; this.print(); while(this._hatsAndHoles[y][x]===pathCharacter || this._hatsAndHoles[y][x]===fieldCharacter){ let oldX = x; let oldY=y; const direction = prompt("Enter direction:\nN-north\nS-south\nE-east\nW-west\n").toUpperCase(); switch(direction){ case 'N': if(y===0){ console.log("You cannot go further north."); }else{ y-=1; } break; case 'S': if(y>=this._field.length){ console.log("You cannot go further south."); }else{ y+=1; } break; case 'W': if(x===0){ console.log("You cannot go further west."); }else{ x=-1; } break; case 'E': if(x>=this._field[y].length){ console.log("You cannot go further east."); }else{ x+=1; } break; default: } if(this._hatsAndHoles[y][x]===hole){ console.log("\n\n\n") console.log('You fell ! You lose.......'); this.print(this._hatsAndHoles); }else if(this._hatsAndHoles[y][x]===hat){ console.log("\n\n\n") console.log('You win !!'); this.print(this._hatsAndHoles) }else{ console.log("\n\n\n") this._field[y][x]=pathCharacter; this.print(); } } } static generateSystemField(height,width,holes){ let newField = []; for(let i=0;i<height;i++){ newField.push([]); for(let j=0;j<width;j++){ newField[i].push(fieldCharacter); } } let hatx = Math.floor(Math.random()*width); let haty = Math.floor(Math.random()*height); newField[0][0]= pathCharacter; newField[haty][hatx] = hat; for(let k=holes;k>=0;k--){ let holex = hatx; let holey = haty; while(holex===hatx || holex===0){ holex = Math.floor(Math.random()*width); } while(holey===haty || holey===0){ holey = Math.floor(Math.random()*height); } newField[holey][holex] = hole; } return newField; } static generateUserField(height,width){ let newField = []; for(let i=0;i<height;i++){ newField.push([]); for(let j=0;j<width;j++){ newField[i].push(fieldCharacter); } } newField[0][0] = pathCharacter; return newField; } } let field = Field.generateSystemField(5,3,3); let blank = Field.generateUserField(5,3); console.log(field); console.log(blank); const myField = new Field(hatsAndHoles=field,field=blank); myField.play();
502

I tried your solution but I’m stuck after selecting height, width and percentage of holes - the program becomes unresponsive