Giter VIP home page Giter VIP logo

ikbensiep / lofigame Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 121.06 MB

A 2D game without canvas, only html vibes. SVG is used not only for artwork but to annotate as much world/level data as possible, simply by drawing shapes accoring to a few rules. Exploring wether it's worthwile to make it into an open source 2d world game engine.

Home Page: https://ikbensiep.github.io/lofigame/

License: GNU General Public License v3.0

CSS 20.70% HTML 22.04% JavaScript 57.27%
gamedev hacktoberfest javascript svg

lofigame's People

Contributors

ikbensiep avatar

Stargazers

 avatar

Watchers

 avatar  avatar

lofigame's Issues

Add NPC / Opponent system

  • some kind of entities that can be run into and bounced around.
  • make the marshal npcs
  • make marshals approach the player when off track

TODOS

  • #7
  • #8
  • #9
  • #10
  • #11
    • (title screen)
    • player settings/home [name, number, choose team] @ garage
    • choose event (in competition or single track day)
    • (if track day: choose world, else: next event in competition)
    • enter world @ trailer
      • choose next session
      • drive [to pitbox, pitlane exit, racetrack, pitbox]
      • #22
      • choose next session / exit event @ trailer
    • #19

Generate lightmaps (in a clever way)

  • Investigate if a (much) smaller version of the track layout can be generated, used as a light brackground-image over a dark background-color and scaled up to match the world's dimensions. With a bit of luck this could give you some "free" irregularities because of upscaling pixels.

  • After this, investigate if the graphics in the #elevated layer can be duplicated and used as an inverted mask, to block out lights on building corners etc.

  • Implement day/night cycle by animating either this entire layer's opacity, or only the background color

----8<--------8<-------8<--------8<--------8<----

previously, in this issue:

This super simple effect can add dramatic night time lighting:

  1. create an element to cover the entire world (ie, ::after)
  2. add a dark (blue) background color and add a repeating background-image with a radial gradient
  3. set this (pseudo) element's mix-blend-mode to multiply

Yields:

Image

Image

Not bad.

However, to have light around the complex shapes of a racetrack, a repeating pattern won't do.

Keyboard input bug

Sometimes, an input release may not be captured which you'll notice by the car sometimes going straight when you wanted to turn, or it may keep turning when you've clearly released the arrow key(s).

It is my hunch that this is because we're capturing key up and down events and handling those by storing pressed keys in an array. Because of the possibility of frame drop, we might sometimes not capture a keydown or keyup event.

Is there a solution where we capture input on a separate thread or something?

What do when all waypoints have been hit?

Decide how the game should respond.

Currently when all waypoints on all available paths have been hit, the routine will start over at the first path, creating an endless loop.

Need to find out:

  • how to break out of this loop and let the player roam free
  • setting up the next objective / create "win" condition

Game title screen

This is the splash / greeter screen that'll be displayed while the game loads.

(Can be placeholder with just LFO industries logo for now.)

When loading is complete, fade to #13

Add lap timing with sectors

  • Figure out a way to make 3 timing sectors per racetrack.
  • #38

This could be done by adding separate sector <path>s or by repurposing the waypoints found in path#racetrack.

Discuss.

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.