Git Product home page Git Product logo

netqwop's Introduction

netQWOP

Inspiration

One of our favorite old Flash games is QWOP. It's a simple game---sprint a hundred meters straight forward---with a twist: you have to control each muscle in your legs individually. Typically, QWOP will flail down the track for a couple meters before landing in an emphatic faceplant, at which point you lose the game.

What it does

netQWOP is a version of the original QWOP designed for friends. Making the controls of the original QWOP even more infuriating, in netQWOP, four separate people are each responsible for controlling one part of QWOP's body: swinging out or in his thighs and calves.

To play, everyone opens the site on their phones, one person opens it on a web browser connected to a big screen, each person types in the game code and picks their control, and you're off to the races. The game also has a global leaderboard, which displays the top 5 farthest runs at the end of every match.

How we built it

The frontend of the project is build in React, with Zeit's next.js framework for routing, server-side rendering, and styling (CSS-in-JS). The physics engine we used is a JavaScript port of Box2D called planck.js, coupled with our own rendering engine based on an HTML5 <canvas/>.

On the backend, the realtime core of the game relies on a server running socket.io, which keeps track of the game lobbies and serves as a message broker between clients. We use Google Cloud Firestore to store and update the leaderboard at the end of each round.

For performance and fast load times, the JS bundles for the host (big-screen) and controller (each player's phone) are compiled and served separately, so no extra dependencies are shipped to the client.

Challenges we ran into

Getting the physics to work was incredibly difficult. To make the game playable, each joint on QWOP's body had to have constraints (you can't, for instance, bend your knees backwards). We had to tweak the parameters of the simulation a lot---down to the density of QWOP's body, the torque applied by the game controls, and the friction of QWOP's shoes on the track.

Accomplishments that we're proud of

We're really proud of the user experience of the game---loading it is snappy, rendering is smooth even on low-power platforms, and the navigation is extremely simple.

What we learned

Learning how physics simulations worked was entirely new for us. We had to learn about all the annoying corners of an iterative solver---how to tweak parameters so objects were stable, torques balanced out, and the model wasn't a jittery mess.

What's next for netQWOP

In the future, the app could easily be packaged for smart-TV platforms, (maybe using something like Cordova) making it really easy to load straight into the game without messing with getting a computer plugged in and set up.

netqwop's People

Contributors

mapinis avatar wgoodall01 avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar

netqwop's Issues

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.