Javascript game using Three.JS and WebGL, inspired by Geometry Dash, the Dinosaur Game, and a music video by our graphics professor (2021)

Overview

jumpy-abe

By Sophia Oguri ([email protected]), Luke Kratsios ([email protected]), Isha Chirimar ([email protected]), Jacob Hocking ([email protected])

We developed an interactive game called Jumpy Abe, inspired by the Super Sexy Science music video by our graphics professor, Abe Davis. The goal of this game is to jump over and run on as many platforms as possible, while successfully avoiding the dangerous obstacles and not colliding with any of the platforms. We were inspired by this Flappy Cube game implemented in Three.js, which structured our approach for this implementation. We implemented this game using Three.js/WebGL. It is a 2.5D game, with a WebGLRenderer, scene, rendered orthographic 3D camera, directional light, and meshes.

How to Play

  1. Download all files
  2. Open Terminal
  3. Run a server (i.e. python -m http.server 9080)

Game-Specific Features

Objective: Beat the highest score, recorded in the top right corner of the screen

Player movements that yield extra points

  • Running on top of a gold platform
  • Hitting a gold platform from below

Player movements that will not result in anything bad

  • Running on a gold platform or a safe ‘hazard’ platform
  • Hitting the bottom of a gold platform or safe ‘hazard’ platform
  • Running on the ground

Player movements that will result in the player colliding with the platform and falling to the ground

  • Hitting the side of a gold platform or safe ‘hazard’ platform
  • Hitting the corners of a gold platform or safe ‘hazard’ platform
  • Hitting any part of the green ‘vat’ or the red laser beam, from the side, top, or below

Platform Obstacles

  • Platform widths and heights are generated randomly throughout the game and are updated randomly as the game progresses.
  • Platforms are cycled as they reach the left-most side of the game screen, and are moved to the right-most side of the game screen, with randomly updated textures, qualities (safe, boost, dangerous), widths and heights.
  • Platform obstacles will increase in their speed and come faster towards the player as the game progresses.

Music/Sound Effects

  • Music from the Super Sexy Science video will be played as the player runs across the screen.
  • Once the game is over, the music will stop.
  • When the game restarts, the music will start off wherever it was paused at the end of the last run.
  • When the player hits a gold platform or runs on a gold platform, “coin” sound effect will play.
  • When the player dies, a “death” sound effect will play.
You might also like...

🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

Jan 4, 2023

A centralized location for my WebGL and other demos.

🔬 Experiments A centralized location for my WebGL and other demos. Launch Site My work is for and funded by the community. If you used this or found

Dec 26, 2022

🌏 A Declarative 3D Globe Data Visualization Library built with Three.js

🌏  A Declarative 3D Globe Data Visualization Library built with Three.js

Gio.js English | 中文 React Version: react-giojs Wechat minigame: wechat usage Gio.js is an open source library for web 3D globe data visualization buil

Dec 29, 2022

Three.js-based room configurator (floor planner + product configurator)

Three.js-based room configurator (floor planner + product configurator)

Three.js-based room configurator (floor planner + product configurator) Live Features 1. FloorPlan Design Users can edit floorplan in 2d view mode. Th

Dec 28, 2022

Simple tiny dependency graph engine, MobX inspired

🜉 Quarx Simple tiny dependency graph engine, MobX inspired Introduction In less than 200 lines of code and zero dependencies Quarx supports most of M

Nov 2, 2022

Vanila JS Sparklines library inspired by peity.js

Vanila JS Sparklines library inspired by peity.js

Peity Vanilla JS Converts an element's content into a svg mini pie donut line or bar chart and is compatible with any browser that supports svg: C

Dec 12, 2022

hunter phone script NoPixel_3.0 inspired

hunter phone script NoPixel_3.0 inspired

hunter-phone hunter phone script NoPixel_3.0 inspired And Fixd Lang qb-phone qb-phone mixed between nopixel and iphone Dependencies qb-core qb-policej

Jan 2, 2023

Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it. Any

Jan 4, 2023

HTML Canvas game for Vivatech Gamejam of March 2022.

Viva Tech Gamejam A HTML Canvas game made in 2 days for the Vivatech Gamejam of March 22. Requirements Nodejs and Yarn. If you're on MacOS and have Ho

Mar 29, 2022
Owner
null
Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste

Plotly 15.3k Jan 4, 2023
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
The JavaScript library for modern SVG graphics.

Snap.svg · A JavaScript SVG library for the modern web. Learn more at snapsvg.io. Follow us on Twitter. Install Bower - bower install snap.svg npm - n

Adobe Web Platform 13.6k Dec 30, 2022
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 973 Jan 3, 2023
A lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology.

GraphicsJS GraphicsJS is a lightweight JavaScript graphics library with the intuitive API, based on SVG/VML technology. Overview Quick Start Articles

AnyChart 937 Feb 5, 2021
A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Metrics Graphics 7.5k Dec 22, 2022
A library optimized for concise and principled data graphics and layouts.

MetricsGraphics is a library built for visualizing and laying out time-series data. At around 15kB (gzipped), it provides a simple way to produce comm

Metrics Graphics 7.5k Dec 22, 2022
Create graphics with a hand-drawn, sketchy, appearance

Rough.js Rough.js is a small (<9 kB) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw

Rough 17.8k Dec 30, 2022
A cross platform high-performance graphics system.

spritejs.org Spritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-prog

null 5.1k Dec 24, 2022