Build a physics game without using canvas in Meteor

Hi guys,
I need help to pass my Interview guys please.

I am asked to build a physic gravity game without using canvas technology.

Is anyone know how I can achieve this and implement it in MeteorJS.

Please Please please!

Love :heart:,

SVG, or just manipulate the position of absolutely positioned img elements.

1 Like

Thank you @wildhart.
What do you think if I use PHYSICJS?

Sorry, I’ve no experience of using physics simulation in JS. Have in Matlab, but not in JS.

But if you want to use a reactive UI library to manipulate the position of elements on the page then you’d have to use SVG or native DOM elements rather than canvas anyway, because a canvas isn’t easy to update re actively because the content isn’t part of the DOM.

If you are new to front-end development, and also if you want a high frame rate then I would recommend either Vue.js or Svelte as your front end library. There are plenty of resources in the meteor guide about using Vue.js and quite a few posts from people on these forums who’ve started to use Svelte. I think React is still a bit slower than Vue.js and neither will be as quick as Svelte, plus in my opinion React has a much steeper learning curve than both.

1 Like

Thank you so much. I think PIXIJS will handle the update and rendering pretty well. But I will consider all details to achieve it.

Thank you so much.
Love,

Just check that pixi isn’t using a canvas as well (it should by default, because canvas is just much more performant)

I’m assuming they’re asking you to do this so you can prove you know how to implement basic physics, so I would do it without a framework or library. Especially when gravity is fairly simple.

To implement gravity, you will need to add velocity to all game objects in the downwards direction (normally -y) each frame.
So start with a main loop (either requestAnimationFrame, setInterval or setTimeout), where you iterate over each object in the scene and add a little bit to each object’s velocity.

In a way, the “without canvas” is a bit of a trick, because the data structures and maths are identical with and without. The difference is in the rendering, so you will want to have <div> or <img>s and modify their css with transform: translate3d(x, y, z) to move them around

1 Like

Wow! You are saving my Life @coagmano. You are definitely right. I checked pixi source code and they are using canvas by default. Also I will try use basic Js and html to do the work.

But can you help me with a link or something. It’s my first time in gaming object and stuff. I really need this Job. Please please please!

Love :heart:

Here’s a rough scaffold you can work with.
You get some minimal classes, and a way to render the positions onto DOM elements.
You’ll want these elements to be absolutely positioned and you’ll want to modify the classes to allow settings starting positions and whatever else is necessary.

I also haven’t added any gravity yet, but I’m not going to solve your interview question for you!
Hopefully the scaffold makes it a bit clearer how you would implement it anyway

class Scene {
  children: [],
  update() {
    for (const child of scene.children) {
      child.update();
    }
  }
}
class Vector2 {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}
class GameObject {
  constructor({ element }) {
    this.element = element;
    this.position = new Vector2(0, 0);
    this.velocity = new Vector2(0, 0);
  }
  update() {
    // Things that happen each frame
  }
}

function renderDOM(scene) {
  for (const child of scene.children) {
    const { element, position: { x, y } } = child;
    element.style.transform = `translate3d(${x}px, ${y}px)`;
  }
}

function start() {
  const scene = new Scene();
  scene.children.push(new GameObject({ 
    element: document.querySelector('#one')
  });
  scene.children.push(new GameObject({ 
    element: document.querySelector('#two')
  });

  function mainLoop(scene) {
    // Schedule the loop to run each frame
    requestAnimationFrame(mainLoop);
    scene.update();
    renderDOM(scene);
  }
  mainLoop()
}


start()
2 Likes

Wow! Thank you so much @coagmano. I love it .
This give me a clear understanding on how to do it all with no canvas. I will design a falling object game. This scaffold helped me a lot.

Thsnk you so much :heart:,