Neuroplay

by dmitry_konyshev

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>
<head>
  <title>Neuroplay Pong Game</title>
  <meta charset="UTF-8">
  <style>
  html, body {
    height: 100%;
    margin: 0;
  }

  body {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  dialog {
    background: rgba(255, 255, 255, 0.7);
    width: 300px; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
   }
  </style>
</head>
<body>
<button id="openSettings">Настройки</button>
  <dialog>
   <input type="radio" value="med" checked name="neuroChoice"/>Медитация
   <input type="radio" value="con" name="neuroChoice"/>Концентрация
   <p>Сложность: <input type="range" min="1" max="3" step="1" id="GameDifficulty" 
   oninput="setDifficulty()" value="1"></p>
   <p><button id="applySettings">Применить настройки</button></p>
   <button id="closeSettings">Закрыть</button>
  </dialog>
<canvas width="720" height="720" id="game"></canvas>
</body>
</html>

JavaScript

//нейроданные и нейрофункции
var meditationValue = 50;
var concentrationValue = 50;

function bci(data) {
  meditationValue = data.meditation;
  concentrationValue = data.concentration;
}

const canvas = document.getElementById('game');
const context = canvas.getContext('2d');
const grid = 20;
const paddleSpeed = 6;
//определяет, насколько случайно мяч будет менять направление после столкновения 
//(в процентах, лучше не выставлять больше 10)
const RNGcontribution = 1;

//дефолтные значения переменных изменяемых в настройках
var difficultyValue = 1;
var neuroType = 'med';
var gameScore = 0;
var gameStopped = false;

var paddleHeightTemp = grid * 12;
const paddle = {
  // старт в центре слева
  width: grid,
  height: paddleHeightTemp,
  x: grid * 2,
  y: grid * 1.5 + canvas.height / 2 +  - paddleHeightTemp / 2,
  // скорость дощечки
  dy: 0
};

var ballSpeedTemp = 1;
const ball = {
  // старт у стенки
  x: canvas.width - 3 * grid,
  y: canvas.height / 2 + grid * 1.5,
  width: grid * 1.5,
  height: grid * 1.5,
  // ресет
  resetting: false,
  // вектор мяча
  velocity: ballSpeedTemp,
  angle: Math.PI * 0.75
};

//чек коллизии
function collides(obj1, obj2) {
  return obj1.x < obj2.x + obj2.width &&
    obj1.x + obj1.width > obj2.x &&
    obj1.y < obj2.y + obj2.height &&
    obj1.y + obj1.height > obj2.y;
}

// цикл игры
function loop() {

  if (!gameStopped) {
    requestAnimationFrame(loop);
  }

  context.clearRect(0, 0, canvas.width, canvas.height);

  //изменение скорости дощечки + отрисочка в зависимости от значения
  // медитации / концентрации
  if (neuroType == 'med') {
    context.fillText('Медитация: ' + meditationValue + '%',
    grid * 10, grid * 2.5, grid * 16);
    
    if (meditationValue >= 50) {
     	paddle.dy = -paddleSpeed * (meditationValue / 50 - 1);
    } 
    else if (meditationValue < 50) {
    	paddle.dy = paddleSpeed * (1 - meditationValue / 50);
    }  
  } 
  else if (neuroType == 'con') {
    context.fillText('Концентрация: ' +...