player HUD

by YouTingKuo

HTML

<div id="info"></div>
<button id='pass' class='pass'></button>
<button id='spike' class='spike' ></button>
<button id='start' class='start'></button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r76/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://youtingkuo.github.io/volleyball/basicScene.js"></script>
<script src="https://youtingkuo.github.io/volleyball/ball.js"></script>
<script src="https://youtingkuo.github.io/volleyball/agent.js"></script>
<script src="https://youtingkuo.github.io/volleyball/robot.js"></script>
<audio id="soundtrack" autoplay loop style="display:none">
</audio>
<audio id="slapSound" style="display:none">
<source src="https://youtingkuo.github.io/sound/slap.mp3" type='audio/mp3'>
</audio>
<audio id="spikeSound" style="display:none">
<source src="https://youtingkuo.github.io/sound/spike.mp3" type='audio/mp3'>
</audio>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

.pass {
  position: absolute;
  border-radius: 50px;
  left : 6%;
  top: 77%;
  width: 80px;
  height: 80px;
  background-image: url(https://i.imgur.com/uewilpE.png);
  background-size: cover;
  transition: all 0.5s;
}

.pass.btn-active {
  background-image: url(https://i.imgur.com/OVO20Sn.png);
}

.spike {
  position: absolute;
  border-radius: 50px;
  left : 13%;
  top: 77%;
  width: 80px;
  height: 80px;
  background-image: url(https://i.imgur.com/fDoF6E1.png);
  background-size: cover;
  transition: all 0.5s;
}

.spike.btn-active {
  background-image: url(https://i.imgur.com/ehUlaMl.png);
}

.start {
  position: absolute;
  border-radius: 50px;
  left : 20%;
  top: 77%;
  width: 80px;
  height: 80px;
  background-image: url(https://i.imgur.com/4jtk3xp.png);
  background-size: cover;
  transition: all 0.5s;
}

.start.btn-active {
  background-color:#ffff00;
}

JavaScript

var BUMP = Math.PI/3.49;
var player = function(npc, num) {
		
    this.state = 0; //0:待機  1:發球 2:standBy 3:做球 4:normal攻擊 5:殺球攻擊 //6:移動到殺球地點
    this.npc = npc; //1：電腦, 2：玩家
    this.num = num; //背號
    this.standByPosition = new THREE.Vector3(0, 0, 0);
    this.chaseTarget = new THREE.Vector3(0, 0 ,0);
    this.hitMode = 0;
    //發球用
		this.serveAngleLeft = 0;
		this.serveAngleRight = 0;
		this.startTime = 0;
		this.serveIsOn = false;
		this.serveState = 0;//0,左右手往後 1,右手往前 2,打到球後兩手收回
    this.serveTarget;
    this.isLeft = false;
    //update用
    this.updateAngleLeft = BUMP;
    this.updateAngleRight = BUMP;
    //跳越用
    this.jumpIsOn = false;
	this.jumpServeIsOn = false;
    this.jumpStartTime = 0;
	this.jumpServeState = 0//0:拋球動作，1:拋完球standBy不動，2跳起來，3手準備揮,4手揮出，球射出去了,手正在歸位,5手歸完位，身體正在歸位(著地)
  	this.jumpV = new THREE.Vector3(0, 0, 0);
    this.jumpWaitTime = 0;//等待時間，發球跟殺球共用
    this.jumpState = 0;
    
    //玩家操控的攻擊點
    this.attackTarget = new THREE.Vector3(-4, 0, 0);
    //
    this.preTarget = new THREE.Vector3(0, 0, 0);
    
    this.board = new Agent (new THREE.Vector3 (0, 0, 0), new THREE.Vector3(0,0,0));
    this.robot = new robot (scene, npc, this.num);
    scene.add(this.board.mesh);
    
    this.bump();
 	
  	
 		this.sprite = new SpriteText2D('seek', {
    	align: textAlign.center,
    	font: '20px Courier',
    	fillStyle: '#000000',
    	antialias: true
 	 	});
    this.sprite.scale.set(.02, .02, .02);
  	scene.add(this.sprite);
}

player.prototype.bump = function(){
    if(this.npc) {
    	this.robot.body.rotation.x = 0.2; //Math.PI/15.7
		this.robot.hitBallMachineHandLeft.rotation.x = -0.9; //-Math.PI/3.49
		this.robot.hitBallMachineHandRight.rotation.x = -0.9; //-Math.PI/3.49
        this.board.mesh.position.y = 1.1; //Math.PI/2.85
        this.board.mesh.rotation.z = -0.75; //-Math.PI/4.18; //-0.75
    }
    else {
        this.robot.body.rotation.x = -0.2;
		this.robot.hitBallMachineHandLeft.rotation.x =...