Coder Social home page Coder Social logo

Comments (6)

jamesroutley avatar jamesroutley commented on August 12, 2024 1

It would be nice if we abstracted 24a2's engine logic from the presentational layer

The more I think about splitting this out the more I like it. It lets you do cool things like inject a fake renderer for use in tests - You can start a game, run it for a couple of iterations then assert that certain dots have been set to certain colours. Testing at the moment is pretty difficult because internal logic is closely intertwined with displaying stuff

from 24a2.

Givup avatar Givup commented on August 12, 2024 1

Created PR #13 to share my implementation of replacing p5.js. It replaces all calls to p5, and doesn't try to split the engine logic and rendering.

In summary, the changes are:

  • Drawing now uses Canvas API
  • Mouse and keyboard input use addEventListener
  • "Game loop" is implemented using requestAnimationFrame

Problem with these are that these are only for browsers AFAIK, so when a custom Renderer is implemented, these should be put into a CanvasRenderer or similar.

from 24a2.

Givup avatar Givup commented on August 12, 2024

I played around with removing P5.js, and got it working using the Canvas API. Screenshot P5 vs Canvas API.

If we want to separate the engine logic from rendering, this could be done by optionally providing some kinda renderer instance via GameConfig, that implements a simple interface for drawing the dots, defaulting to canvas renderer.

If you want, I can make a branch and tidy up my code a bit, so we can discuss further details if you're interested in the implementation.

from 24a2.

jes avatar jes commented on August 12, 2024

I'd definitely suggest sharing the code that removes P5. I actually came here now to do just that myself.

Re. splitting up engine and rendering: personally I'd want the game to be oblivious of the renderer, so sticking it in GameConfig wouldn't quite be ideal.

For example, it would be relatively easy to make a CLI renderer for 24a2 that draws dots in the terminal. Ideally we'd be able to take a game.js file that runs in 24a2 in the browser, and run it with the CLI version without having to edit any part of the game.js.

I'm also toying with the idea of making a hardware console for 24a2 using an Espruino (microcontroller that can run JavaScript), and again it would be cool if we could just drop in a game.js file and have it work with no changes required.

from 24a2.

graphnode avatar graphnode commented on August 12, 2024

This should also help with the continuous key press problem refered in this card: https://github.com/jamesroutley/24a2/projects/1#card-36909442

from 24a2.

jamesroutley avatar jamesroutley commented on August 12, 2024

Implemented in #28

from 24a2.

Related Issues (14)

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.