Git Product home page Git Product logo

pod-racer's Introduction

Welcome to the One and only Pod-Racer Game

Project Introduction

The game mechanics are this: you select a player and track, the game begins and you accelerate your racer by clicking an acceleration button. As you accelerate so do the other players and the leaderboard live-updates as players change position on the track. The final view is a results page displaying the players' rankings.

The game has three main views:

  1. The form to create a race

  2. The race progress view (this includes the live-updating leaderboard and acceleration button)

  3. The race results view

Code

  1. An API. The API is provided in the form of a binary held in the bin folder. This work will be 100% in the front end.

  2. HTML Views. The focus of this Project is not UI development or styling practice, so I am working already provided pieces of UI, all I have did is to call them at the right times.

Getting Started

In order to play this game, we need to run two things: the game engine API and the front end.

Start the Server

The game engine has been compiled down to a binary so that you can run it on any system. Because of this, you cannot edit the API in any way, it is just a black box that we interact with via the API endpoints.

To run the server, locate your operating system and run the associated command in your terminal at the root of the project.

Your OS Command to start the API
Mac ORIGIN_ALLOWED=http://localhost:3000 ./bin/server-osx
Windows ORIGIN_ALLOWED=http://localhost:3000 ./bin/server.exe
Linux (Ubuntu, etc..) ORIGIN_ALLOWED=http://localhost:3000 ./bin/server-linux

Note that this process will use your terminal tab, so you will have to open a new tab and navigate back to the project root to start the front end.

WINDOWS USERS -- Setting Environment Variables

If you are using a windows machine:

  1. cd into the root of the project containing data.json
  2. Run the following command to add the environment variable: set DATA_FILE=./data.json

If you still run into issues running the API server on your machine, sorry build your own game.

Start the Frontend

First, run your preference of npm install && npm start or yarn && yarn start at the root of this project. Then you should be able to access http://localhost:3000.

Project codebase

The core code base is at src/client/assets/javascript/index.js. I used asynchronous methods to achieve tasks to build this game.

API Calls

The API calls are all at the bottom of the file: src/client/assets/javascript/index.js.

Below are a list of the API endpoints and the shape of the data they return. These are all of the endpoints you need to complete the game. Consult this information often as you complete the project:

[GET] api/tracks List of all tracks

  • id: number (1)
  • name: string ("Track 1")
  • segments: number

[GET] api/cars List of all cars

  • id: number (3)
  • driver_name: string ("Racer 1")
  • top_speed: number (500)
  • acceleration: number (10)
  • handling: number (10)

[GET] api/races/${id} Information about a single race

  • status: RaceStatus ("unstarted" | "in-progress" | "finished")
  • positions object[] ([{ car: object, final_position: number (omitted if empty), speed: number, segment: number}])

[POST] api/races Create a race

  • id: number
  • track: string
  • player_id: number
  • cars: Cars[] (array of cars in the race)
  • results: Cars[] (array of cars in the position they finished, available if the race is finished)

[POST] api/races/${id}/start Begin a race

  • Returns nothing

[POST] api/races/${id}/accelerate Accelerate a car

  • Returns nothing

pod-racer's People

Contributors

avejaydev avatar jay2205 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.