DodgeBall6

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;// = [-Math.PI/6, 0, Math.PI/6], theta2_c;
var clock, line;
var keyboard = new KeyboardState();
var Attack_IF, d_ball, Keeper, Catcher;
var Outs = [], Ins = [];//, test = true;
class OutPlayer{
  constructor(x=0,xref=0,tx=0,txRef=0,ty=0,tyRef=0){
  /////////////////////
    this.tx = tx;
    this.txRef = txRef
    this.ty = ty;
    this.tyRef = tyRef
    this.tvx = 0;
    this.tvy = 0;
  ///////////////////////
    this.x = x;
    this.xref = xref;
    this.v = 0;
    this.KP = 70;   // 'spring constant'
    this.KD = 20;
  //////////////////////
    this.mesh = makePlayer();
    this.lambda = 0;
    this.pos = new THREE.Vector3();
    this.group = 0;
    this.haveBall = false;
    scene.add(this.mesh);
  }
  updateTheta (dt) {
  	let fx = -this.KP * (this.tx - this.txRef) - this.KD * this.tvx;
    let fy = -this.KP * (this.ty - this.tyRef) - this.KD * this.tvy;
    this.tvx += fx * dt;
    this.tx += this.tvx * dt
    this.tvy += fy * dt;
    this.ty += this.tvy * dt
    return [this.tx, this.ty]
  }
   update (dt) {
  	let f = -this.KP * (this.x-this.xref) - this.KD*this.v;
    this.v += f*dt;
    this.x += this.v*dt
    return this.x
  }
  setRef (ref) {
  	this.xref = ref;
  }
  setThetaRef (xref, yref) {
  	this.txRef = xref;
    this.tyRef = yref;
  }
  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();
      this.haveBall = true;
      theta2 = 0;
      Keeper.pos = this.mesh.position;
      Keeper.rotationY = this.mesh.rotation.y;
      Keeper.group = "Outs"
      ball.shootStart = false;
      let posF_DB = new THREE.Vector3(5, 10, 0);
      this.mesh.updateMatrixWorld();
      this.mesh.localToWorld(posF_DB);
      ball.mesh.position.copy(posF_DB);
     ...