Neuroplay

by gamehunt

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 id="scene">
  <p id="params" style="color: #159">?</p>
  <p id="hits" style="color: #159">Hits: 0</p>
  <p id="jumps" style="color: #159">Successful jumps: 0</p>
  <div id="agent" style="position:absolute; top: 0; left:30%; ">
    
  </div>
  <div id="ground" style="position:absolute; left: 0px; bottom:30%; width: 100%;">
  </div>
</div>

CSS

#scene{
  background: url("https://i.postimg.cc/63R6D5xF/neuro-bg.jpg") no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: 1000px;
  max-height: 480px;
  min-height: 480px;
}

.fence{
  position: absolute;
  right: 0px;
  bottom: 11%;

}

.params{
  border: 4px double black;
}

JavaScript

var neuroplay = null;
	
var agent = null;
  
class Agent{
	
  constructor(){
  	this.__element = document.getElementById("agent");
    this.__ground = document.getElementById("ground");
    this.__gravitySpeed = 15;
    this.__jumpForce = 9;
    this.__jumpPhase = 0;
    this.__animState = false;
  }
  
  getY(){
    var elStyle = window.getComputedStyle(this.__element);
    var topValue = elStyle.getPropertyValue("top").replace("px", "");
    var heightValue = elStyle.getPropertyValue("height").replace("px", "");
		return Number(topValue) + Number(heightValue);
	}
  
  setY(y){
    var elStyle = window.getComputedStyle(this.__element);
    var heightValue = elStyle.getPropertyValue("height").replace("px", "");
    this.__element.style.top = y - Number(heightValue) + "px";
  }
  
  setX(x){
    this.__element.style.left = x + "px";
  }
  
  
  getX(){
  	var elStyle = window.getComputedStyle(this.__element);
    var leftValue = elStyle.getPropertyValue("left").replace("px", "");
		return Number(leftValue);
  }
  
  move(x,y){

  	this.setY(this.getY() + y);
    this.setX(this.getX() + x);
  }
  
  __getGroundLevel(){
		var gStyle = window.getComputedStyle(this.__ground);
    var topValue = gStyle.getPropertyValue("top").replace("px", "");
  	var gY = Number(topValue);
    return gY;
	}
  
  tick(){
    this.__animState = !this.__animState;
    if(this.__jumpPhase != 0){
      $("#agent").html("<img src=\"https://i.postimg.cc/c46RXCJh/neuro-agent-jump.png\" style= \"width: 17%; height: 17%\">");
    	this.__jumpPhase--;
      this.move(0,-this.__gravitySpeed*this.__jumpForce/8)
    }else{
      if(this.__animState){
    	$("#agent").html("<img src=\"https://i.postimg.cc/sXNFS1X8/neuro-agent-alt.png\" style= \"width: 20%; height: 20%\">");
      }else{
    	$("#agent").html("<img src=\"https://i.postimg.cc/hPMTz1Zy/neuro-agent.png\" style= \"width: 20%; height: 20%\">");
      }
      if(this.getY() < this.__getGroundLevel()){
   ...