HTML Canvas game for Vivatech Gamejam of March 2022.

Related tags

Data Visualization 2072
Overview

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 Homebrew package manager installed run brew install yarn. It will install Nodejs which is a desktop javascript engine, and yarn which a javascript packages and dependencies manager.

If you're not on MacOS or don't have homebrew installed, first if you don't have Nodejs installed, install it here.

And then install Yarn like that curl -o- -L https://yarnpkg.com/install.sh | bash

Run the projet

Run yarn install at the root of this directory. It will install all javascript dependencies automatically.

Run yarn dev and go to http://localhost:3000

  • ZONE DE SPAWN
    • dessiner zone de spwn
  • ANIMATION
    • mort nft
  • SON
  • SCENES
    • fin de la partie (victoir btc ou nft)
    • menu
    • (bonus) pause
Comments
  • [Feature] - Assets management

    [Feature] - Assets management

    Assets Manager

    Current Behavior

    Assets a cached inside Game Class / Renderer class.

    Wanted Behavior

    Centralize assets loading and consumption in an AssetManager.

    opened by lafusew 0
  • [Fix] - Integrate delta time in all movements systems

    [Fix] - Integrate delta time in all movements systems

    Integrate delta

    Current behavior

    Movements of btc player is not integrate taking count of delta time.

    Expected behavior

    Moove function for all Unit who implement properly delta time and maybe acceleration and deceleration.

    opened by dovdjian 0
  • [Feature] - Richer UI

    [Feature] - Richer UI

    UI Handler

    Current behavior

    UI rendering and interactions are completely distinct, which may not be the best use case.

    Wanted behavior

    Abstract and clean UI rendering manager. UI rendering and interactions should be tied together to prevent clumsy / unwanted UI interactions behaviors.

    opened by lafusew 0
  • [Fix] - Proper Game class instanciation

    [Fix] - Proper Game class instanciation

    Game instance

    Current behavior

    Game class instantiation isn't properly understood and replays cause Game class to duplicates itself and breaks the game.

    Wanted behavior

    Being able to instantiate and re-instantiate the game through the Game constructor.

    How

    We might have to distinct Game class from "Engine" which handles the Canvas, the deltaTime and all rendering methods.

    • [ ] Add todos or create distinct issues when we know how we could do it.
    opened by lafusew 0
  • [Fix] - Maintanable and more abstract Renderer.

    [Fix] - Maintanable and more abstract Renderer.

    Renderer

    Currently our renderer is not abstracted at all (I pretty much created one function for each Unit/Entity).

    Requirements

    • [ ] Add todos to this issue when abstraction plans are ready
    • [ ] Create a abstract renderer that allows for easier and quicker new renders.
    opened by lafusew 0
  • [Feature] - Implement sound manager

    [Feature] - Implement sound manager

    Sound manager

    Create a proper and abstracted sound manager that can be triggered from any "in-game action"

    Requirements

    • [ ] Create sound manager class.
    • [ ] Play/Stop any sounds any amount of time.
    • [ ] Easy to implements trigger from anywhere in our game app.
    opened by lafusew 0
Owner
Antoine Oddoz
21yo. fullstack dev apprentice. working mainly with typescript & nodejs. decentralized network enthusiast learning Go
Antoine Oddoz
GitHub
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Dec 30, 2022
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.7k Jan 8, 2023
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
Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world <div id="app"><div></div></div> yarn add elem-canvas or npm i

null 15 Apr 13, 2022
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

D3: Data-Driven Documents D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, C

D3 103.8k Jan 3, 2023
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
JAVASCRIPT library with which you can easily draw CANVAS HTML

easycanvas Quick start Documentation: gaidadei.ru/easycanvas Download: gaidadei.ru/easycanvas/easyc.zip Buy premium: gaidadei.ru/easycanvas/premium (A

null 18 Nov 12, 2022
Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas

Planner Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas. Try it yourself at plannerjs.dev Plans created

Brian Vaughn 512 Jan 2, 2023
Renders HTML into the browser's canvas

rasterizeHTML.js Renders HTML into the browser's canvas. See the API. Install $ npm install rasterizehtml Then include a script tag with node_modules

Christoph Burgmer 2.3k Dec 30, 2022
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)

Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO

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

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

null 1 Dec 21, 2021
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 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
🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Jan 2, 2023
Financial lightweight charts built with HTML5 canvas

Lightweight Charts Demos | Documentation | Discord community TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts

TradingView, Inc. 5.8k Jan 9, 2023
Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

Zdog Round, flat, designer-friendly pseudo-3D engine View complete documentation and live demos at zzz.dog. Install Download zdog.dist.min.js minified

Metafizzy 9.5k Jan 3, 2023
🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters. Packages toast-ui.image-editor - Plain JavaScript compo

NHN 5.7k Jan 6, 2023
🦍• [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

Raphael Amorim 1.5k Jan 4, 2023