DinoNeuroplay

by Tishran

HTML

<script src="https://braincomputer.io/development/assets/js/notifyObject-1.0.0.js"></script>
<script src="https://braincomputer.io/development/assets/js/neuroplay-1.0.0.js"></script>
<div class="textContainer">
  Медитация:
  <h1 id="med" style="color: #159">?</h1>
  <br /><br />
  Концентрация:
  <h1 id="con" style="color: #C30">?</h1>
</div>

<div class="container">
  <div id="white"></div>
  <canvas id="game" width="640" height="400"></canvas>
</div>

CSS

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   overflow: hidden;
 }

 canvas {
   display: block;
   position: absolute;
 }

 .container {
   width: 640px;
   height: 400px;
   position: relative;
   margin: auto;
   border: 2px solid black
 }

 .textConatainer {
   position: relative;
   margin: auto;
 }

 #white {
   position: absolute;
   margin-top: 35px;
   opacity: 0.2;
   width: 640px;
   height: 365px;
   z-index: 10;
   background-image: url(https://gifki.info/uploads/posts/2017-02/1486476108_718-belyy-shum.gif);
 }

JavaScript

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const noise = document.getElementById("white");

var neuroplay = null;

let score;
let scoreText;
let highscore;
let highscoreText;
let player;
let gravity;
let obstacles = [];
let gameSpeed;
let keys = {};
let flag = false;

let initialSpawnTimer = 200;
let spawnTimer = initialSpawnTimer;

document.addEventListener('keydown', function(evt) {
  keys[evt.code] = true;
});
document.addEventListener('keyup', function(evt) {
  keys[evt.code] = false;
});

document.addEventListener("keypress", function(e) {
  if (e.key == "Enter" && !flag) {
    flag = true;
    Start();
  }
});

class Player {
  constructor(x, y, w, h, c) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.c = c;

    this.dy = 0;
    this.jumpForce = 15;
    this.originalHeight = h;
    this.grounded = false;
    this.jumpTimer = 0;
  }

  Animate() {
    // Jump
    if (keys['Space'] || keys['KeyW']) {
      this.Jump();
    } else {
      this.jumpTimer = 0;
    }

    if (keys['ShiftLeft'] || keys['KeyS']) {
      this.h = this.originalHeight / 2;
    } else {
      this.h = this.originalHeight;
    }

    this.y += this.dy;

    // Gravity
    if (this.y + this.h < canvas.height) {
      this.dy += gravity;
      this.grounded = false;
    } else {
      this.dy = 0;
      this.grounded = true;
      this.y = canvas.height - this.h;
    }

    this.Draw();
  }

  Jump() {
    if (this.grounded && this.jumpTimer == 0) {
      this.jumpTimer = 1;
      this.dy = -this.jumpForce;
    } else if (this.jumpTimer > 0 && this.jumpTimer < 15) {
      this.jumpTimer++;
      this.dy = -this.jumpForce - (this.jumpTimer / 50);
    }
  }

  Draw() {
    ctx.beginPath();
    ctx.fillStyle = this.c;
    ctx.fillRect(this.x, this.y, this.w, this.h);
    ctx.closePath();
  }
}

class Obstacle {
  constructor(x, y, w, h, c) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.c = c;

 ...