gameProgramming_hw5

by chaiche

HTML

<div id="info">
hw5<br>
左下角為目標物周圍圖<br>
方向鍵可以控制角度<br>
如撞到防空氣球則會引爆，可以繼續發射下一個飛彈
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/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>

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 keyboard = new KeyboardState();

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var pickables = [];

var mass = 1;
var clock = new THREE.Clock();



var missiles = [];
var obs = [];
var ob_counter = 0;
var texMat;
var booms = [] ;

function buildSprite(texMat) {

  var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(-15, -15, 0),
    new THREE.Vector3(15, -15, 0),
    new THREE.Vector3(15, 15, 0),
    new THREE.Vector3(-15, 15, 0)
  );

  var face;
  face = new THREE.Face3(0, 1, 2);
  geometry.faces.push(face);
  face = new THREE.Face3(0, 2, 3);
  geometry.faces.push(face);

	// upper left corner
	var uv0 = new THREE.Vector2(0.0,0.75);
	var uv1 = new THREE.Vector2(0.125,0.75);
	var uv2 = new THREE.Vector2(0.125,1.0);
	var uv3 = new THREE.Vector2(0.0,1.0);
  
  geometry.faceVertexUvs[0].push([uv0, uv1, uv2]);
  geometry.faceVertexUvs[0].push([uv0, uv2, uv3]);

  geometry.computeBoundingSphere();
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();

  sprite = new THREE.Mesh(geometry, texMat);
  sprite.scale.set(3,3,3);
  return sprite;
}

var Boom = function(){
  this.uvOffsetArray = [];
  this.baseS = 0;
  this.baseT = 0;
  this.counter = 0;
  this.sprite;
  this.texMat = texMat.clone();
  this.isboom = true;

	this.setUpOffsetArray();

  this.mesh = buildSprite(this.texMat);
  
  scene.add(this.mesh);
}
Boom.prototype.setUpOffsetArray = function(){
	var rowCount = 4; // 4x8 sprites
  var colCount = 8;
  for (var i = 0; i < rowCount; i++) {
    var row = [];
    for (var j = 0; j < colCount; j++)
      row.push(new THREE.Vector2(j * 0.125, - 0.25 * i));
    this.uvOffsetArray.push(row);
  }
}
Boom.prototype.spriteAnimate = function() {
  //console.log (uvOffsetArray[baseS][baseT]);
  
	this.mesh.material.map.offset.copy (this.uvOffsetArray[this.baseS][this.baseT]);  
  this.baseT = (this.baseT + 1) % 8;
  if (this.baseT === 0) {
    this.baseS =...