DodgeBall8

by Bai Shiuan Huang

HTML

<div id="info">Dodege Ball
<br>使用QW選擇方向發射; 
<br>Press D or S 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>
<script src="https://yuang2tank.github.io/Dodgeball/DodgeBall001.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 theta, theta2;
var clock, line;
var keyboard = new KeyboardState();
var Attack_IF, d_ball, Keeper, Catcher;
var Outs = [], Ins = [];
var InRunners = [];
var targetC;
class InRunner{
 constructor(pos, mesh){
    this.mesh = mesh;
    this.pdcontrolR = new PDControllerR();
    this.agent = new Agent(pos, this.mesh);
  }
  hit(ball){
    if(Math.sqrt((ball.mesh.position.x - this.mesh.position.x)*(ball.mesh.position.x - this.mesh.position.x) + (ball.mesh.position.z - this.mesh.position.z)*(ball.mesh.position.z - this.mesh.position.z))<= 7 && ball.mesh.position.y >= 0 && ball.mesh.position.y < 17){
      cleaner();
      theta2 = 0;
      this.mesh.children[1].material.color.setRGB(0xee, 0xee, 0xee);
      //ball.shootStart = false;
      ball.vel.x = 0;
      ball.vel.z = 0;
      Attack_IF.visible = false;
    }
  }
}
class Agent {
  constructor(pos, mesh) {
    this.pos = pos.clone();
    this.vel = new THREE.Vector3();
    this.force = new THREE.Vector3();
    this.target = new THREE.Vector3();
    this.size = 3;
    this.mesh = mesh;
    this.MAXSPEED = 50;
    this.ARRIVAL_R = 30;
    this.nbhd = [];
  }
  update(dt) {
    this.accumulateForce();
    this.vel.add(this.force.clone().multiplyScalar(dt));
    // velocity modulation
    let diff = this.target.clone().sub(this.pos)
    let dst = diff.length();
    if (dst < this.ARRIVAL_R) {
      this.vel.setLength(dst)
    }
    this.pos.add(this.vel.clone().multiplyScalar(dt))
    
    if(this.pos.z > 50){
      this.pos.z = 50;
    }
    else if(this.pos.z < -50){
      this.pos.z = -50;
    }
    else if(this.pos.x > 100){
      this.pos.x = 100;
    }
    else if(this.pos.x < 0){
      this.pos.x = 0;
    }
    this.mesh.position.copy(this.pos)
  }
  distanceToTarget() {
    return this.pos.distanceTo(this.target)
  }
  distanceTo(otherAgent) {
    return this.pos.distanceTo(otherAgent.pos)
  }
  addNbr(otherAgent) {
    this.nbhd.push(otherAgent)
  }
 ...