DodgeBall_clean

by Bai Shiuan Huang

HTML

<div id="info">Dodege Ball
<button id='teach'>?</button>
<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>
<script src="https://yuang2tank.github.io/Dodgeball/DodgeBall001.js"></script>
<script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}
#teach{
  background-image: url(https://i.imgur.com/t9au5ab.png);
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
}
body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, controls;
var theta, theta2;
var clock, line;
var keyboard = new KeyboardState();
var Attack_IF, d_ball, Keeper, Catcher;
var Outs = [], Ins = [], Outs2 = [], Ins2 = [];
var InRunners = [];
var targetC;
var SpriteText2D = THREE_Text.SpriteText2D;
var textAlign = THREE_Text.textAlign;
var cameraPlayer, cpPos, cpPos_box = new THREE.Object3D();
///////////////////////////////////////////////

var agent1, agent2;
var mouse = new THREE.Vector2(), plane;
//var tracer = new THREE.Vector3();

///////////////////////////////////////////////

class Agent_2D{
  constructor(pos, vel, team){
    this.pos = pos.clone();
    this.vel = vel.clone();
    this.team = team;
    this.force = new THREE.Vector3();
    this.target = new THREE.Vector3(pos);
    this.stop = true;
    this.size = 4;  // physical size of the character
    this.mesh = new THREE.Mesh(new THREE.CylinderGeometry(4,4,1,20),new THREE.MeshBasicMaterial({color:0xff0000}));
  }
  step(dt){
    
    this.accumForce();

    // vel += force*dt
    var tmp = this.force.clone().multiplyScalar(dt);
    this.vel.add (tmp);  

    // velocity modulation by arriving
    var diff = new THREE.Vector3();
    diff.subVectors (this.target, this.pos);
    var dst = diff.length();
    if (dst < 20) {//ARRIVAL_R
      this.vel.setLength (dst);	
    }

    // pos += vel*dt
    tmp = this.vel.clone().multiplyScalar (dt);
    this.pos.add (tmp);
    if(this.team == 1){
      if(this.pos.x > -4) this.pos.x = -4;
      if(this.pos.x < -96) this.pos.x = -96;
      if(this.pos.z < -46) this.pos.z = -46;
      if(this.pos.z > 46) this.pos.z = 46;
    }
    else if(this.team == 2){
      if(this.pos.x > 96) this.pos.x = 96;
      if(this.pos.x < 4) this.pos.x = 4;
      if(this.pos.z < -46) this.pos.z = -46;
      if(this.pos.z > 46) this.pos.z = 46;
    }
  }
  accumForce (){
    // clear force accumulator
    this.force.set (0,0,0);

    var sum = new THREE.Vector3(0,0,0);

    // seek
    var tmp = new...