DodgeBall12

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='lifeValue'>Player life: 10</p>
<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: #000000
}

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);
    this.life = 10;
    this.mesh.children[4].material.color.setRGB(0x00, 0x00, 0xff);
    //console.log(this.lifeMesh);
  }
  hit(ball){
    if(point_in_cylinder(ball.mesh, 2, this.mesh, 4, 16)){
      let kept = (Keeper.group == "Ins") ? Ins[Keeper.ID] : Outs[Keeper.ID];
      kept.mesh.children[2].rotation.z = Math.PI/6;
      kept.mesh.children[2].children[1].rotation.z = Math.PI/2;
      kept.mesh.children[3].rotation.z = Math.PI/6;
      kept.mesh.children[3].children[1].rotation.z = Math.PI/2;
      theta2 = 0;
      ball.shootStart = false;
      Attack_IF.visible = false;
      cleaner();
      Keeper = false;
      ball.v0 = 0;
      
      let vec_A = new THREE.Vector3(ball.mesh.position.x - this.mesh.position.x, 0, ball.mesh.position.z - this.mesh.position.z);
      let vec_B = new THREE.Vector3(1,0,0);
      vec_A.normalize();
      
      let goal = Math.acos(vec_A.dot(vec_B));
      //console.log(goal);
      if(ball.mesh.position.z < 0 && (this.mesh.position.z - ball.mesh.position.z) > 0) goal = -goal;
      
      if(goal < 0) goal += (Math.PI*2);
      let facing = this.mesh.rotation.y
      if(facing < 0) facing += (Math.PI*2);
      let delDegree = Math.abs(goal - facing);
      console.log('ball hit at :' + goal);
      console.log('Player facing :' + facing);
      console.log('delta degree :' + delDegree);
      if(delDegree > Math.PI/3 && delDegree < Math.PI*5/3){
        console.log('Critical Hit! 小杰得兩分!');
        this.life = 0;
      }
      else this.life--;
      
      if(this.life <= 0){
        this.mesh.visible = false;
      }
      $('#lifeValue').text ('Player life: ' +...