DodgeBall2

by Bai Shiuan Huang

HTML

<div id="info">Dodege Ball
<br>Press QW to rotate direction; 
<br>Press D to increase power; Release to shoot
<p id='v0value'></p>
<button id='reset'>Reset
</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, controls;
var h, L0, v0, theta, theta2;
var clock;
var pos, vel, force, start;
var increaseV0 = false;
var ground;
var line;
var keyboard = new KeyboardState();
var pdcontrol, catcher;
var d_ball;
let returnx, returny, returnz;
class Player{
  constructor(r){
    //pass = 0; atack = 1
    this.PorA = 0;
    //in = 0; out = 1
    this.InOut = r;
    this.mesh = makePlayer();
    this.pos = new THREE.Vector3();
    this.haveBall = false;
    scene.add(this.mesh);
  }
  hit(ball){
    if(Math.sqrt((ball.pos.x - this.pos.x)*(ball.pos.x - this.pos.x) + (ball.pos.z - this.pos.z)*(ball.pos.z - this.pos.z))<= 7 && ball.pos.y >= 0 && ball.pos.y < 17){
      this.haveBall = true;
      ball.hit = true;
    }
  }
}
class Dodgeball{
  constructor(){
    this.increaseV0 = false;
    this.v0 = 0;
    this.mesh = new THREE.Mesh(new THREE.SphereGeometry(2,20,20), new THREE.MeshNormalMaterial());
    scene.add(this.mesh);
    this.pos = new THREE.Vector3();
    this.tmpPos = new THREE.Vector3();
    this.vel = new THREE.Vector3();
    this.shootStart = false;
  }
  start(){
  
  }
  update(dt){
    this.tmpPos.set(this.pos.x, 0, this.pos.z);
  	this.vel.add(force.clone().multiplyScalar(dt));
  	this.pos.add(this.vel.clone().multiplyScalar(dt));
    console.log('x: '+this.pos.x+' y: '+this.pos.y+' z: '+this.pos.z)
    if (this.pos.y < 0) {
  		this.vel.y = this.vel.y * (-0.5)
    	this.vel.x = this.vel.x * (0.8)
      this.vel.z = this.vel.z * (0.8)
      //console.log('x: '+this.vel.x+' y: '+this.vel.y+' z: '+this.vel.z)
      this.pos.y = 0  //this correction is VERY important! (bounce back or NOT)
  	}
    else if(this.tmpPos.x.toFixed(6) == this.pos.x.toFixed(6) && this.tmpPos.z.toFixed(6) == this.pos.z.toFixed(6)){
      this.shootStart = false;
      this.pos.y = 0;
      this.v0 = 0;
      console.log('stopped!!')
    }
    this.mesh.position.copy(this.pos);
  }
}
class PDController {
	constructor (x=0, xref=0) {
  	this.x = x;
    this.xref =...