Giter VIP home page Giter VIP logo

ilovehue's Introduction

I Love Hue

Handmade with love by Neil Italia

Live Demo   |   Trello Board   |   Connect with me on LinkedIn!


📝 About

This is a peaceful game of sorting colors. The main goal of the game is to sort an entire grid of colors based on hue, saturation, and lightness values. This is a clone of a popular mobile game also called "I Love Hue", recreated with HTML, CSS and vanilla JavaScript.

Tech Stack

                                          

🕹 Game Modes

You can play a 3x3 puzzle (Easy), a 6x6 puzzle (Advanced), or a full 9x9 puzzle (Expert). After completing a puzzle and sorting colors, you score increases depending on how many tiles are present: +9 for easy puzzles, +36 for advanced puzzles, +81 for expert puzzles. Your score increases the more boards you complete!

📸 Screenshots

      

🚦 Getting Started

Visit the live demo hosted on Surge, read through the initial prompt for your name and if you want to accept cookies for this game. At the start of every game, you see a completed puzzle. The game shuffles the board then you can go and sort! An instructions page is accessible from anywhere in the game in case you need it again. If the game is too bright, you can turn on dark mode with the button in the center.

🏗 Thought Process

    

Future Updates

  • Dark Mode
  • Pull colors from an external API
  • Interpolate any number of colors given only 2 colors
  • Dynamically generate puzzles
  • Hexagonal grids

📢 Shoutouts

The Original Game

Cookies & Expiration dates

Array Destructuring

Windows Color Picker

CSS Only Tooltip

Sortable

Queries from URLs

Dark Mode

ilovehue's People

Contributors

neilitalia avatar

Stargazers

jayzhuo 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.