first drop

celer-network · Jul 5, 2019 · f7e0de5 · f7e0de5
1 parent 033ad56
commit f7e0de5
Show file tree

Hide file tree

Showing 19 changed files with 802 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.DS_Store
diff --git a/README.md b/README.md
@@ -1,2 +1 @@
-# celerx-example-go-celer
-This is an example HTML5 game that can be easily integrated with CelerX eSport Gaming SDK. The core game logic is from https://github.com/chrisdothtml/chrome-dino
+# celer-go
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "webpack-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "homepage": "https://asdffgap.github.io/celer-go/",
+  "scripts": {
+    "dev": "webpack --mode development",
+    "build": "webpack --mode production",
+    "start": "webpack-dev-server --mode development --open",
+    "deploy": "gh-pages -d dist"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "gh-pages": "^2.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "style-loader": "^0.23.1",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.2.1"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.4.0",
+    "p5": "^0.7.3",
+    "seed-random": "^2.2.0"
+  }
+}
diff --git a/src/assets/Montserrat-Bold.ttf b/src/assets/Montserrat-Bold.ttf
diff --git a/src/assets/jumpsounds.mp3 b/src/assets/jumpsounds.mp3
diff --git a/src/assets/sprite copy.png b/src/assets/sprite copy.png
diff --git a/src/assets/sprite.png b/src/assets/sprite.png
diff --git a/src/css/style.css b/src/css/style.css
@@ -0,0 +1,18 @@
+* {
+    margin: 0;
+    padding: 0;
+  }
+  html,
+  body {
+    height: 100%;
+    position: fixed;
+    left:50%;
+    transform: translateX(-50%);
+
+  }
+  body {
+    align-items: center;
+    background-color:black;
+    display: flex;
+    justify-content: center;
+  }
diff --git a/src/indext.html b/src/indext.html
@@ -0,0 +1,32 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Celer Go</title>
+    <style>
+        * {
+          margin: 0;
+          padding: 0;
+        }
+        html,
+        body {
+          height: 100%;
+          position: fixed;
+          left:50%;
+          transform: translateX(-50%);
+
+        }
+        body {
+          align-items: center;
+          background-color: #f7f7f7;
+          display: flex;
+          justify-content: center;
+        }
+      </style>
+</head>
+<body>
+
+
+</body>
+</html>
diff --git a/src/js/actors/Actor.js b/src/js/actors/Actor.js
@@ -0,0 +1,35 @@
+import config from '../config.js'
+
+export default class Actor {
+  constructor () {
+    this._sprite = null
+    this.height = 0
+    this.width = 0
+  }
+
+  set sprite (name) {
+    this.height = config.sprites[name].h /2 
+    this._sprite = name
+    this.width = config.sprites[name].w / 2
+  }
+
+  get sprite () {
+    return this._sprite
+  }
+
+  hits (actors) {
+    return actors
+      .filter(Boolean)
+      .some(actor => {
+        if (this.x >= (actor.x + actor.width-6) || actor.x >= (this.x + this.width-6)) {
+          return false
+        }
+
+        if (this.y >= (actor.y + actor.height-6) || actor.y >= (this.y + this.height-6)) {
+          return false
+        }
+
+        return true
+      })
+  }
+}
diff --git a/src/js/actors/Bird.js b/src/js/actors/Bird.js
@@ -0,0 +1,46 @@
+import Actor from './Actor.js'
+import config from '../config.js'
+import { randInteger } from '../utils.js'
+
+function generateYCoord (canvasHeight) {
+  // const maxBirdHeight = Math.max(config.sprites.birdUp.h, config.sprites.birdDown.h) /2
+  const maxBirdHeight = (config.sprites.dinoDuckLeftLeg.h + config.sprites.ground.h)/2
+  const padding = -35
+
+  return randInteger(0, canvasHeight - maxBirdHeight - padding)
+}
+
+export default class Bird extends Actor {
+  constructor (canvasWidth, canvasHeight) {
+    super()
+
+    this.x = canvasWidth
+    this.y = generateYCoord(canvasHeight)
+    this.wingFrames = 0
+    this.wingDirection = 'Up'
+    this.sprite = `bird${this.wingDirection}`
+  }
+
+  nextFrame () {
+    this.x -= config.settings.birdSpeed
+    this.determineSprite()
+  }
+
+  determineSprite () {
+    const oldHeight = this.height
+
+    if (this.wingFrames >= config.settings.birdWingsRate) {
+      this.wingDirection = this.wingDirection === 'Up' ? 'Down' : 'Up'
+      this.wingFrames = 0
+    }
+
+    this.sprite = `bird${this.wingDirection}`
+    this.wingFrames++
+
+    // if we're switching sprites, y needs to be
+    // updated for the height difference
+    if (this.height !== oldHeight) {
+      this.y += this.wingDirection === 'Up' ? -6 : 6
+    }
+  }
+}
diff --git a/src/js/actors/Cactus.js b/src/js/actors/Cactus.js
@@ -0,0 +1,20 @@
+import Actor from './Actor.js'
+import config from '../config.js'
+import { randItem } from '../utils.js'
+
+const VARIANTS = ['cactus', 'cactusDouble', 'cactusDoubleB', 'cactusTriple']
+
+export default class Cactus extends Actor {
+  constructor (canvasWidth, canvasHeight) {
+    super()
+
+    this.sprite = randItem(VARIANTS)
+    this.x = canvasWidth
+    this.y = canvasHeight - this.height - 88
+
+  }
+
+  nextFrame () {
+    this.x -= config.settings.bgSpeed
+  }
+}
diff --git a/src/js/actors/Cloud.js b/src/js/actors/Cloud.js
@@ -0,0 +1,18 @@
+import Actor from './Actor.js'
+import config from '../config.js'
+import { randInteger } from '../utils.js'
+
+export default class Cloud extends Actor {
+  constructor (canvasWidth) {
+    super()
+
+    this.sprite = 'cloud'
+    this.speedMod = randInteger(6, 14) / 10
+    this.x = canvasWidth
+    this.y = randInteger(20, 80)
+  }
+
+  nextFrame () {
+    this.x -= config.settings.cloudSpeed * this.speedMod
+  }
+}
diff --git a/src/js/actors/Dino.js b/src/js/actors/Dino.js
@@ -0,0 +1,67 @@
+import Actor from './Actor.js'
+import config from '../config.js'
+
+export default class Dino extends Actor {
+  constructor (canvasHeight) {
+    super()
+
+    this.canvasHeight = canvasHeight
+    this.isDucking = false
+    this.legFrames = 0
+    this.legShowing = 'Left'
+    this.sprite = `dino${this.legShowing}Leg`
+    this.velocity = 0
+    this.x = 45
+    this.relativeY = 0
+  }
+
+  get y () {
+    // return this.canvasHeight - this.height - 4 + this.relativeY
+    return this.canvasHeight - this.height - 88 + this.relativeY
+  }
+
+  jump () {
+    if (this.relativeY === 0) {
+      this.velocity = -config.settings.dinoLift
+    }
+  }
+
+  duck (value) {
+    this.isDucking = Boolean(value)
+  }
+
+  nextFrame () {
+    // use gravity to gradually decrease velocity
+    this.velocity += config.settings.dinoGravity
+    this.relativeY += this.velocity
+
+    // stop falling once back down to the ground
+    if (this.relativeY > 0) {
+      this.velocity = 0
+      this.relativeY = 0
+    }
+
+    this.determineSprite()
+  }
+
+  determineSprite () {
+    if (this.relativeY < 0) {
+      // in the air stiff
+      this.sprite = 'dino'
+    } else {
+      // on the ground running
+      if (this.legFrames >= config.settings.dinoLegsRate) {
+        this.legShowing = this.legShowing === 'Left' ? 'Right' : 'Left'
+        this.legFrames = 0
+      }
+
+      if (this.isDucking) {
+        this.sprite = `dinoDuck${this.legShowing}Leg`
+      } else {
+        this.sprite = `dino${this.legShowing}Leg`
+      }
+
+      this.legFrames++
+    }
+  }
+}
diff --git a/src/js/config.js b/src/js/config.js
@@ -0,0 +1,61 @@
+
+
+export default {
+  /*
+   * units
+   * ppf: pixels per frame
+   * fpa: frames per action
+   */
+  settings: {
+    bgSpeed: 8, // ppf
+    birdSpeed: 7.2, // ppf
+    birdSpawnRate: 240, // fpa
+    birdWingsRate: 15, // fpa
+    cactiSpawnRate: 50, // fpa
+    cloudSpawnRate: 200, // fpa
+    cloudSpeed: 2, // ppf
+    dinoGravity: 0.5, // ppf
+    dinoLegsRate: 10, // fpa
+    dinoLift: 11, // ppf
+    scoreIncreaseRate: 6 // fpa
+  },
+  sprites: {
+    birdUp: { h: 63, w: 125, x: 707, y: 0 },
+    birdDown: { h: 70, w: 125, x: 832, y: 0 },
+    cactus: { h: 104, w: 44, x: 480, y: 0 },
+    cactusDouble: { h: 82, w: 93, x: 524, y: 0 },
+    cactusDoubleB: { h: 104, w: 89, x: 618, y: 0 },
+    cactusTriple: { h: 62, w: 158, x: 322, y: 0 },
+    cloud: { h: 51, w: 125, x: 957, y: 0 },
+    dino: { h: 140, w: 107, x: 0, y: 0 },
+    dinoDuckLeftLeg: { h:90, w: 162, x: 1083, y: 0 },
+    dinoDuckRightLeg: { h: 92, w: 162, x: 1245, y: 0 },
+    dinoLeftLeg: { h: 140, w: 107, x: 107, y: 0 },
+    dinoRightLeg: { h: 140, w: 107, x: 214, y: 0 },
+    ground: { h: 320, w: 2400, x: 0, y: 139 },
+  },
+  controls: {
+    buttonRadius:56,
+    jumpBtnX:64,
+    jumpBtnY:40,
+    crouchBtnX:160,
+    crouchBtnY:40,
+  }
+
+  // sprites: {
+  //   birdUp: { h: 52, w: 84, x: 708, y: 31 },
+  //   birdDown: { h: 60, w: 84, x: 708, y: 85 },
+  //   cactus: { h: 92, w: 46, x: 70, y: 31 },
+  //   cactusDouble: { h: 66, w: 64, x: 118, y: 31 },
+  //   cactusDoubleB: { h: 92, w: 80, x: 184, y: 31 },
+  //   cactusTriple: { h: 66, w: 82, x: 266, y: 31 },
+  //   cloud: { h: 28, w: 92, x: 794, y: 31 },
+  //   dino: { h: 86, w: 80, x: 350, y: 31 },
+  //   dinoDuckLeftLeg: { h: 52, w: 110, x: 596, y: 31 },
+  //   dinoDuckRightLeg: { h: 52, w: 110, x: 596, y: 85 },
+  //   dinoLeftLeg: { h: 86, w: 80, x: 432, y: 31 },
+  //   dinoRightLeg: { h: 86, w: 80, x: 514, y: 31 },
+  //   ground: { h: 28, w: 2400, x: 0, y: 2 },
+  //   replayIcon: { h: 60, w: 68, x: 0, y: 31 }
+  // }
+}