Code Monkey home page Code Monkey logo

project-labyrinth's Introduction

The Maze - A Browser Game

Intro

This is a pair programming project Petra Eriksson and I did together part of the Technigo front end course.

We were provided with the game API and tasked to build a responsive broswer game based on it using React and Redux.

We created the design, front end code. The game illustations were generated using NightCafe Stable Diffusion.

API endpoints

https://labyrinth.technigo.io/start

https://labyrinth.technigo.io/action

The problem

First we played around with the API using Postman. Once we figured out how it worked we decided on how we wanted the game to behave.

Then we broke the project down into subtasks.

We created wireframes for the design in Figma, and then went on to generating the art with NightCafe which we then edited. We finalised the design once we had the images ready, drawing inspiration from them.

The game was written using React and Redux, see Technologies used below. We used styled components for styling, and Lottie for the loading animation.

Lastly, we deployed it to Netlify.

Technologies used

  • HTML
  • CSS
  • React
  • Redux
  • fetch
  • styled components
  • Lottie
  • ESLint for code formatting
  • Netlify for deployment

View it live

https://play-the-maze.netlify.app/

Running locally

cd code
npm i
npm run start

And go to http://localhost:3000

project-labyrinth's People

Contributors

petrasson avatar emolsz avatar dependabot[bot] avatar dmnich avatar puj avatar jenniedalgren avatar a-well avatar hippiekick 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.