ConnectGame Readme

❓Why my commits often have no names and I'm not using branches❓

• I often create with bursts many things at once
• I don't plan things ahead, I just create things that seems good at that moment
• Sometimes I have bad internet connection and it is troublesome to send commits
• I'm coding alone so creating branches and describing commits is not useful for me

Table of Contents

• Informations
  • Technologies
  • Features
  • Setup
  • Acknowledgements
• Details
  • Project structure
  • Code organization

Informations

Small set of connections-based puzzle games about recreating right connections beetween objects.
See live demo.

---

Technologies

Languages:

• HTML5
• CSS3
• JS ES2018

Libraries and frameworks:

• LESS
• FontAwesome 6.1.1
• GoogleFonts
• canvas-confetti 1.5.1

Programs:

• VSCode
• Prepros (auto preview, processing less and js)

---

Features

• Menu background animation
• Four game modes:
  • Squares (with 3 levels of difficulty) - moving and rotating blocks to make all of them correctly connected to each other
  • Bridges - connecting all islands together with horizontal and vertical bridges that cannot cross each other but islands have limited bridges that can connect to them
  • Pipes - rotating pipes to connect all endpoints to the source
  • Sliders - sliding rows or columns of pipes to connect all endpoints to the source
• Three game mode levels editors:
  • Squares
  • Bridges
  • Pipes and Sliders (both use the same editor)
• Genarting random levels for:
  • Squares
  • Pipes and Sliders
• Multiple languages:
  • Polish
  • English

Note

Room for improvements:

• In-game instruction about game modes
• Bridges game mode levels generator
• Creating at least 200, increasingly harder levels for game modes and their difficulties
• Improving responsiveness on mobile devices
• Adding more game modes (eg. Flow Free, 1 LINE)
• Adding more languages
• Multiplayer

---

Setup

Ways to run this program:

1. Use the live demo
2. Download this repo and start live server (VSCode LiveServer Extension, Prepros preview etc.)

To edit this program:

• Download this repo
• Install Prepros
• Add this project in Prepros
• Start coding

---

Acknowledgements

• Simon Tatham's Portable Puzzle Collection
• Connect Me - Logic Puzzle
• Hashi (Bridges)
• 1 LINE
• Flow Free

Details

This section is a general description of the project required to understand how it works, the exact details are in the code or simply are the code.

Project structure

The project directory tree looks like this:

• 📁 ConnectGame (project folder)
  • 📄 github and prepros config
  • 📄 readme file
  • 📄 index.html file
  • 📁 _for_readme - 📄 files for readme
  • 📁 Images - 📄 images used in the project
  • 📁 Js
    • 📄 top level script files (eg. menu, language, global utilities)
    • 📁 Build - 📄 js files compiled by prepros
    • 📁 Views - 📄 scripts for views (windows that can create history)
    • 📁 Bridges - 📄 scripts for bridges game mode and its levels
    • 📁 Squares - 📄 scripts for squares game mode and its levels
    • 📁 PipesAndSliders - 📄 scripts for pipes and sliders game mode and its levels
  • 📁 Css
    • 📄 css files compiled by prepros
    • 📁 less - 📄 less files

---

Code organization

Warning

Classes must be loaded from bottom to the top to avoid situation when class does not exist in the time of its objects creation