{"componentChunkName":"component---src-templates-case-study-js","path":"/case-studies/gyro-dodge","result":{"data":{"markdownRemark":{"id":"de2766c4-2a52-58e9-bb7b-377b7aeab71c","html":"

How it Works?

\n

GyroDodge makes use of javascript's Device Orientation API to move the small white dot around your mobile screen & you can shoot projectiles at the direction you are heading toward by tapping on your screen. also also used p5js in gyrododge for making my life bit more easier

\n

here's the code to get the device orientation of the device

\n
// check if browser supports DeviceOrientationEvent event\nif (!window.DeviceOrientationEvent) {\n  alert(\"Sorry, your browser doesn't support Device Orientation\")\n} else {\n  window.addEventListener(\"deviceorientation\", e => {\n    let alpha = event.alpha\n    let beta = event.beta\n    let gamma = event.gamma\n  })\n}
\n

to move the player in the desired location with these parameters, I add them to the player's acceleration by using p5.js's Vector class

\n
\n

check out the code

\n
\n
window.addEventListener(\"deviceorientation\", e => {\n  this.tiltLR = e.gamma\n  this.tiltFB = e.beta\n  let gyro = createVector(this.tiltLR, this.tiltFB)\n  // add the force\n  this.applyForce(gyro)\n})
\n

How I created those asteroids?

\n

To create those polygonal asteroids, I created a Rock.js class, which updates, renders, and generates them.

\n
class Rock {\n  constructor(x, y, radius) {\n    this.pos = createVector(x || random(width), y || random(height))\n    this.vel = p5.Vector.random2D()\n    this.radius = radius || random(15, 30)\n    this.vertices = []\n    this.offsets = []\n    this.total = random(5, 15)\n\n    for (let i = 0; i < this.total; i++) {\n      this.offsets[i] = random(-5, 5)\n    }\n    for (let i = 0; i < this.total; i++) {\n      let angle = map(i, 0, this.total, 0, TWO_PI)\n      let r = this.radius + this.offsets[i]\n      let x = r * cos(angle)\n      let y = r * sin(angle)\n      this.vertices.push({ x, y })\n    }\n  }\n}
\n

In the update method, I added the velocity to the position at each frame. I also checked for collision with the boundaries. If the rock hits the wall, then it just bounces back off them.

\n
update() {\n  this.pos.add(this.vel);\n\n  if (this.pos.x > (width + this.radius) || this.pos.x < this.radius) {\n    this.vel.x *= -1;\n  }\n  if (this.pos.y > (height + this.radius) || this.pos.y < this.radius) {\n    this.vel.y *= -1;\n  }\n}
\n

In render function, I just used p5js's vertex method to draw the polygonal shape

\n
render() {\n  noFill();\n  stroke(255);\n  beginShape();\n  for (const v of this.vertices) {\n    vertex(this.pos.x + v.x, this.pos.y + v.y);\n  }\n  endShape(CLOSE);\n}
\n

In gyrodoge I also have a game mechanism where if you hit an asteroid it can break into multiple asteroids, here's how it works

\n
breakup() {\n  let newA = [];\n  newA[0] = new Rock(this.pos.x, this.pos.y, this.radius * 0.8);\n  newA[1] = new Rock(this.pos.x, this.pos.y, this.radius * 0.8);\n  return newA;\n}
\n

And that's it, for the Rock.js class.

\n

Particles Class

\n

I also added Particles class which emits particles in a random direction, and it extends the Bullet class

\n
class Particle extends Bullet {\n  constructor(spos, angle) {\n    super(spos, angle)\n    this.vel = p5.Vector.random2D()\n    this.life = 1\n  }\n\n  render() {\n    this.vel.y += random(-0.2, 0.2)\n    push()\n    stroke(255, this.life * 255)\n    strokeWeight(2)\n    point(this.pos.x, this.pos.y)\n    pop()\n  }\n  die() {\n    this.life -= 0.03\n  }\n}
\n

Bullet Class

\n
\n

check out the code

\n
\n

In bullet class, there's not much going on just basic stuff

\n
class Bullet {\n  constructor(spos, angle) {\n    this.pos = createVector(spos.x, spos.y)\n    this.vel = p5.Vector.fromAngle(angle)\n    this.vel.mult(10)\n    this.angle = angle\n  }\n\n  update() {\n    this.pos.add(this.vel);\n  }\n\n  render() {\n    ...\n  }\n\n  // checks for hits\n  hits(target) {\n    var d = dist(this.pos.x, this.pos.y, target.pos.x, target.pos.y)\n    if (d < target.radius) {\n      return true\n    }\n    return false\n  }\n\n  // if offscreen we will remove it from the bullet array\n  offscreen() {\n    if (this.pos.x > width || this.pos.x < 0) {\n      return true\n    }\n    if (this.pos.y > height || this.pos.y < 0) {\n      return true\n    }\n    return false\n  }\n}
\n

Player Class

\n
\n

check out the code

\n
\n

In Player class we have some exciting stuff, let's see the constructor first

\n
class Player {\n  constructor() {\n    this.pos = createVector(width / 2, height / 2);\n    this.acc = createVector(0, 0);\n    this.vel = createVector(0, 0);\n    this.radius = 8;\n\n    this.tiltLR = 0;\n    this.tiltFB = 0;\n\n    this.isUsingKeyboard = false; // is using desktop?\n\n    if (!window.DeviceOrientationEvent) {\n      alert(\"Sorry, your browser doesn't support Device Orientation\")\n    }\n\n    if (!('ontouchstart' in window)) {\n      this.isUsingKeyboard = true;\n      window.addEventListener('mousemove', (e) => {\n        let pos = p5.Vector.sub(this.pos, createVector(e.offsetX, e.offsetY))\n        this.applyForce(pos)\n      })\n    } else {\n      window.addEventListener('deviceorientation', (e) => {\n        this.tiltLR = e.gamma;\n        this.tiltFB = e.beta;\n        let gyro = createVector(this.tiltLR, this.tiltFB);\n        this.applyForce(gyro);\n      });\n    }\n  }
\n

As you can see, I initialized the deviceorientation events and player's position and velocity stuff. The most basic method of the Player class is collidePointPoly which detects if a point hits a polygon.

\n
collidePointPoly(px, py, target, vertices) {\n  var collision = false;\n  // go through each of the vertices, plus the next vertex in the list\n  var next = 0;\n  for (var current = 0; current < vertices.length; current++) {\n    // get next vertex in list if we've hit the end, wrap around to 0\n    next = current + 1;\n    if (next == vertices.length) next = 0;\n    // get the PVectors at our current position this makes our if statement a little cleaner\n    var vc = vertices[current];\n    var vn = vertices[next];\n    let vcy = target.pos.y + vc.y;\n    let vny = target.pos.y + vn.y;\n    let vcx = target.pos.x + vc.x;\n    let vnx = target.pos.x + vn.x;\n    if (((vcy > py && vny < py) || (vcy < py && vny > py)) &&\n      (px < (vnx - vcx) * (py - vcy) / (vny - vcy) + vcx)) {\n      collision = !collision;\n    }\n  }\n  return collision;\n}
\n

It's the vital part of the class because it checks if the Player hits any Asteroids (rock), and depending on that, it determines if the game is over or not.

\n

Game Class

\n
\n

check out the code

\n
\n

Game class is just a state manager for the game, which holds all the variables and state management.

\n

we also have AssetMan class which preloads all the assets for the game (sound effects)

\n

Setting Up

\n

And lastly but not least, we have index.js where I wrote all the necessary game logic and initialization.

","fields":{"slug":"/case-studies/gyro-dodge"},"frontmatter":{"demo":"//anuraghazra.github.io/GyroDodge/","iframe":"//www.youtube.com/embed/GdRlkHTMk9c/?modestbranding=1&showinfo=0&autohide=1&rel=0","src":"//github.com/anuraghazra/GyroDodge","title":"GyroDodge","info":{"idea":"Gyrododge was an experimental game for testing out the Javascript's Gyroscope API. It turns out that we can do pretty much anything with it. So i made a game with it.","links":[["Sensors For The Web","https://developers.google.com/web/updates/2017/09/sensors-for-the-web"],["MDN Device Orientation API","https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation"],["p5.js - JavaScript library for creative coding","https://p5js.org/"]],"tech":["Javascript","HTML5 Canvas","GyroscopeAPI"]}}}},"pageContext":{"slug":"/case-studies/gyro-dodge"}},"staticQueryHashes":["1033876704"]}