Game development in React & ReactNative

- Jasbir Singh Shergill

Hey there!

My name is Jasbir

Freelancer, ex. Myntra, ex. GeekyAnts

Oh yea! 😎

Into Games & stuff

Some live demos

Pipers - svg based modern snake game

https://jasbir23.github.io/LineGame/

RocketGame - Endless Runner

https://jasbir23.github.io/RocketGame/

Why use the web ?

All concepts of game development used here have counterparts in every platform.

Web makes your game cross-platform.

Easy to share / distribute game.

Easy to maintain / update.

Can build light-weight & high performance games.

Game Loop - the fundamental concept

Simple game loop in React

  runGameLoop() {
    // update logic here
	// collision detection here
    this.gameLoop = requestAnimationFrame(this.runGameLoop);
  }

  // Start the loop
   	this.gameLoop = requestAnimationFrame(this.runGameLoop);

requestAnimationFrame vs setInterval

https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout

Collision detection

  isColliding(a, b) {
    return (
      a.left <= b.right &&
      b.left <= a.right &&
      a.top <= b.bottom &&
      b.top <= a.bottom
    );
  }

Bounding rectangle intersection check

    inside(point, vs) {
    	var x = point[0], y = point[1];
        var inside = false;
        for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
            var xi = vs[i][0], yi = vs[i][1];
            var xj = vs[j][0], yj = vs[j][1];
    
            var intersect = ((yi > y) != (yj > y))
                && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
            if (intersect) inside = !inside;
        }
    
        return inside;
    }
    
    // array of coordinates of each vertex of the polygon
	var polygon = [ [ 1, 1 ], [ 1, 2 ], [ 2, 2 ], [ 2, 1 ] ];
	inside([ 1.5, 1.5 ], polygon); // true

Ray casting algorithm to detect if a point lies inside a polygon

Using Lottie for modular animations