Giter Site home page Giter Site logo

wdi-project-1's Introduction

LIT UP

First Independent Project for General Assembly WDI22(Hashtag)

Introduction

Lit Up is a single player game with a simple premise: Just turn off all the lights. Easy, right?

How To Play

The game board is a grid of squares with some pre-picked boxes already alight. To switch a light on or off, you just need to click on your chosen square. This is where things get slighty more tricky: each time you click on a light, your click will also switch every square that touches your clicked square's sides.

Your moves are counted as you play, and once you complete a level, you are given the option to move up to the next level or replay your last one, maybe you could improve your score?

Build

Lit Up was built using HTML, CSS and JQuery, from an Object Oriented approach. Google Webfonts Quicksand and Audiowide are featured. The sound of Ajay making a pop noise with his mouth has been used to audibly notify player of a click. A small amount of css animation was used on game setup.

Features

Seventeen Levels

Moves counter updates during game play

Level indicator same as above

Reset button to start level again should you get stuck

Modal gives the replay or next level options upon completion of a level

Challenges

The biggest challenges I faced making the game were bug based, and both kind of similar. I found that on completing the second level, the load of the next level was displayed incorrectly - more lights were lit than were supposed to be. After many console.logs I was able to identify that I was experiencing a problem with control flow, essentially the event listeners on my modal buttons were being added over again each time the modal was displayed, so after level two, if I clicked next level, the next level function was being run twice.

I made an attempt at animating the elements which although worked I was fairly displeased with.

Wins

The algorithm

or if/else statement in the function (litUp.getIndex) that determines which lights are to be toggled was very satisfying to write, and gratifying in that it worked straight away.

The modal

I'd never heard of these before beginning the project so was pleased I was able to implement this technology on my own.

The light effect

looks so good

wdi-project-1's People

Contributors

abinocoe avatar

Watchers

James Cloos 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.