Giter Site home page Giter Site logo

emoji-maze's Introduction

Emoji Maze

Solve mazes with emojis in different game modes: normal, hard, get the goal and infinity.

Menu section in Emoji MazeGameplay in Emoji Maze

๐ŸŽฅ Video demo

Demo "Emoji Maze" by Izak Cancino for CS50x 2023

๐Ÿ“Œ Characteristics

  • Game modes: The extension has four game modes, each with different functionality or goals, they are:

    • ๐Ÿฃ Normal: It has the goal to complete one maze with normal difficult, it is a 11x11 grid. The score taken in this game mode is the time used to complete the maze.

    • ๐Ÿ‘ฟ Hard: Is similar to the Normal mode, but its principal difference is the size of the maze, it is a 27x27 grid.

    • ๐Ÿ Get the goal: In this game mode the goal to reach is complete ten mazes, them difficult level is gradual, starting with 11x11 grids until reach 27x27. The punctuation taken in this is the time, the lowest time is best.

    • โŒ› Infinity: Every time that the user opens this game mode the difficult grade will be restarted, but the score will be persistent, this game mode never ends, so the score doesn't have limits.

  • Random mazes: When the user starts a game, the maze is randomly generated, cell by cell, doing that the user have every time a different maze, creating always a new challenge to solve.

  • High scores: Each game mode have a different use of the high scores, but them will always be saved locally doing them persistent and giving to the user the possibility of improve themselves.

๐Ÿ’ป Technical characteristics

All the functionalities were made with JavaScript: the maze generation system, printing them, listening for each key pressed and them responses (move the player or exit to the menu).

The randomness system function in the next way:

  • First was given some width and height values, all the grid is filled with โฌœ, after all the out-border is filled with โฌ› limiting the movement only in the grid.

  • After that, all the cells where the x and y coordinates are even, is added a โฌ› and its position is saved in an array, this until end with all the even coordinates.

  • Next to that, with the array of coordinates, for each coordinate is selected a contiguous cell (top, right, bottom, or left) and filled with a โฌ›, until end with all the array.

  • Later, randomly is selected a grid corner (top-right, top-left, bottom-left, or bottom-right), after that is added a predesigned spawn box (where the player will spawn), and in the opposite corner are selected and saved the goal coordinates.

  • Finally, the maze grid and entities coordinates (the player and goal) are joined and showed.

โœจ Usage

Download the folder, charge it in your Chrome Extensions Manager, open it and start to play!

Menu

Select a game mode to start to play it.

Game

The objects in the maze are:

๐Ÿ˜€ <--- The player
๐Ÿ”‘ <--- The goal
โฌ› <--- The barriers cells (the user can't pass over them)
โฌœ <--- The empty cells (the user can pass over them)

For win one maze, you need to move the player emoji across the maze to get the key emoji.

The controls are:

Player movement:
[W or Up]       <--- Go up
[S or Down]     <--- Go down
[A or Left]     <--- Go to the left
[D or Right]    <--- Go to the right

Others:
[M, Backspace, Delete, Escape or Pause] <--- Return to the menu

๐ŸŒ Author

Izak Cancino

emoji-maze's People

Contributors

izakcancino avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.