Flappy

by GivensR

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>
<!DOCTYPE html>
<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>FlappyBird</title>
    <link rel="stylesheet" href="style.css" > 
    <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet">
</head>
<body>
    <canvas id="canvas" width="250" height="414"></canvas>
    Медитация:
<h1 id="med" style="color: #159">?</h1>
<br/><br/>
Концентрация:
<h1 id="con" style="color: #C30">?</h1>
</body>
</html>

CSS

#canvas
{
    background-color:#30c0df;
    border: 2px solid black;
    display: block;
    margin: auto;
    padding: auto;

}

JavaScript

const RAD = Math.PI / 180;
const scrn = document.getElementById('canvas');
const sctx = scrn.getContext("2d");
var neuroplay = null;

function foo() {
$("#canvas").click();
}
function bci(data) {
$("#med").html(data.meditation + "%");
  	$("#con").html(data.concentration + "%"); //для проверки, в коде игры не участвует

if( data.concentration > 50) { // так как у нас нет оборудования, поэтому нужно откалибровать число концентрации
setTimeout(foo, 100);
}}
$(function() 
{
		
    neuroplay = new NeuroplayConnector();
    neuroplay.connect();  
    neuroplay.on('bci', bci);
    setInterval(function() { neuroplay.send('bci'); }, 100);
});

scrn.tabIndex = 1;
scrn.addEventListener("click", () => {
  switch (state.curr) {
    case state.getReady:
      state.curr = state.Play;

      break;
    case state.Play:
      bird.flap();
      break;
    case state.gameOver:
      state.curr = state.getReady;
      bird.speed = 0;
      bird.y = 100;
      pipe.pipes = [];
      UI.score.curr = 0;

      break;
  }
})



let frames = 0;
let dx = 2;
const state = {
  curr: 0,
  getReady: 0,
  Play: 1,
  gameOver: 2,

}

const gnd = {
  sprite: new Image(),
  x: 0,
  y: 0,
  draw: function() {
    this.y = parseFloat(scrn.height - this.sprite.height);
    sctx.drawImage(this.sprite, this.x, this.y);
  },
  update: function() {
    if (state.curr != state.Play) return;
    this.x -= dx;
    this.x = this.x % (this.sprite.width / 2);
  }
};
const bg = {
  sprite: new Image(),
  x: 0,
  y: 0,
  draw: function() {
    y = parseFloat(scrn.height - this.sprite.height);
    sctx.drawImage(this.sprite, this.x, y);
  }
};
const pipe = {
  top: {
    sprite: new Image()
  },
  bot: {
    sprite: new Image()
  },
  gap: 85,
  moved: true,
  pipes: [],
  draw: function() {
    for (let i = 0; i < this.pipes.length; i++) {
      let p = this.pipes[i];
      sctx.drawImage(this.top.sprite, p.x, p.y)
      sctx.drawImage(this.bot.sprite, p.x, p.y + parseFloat(this.top.sprite.height) +...