hw4-1

by Leoooo

HTML

<hr>
    <h1 style="text-align:center;font-family:verdana"> HW4 </h1>
        <hr>
        <div id="container" style="float:left;background-color:aqua; margin:3px; width:60vw; height:40vw">
          </div>
        
          <div style="float:left; margin-right: 10px;background-color:bisque; width:32vw;">

              <audio id="collisionsound" style="display:none">
                  <source src="sounds/collision.wav" type='audio/wav'>
                  </audio>

            <br>
            Radius
            <input type=range min=8  max=20 step="2" value = 19 id='rad'> 

            <p>
                <font id='soundtext'style="font-family:verdana;margin-left: 10px;" face="monospace" size='4' color='Black'>Sound</font>
              <input type="checkbox"style="margin-left: 10px;"id="sound" />
            </p>
             <font id='texts'style="font-family:verdana;margin-left: 10px;" face="monospace" size='4' color='Black'>No colison</font>
             <br><br><br><br>
            
            <button id="toggle" style="width:100%;height: 5vw;border:1px solid black;">

                <center style="font-size:20px;font-family:verdana">Start/Pause</center>
            </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

#normal {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  color: #000000
}
body {
	overflow: hidden
}

JavaScript

class Ball {
	constructor (mesh, rad = 2, color) {
    this.mesh = mesh;
    this.mesh.position.y=3
    this.radius = rad;
    this.mesh.material.color =color ;
   // scene.add (this.light)
  //  scene.add (this.mesh)   // add to scene when particle is created
	this.mesh.material.color.copy ( color.clone() );
  }
  
  update (angle) { 
 
  /* var k = 5;
  var x = -120 * Math.cos(k * angle) * Math.sin(angle) -120* k * Math.sin(k * angle) * Math.cos(angle);
  var y = 120 * Math.cos(k*angle)*Math.cos(angle)-120*k*Math.sin(k*angle)*Math.sin(angle);  
  this.mesh.position.set(Math.cos(angle)*Math.cos(k*angle)*120,120*Math.cos(k * angle)* Math.sin(angle),3)*/
  //this.mesh.rotation.x = -Math.PI / 2
  this.mesh.position.z=2
  //this.mesh.rotation.z = Math.atan2(y,x);
  }


}


class obstacle {
  constructor(mesh, width, height) {
    this.mesh = mesh;
    this.width = width;
    this.height = height;
    mesh.position.z = 1;
    this.max = new THREE.Vector3(mesh.position.x + width / 2, mesh.position.z + height / 2,0);
    this.min = new THREE.Vector3(mesh.position.x - width / 2,mesh.position.z - height / 2,0);
   // console.log(this.max)
    scene.add(this.mesh);
  }
  update() {
  this.mesh.updateMatrixWorld() 
     this.max = new THREE.Vector3(this.mesh.position.x + this.width / 2, this.mesh.position.z + this.height / 2);
    this.min = new THREE.Vector3(this.mesh.position.x - this.width / 2,this.mesh.position.z - this.height / 2);
    //console.log(this.min)
    this.collidingCircle(ball);
    this.coordinateOrigin(ball)
  }
  collidingCircle(ball) {
  
    var a = this.max.clone().sub(ball.mesh.position.clone());
    // console.log(a)
   //console.log(ball.mesh.position)
    var b = this.min.clone().sub(ball.mesh.position.clone());
    
    if (a.x < 0) 
    {
      if (a.y < 0){ if (a.x * a.x + a.y * a.y <r * r)return 1; return 0;}
      else if (b.y > 0) {if (a.x * a.x + b.y * b.y < r * r) return 2;return 0;}
      else {if (Math.abs(a.x) <r) return 3;return 0;}
 ...